/** * HayMe Buttons * Premium App Cards 4.4 * * Eigenständiges HayMe-App-Template * Finale Premium-App-Basis * * Enthält: * - dunkle Premium-App-Karten * - permanente Oberflächenreflexe * - langsamen schrägen Lichtstreifen * - dynamischen Ambient-Glow * - Desktop-Hover * - Touch-/Pressed-Effekt nach innen * - Premium-Icon-Box * - CSS-Chevron * - Smartphone-Optimierung * - optimierte Marken-Icons * - Google-Sterne neben dem Titel * * Kompatibel mit: * - .is-pressed * - .is-sweeping * - hayme-card-sweep */ /* ========================================================= 01. BUTTON-VARIABLEN ========================================================= */ body.hayme-app-page { --hayme-card-bg-top: #1c1d21; --hayme-card-bg-middle: #131417; --hayme-card-bg-bottom: #090a0c; --hayme-card-border: rgba(255, 255, 255, 0.24); --hayme-card-border-hover: rgba(255, 255, 255, 0.34); --hayme-card-border-active: rgba(var(--hayme-accent-rgb), 0.68); --hayme-card-title: #ffffff; --hayme-card-description: rgba(255, 255, 255, 0.64); --hayme-card-accent: #d6242a; --hayme-card-accent-light: #ef3940; --hayme-accent-rgb: 214, 36, 42; --hayme-card-radius: 11px; --hayme-card-gap: 18px; --hayme-card-transition: 190ms cubic-bezier(0.22, 1, 0.36, 1); } /* ========================================================= MOBILE DIGITALE VISITENKARTE – ACCORDION Desktop bleibt unverändert. Auf dem Smartphone steht der vorhandene VCF-Button direkt unter den drei Kontakt-Icons. Die weiteren Informationsbuttons werden über den neuen Visitenkarten-Button ein- und ausgeblendet. ========================================================= */ body.hayme-app-page .hayme-digital-card-accordion__control, body.hayme-app-page .hayme-digital-card-accordion__toggle, body.hayme-app-page .hayme-digital-card-accordion__arrow, body.hayme-app-page .hayme-business-tools-accordion__control, body.hayme-app-page .hayme-business-tools-accordion__toggle, body.hayme-app-page .hayme-business-tools-accordion__arrow { display: none !important; } @keyframes hayme-digital-card-arrow-bounce { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(4px); } } @media screen and (max-width: 767px) { body.hayme-app-page .hayme-contact-actions { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; gap: 0 16px !important; position: relative !important; isolation: isolate; } body.hayme-app-page .hayme-digital-card-accordion__control:checked ~ .hayme-action-group--information > .hayme-action-group__header { position: relative !important; z-index: 0; overflow: visible !important; margin-top: 26px !important; } body.hayme-app-page .hayme-action-group--contact { order: 10; width: 100% !important; margin-bottom: 30px !important; } /* Smartphone: sichtbare Rubrik-Überschriften entfernen */ body.hayme-app-page .hayme-action-group--contact > .hayme-action-group__header { display: none !important; } body.hayme-app-page .hayme-action-group--information > .hayme-action-group__header > .hayme-action-group__title, body.hayme-app-page .hayme-action-group--information > .hayme-action-group__header > .hayme-action-group__line, body.hayme-app-page .hayme-business-tools-accordion__content > .hayme-action-group__header > .hayme-action-group__title, body.hayme-app-page .hayme-business-tools-accordion__content > .hayme-action-group__header > .hayme-action-group__line { display: none !important; } body.hayme-app-page .hayme-digital-card-accordion__control { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; } body.hayme-app-page .hayme-action-group--information, body.hayme-app-page .hayme-action-group--information > .hayme-buttons { display: contents !important; } /* ===================================================== KONTAKT SPEICHERN – WRAPPER ===================================================== */ body.hayme-app-page .hayme-action-group--information .hayme-button-wrapper:has(.hayme-stat-action--module_vcard) { order: 20; width: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important; margin: 0 auto !important; box-sizing: border-box !important; } /* ===================================================== KONTAKT SPEICHERN PREMIUM PROFIL-AKZENTFARBE Die Farbe kommt automatisch aus: --hayme-accent-rgb Diese Variable wird pro Profil von PHP gesetzt. ===================================================== */ body.hayme-app-page .hayme-action-group--information .hayme-button-wrapper:has(.hayme-stat-action--module_vcard) .hayme-app-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; grid-template-columns: 54px minmax(0, 1fr) 22px !important; background: radial-gradient( circle at 15% 2%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.050) 20%, transparent 43% ), radial-gradient( ellipse 70% 150% at 102% 50%, rgba(var(--hayme-accent-rgb), 0.34) 0%, rgba(var(--hayme-accent-rgb), 0.13) 38%, transparent 70% ), linear-gradient( 135deg, rgba(var(--hayme-accent-rgb), 0.20) 0%, rgba(var(--hayme-accent-rgb), 0.30) 14%, rgba(var(--hayme-accent-rgb), 0.44) 29%, rgba(var(--hayme-accent-rgb), 0.62) 43%, rgba(var(--hayme-accent-rgb), 0.80) 56%, rgba(var(--hayme-accent-rgb), 0.96) 64%, rgba(var(--hayme-accent-rgb), 0.72) 75%, rgba(var(--hayme-accent-rgb), 0.43) 88%, rgba(var(--hayme-accent-rgb), 0.22) 100% ), linear-gradient( 180deg, #151619 0%, #090a0c 55%, #030304 100% ) !important; border: 1px solid rgba(var(--hayme-accent-rgb), 0.58) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -7px 16px rgba(0, 0, 0, 0.46), inset 0 0 18px rgba(var(--hayme-accent-rgb), 0.12), 0 14px 30px rgba(0, 0, 0, 0.52), 0 0 15px rgba(var(--hayme-accent-rgb), 0.22), 0 0 30px rgba(var(--hayme-accent-rgb), 0.10) !important; transform: translateZ(0); } /* Akzent-Lichtkante rechts */ body.hayme-app-page .hayme-action-group--information .hayme-button-wrapper:has(.hayme-stat-action--module_vcard) .hayme-app-card::after { background: linear-gradient( 180deg, transparent 0%, rgba(var(--hayme-accent-rgb), 0.40) 15%, rgba(var(--hayme-accent-rgb), 0.82) 34%, rgb(var(--hayme-accent-rgb)) 50%, rgba(var(--hayme-accent-rgb), 0.82) 66%, rgba(var(--hayme-accent-rgb), 0.40) 85%, transparent 100% ) !important; box-shadow: 0 0 8px rgba(var(--hayme-accent-rgb), 0.74), 0 0 18px rgba(var(--hayme-accent-rgb), 0.30), -9px 0 24px rgba(var(--hayme-accent-rgb), 0.18) !important; opacity: 0.94 !important; } body.hayme-app-page .hayme-action-group--information .hayme-button-wrapper:has(.hayme-stat-action--module_vcard) .hayme-app-card__title, body.hayme-app-page .hayme-action-group--information .hayme-button-wrapper:has(.hayme-stat-action--module_vcard) .hayme-app-card__description, body.hayme-app-page .hayme-action-group--information .hayme-button-wrapper:has(.hayme-stat-action--module_vcard) .hayme-app-card__arrow { color: #ffffff !important; } body.hayme-app-page .hayme-action-group--information .hayme-button-wrapper:has(.hayme-stat-action--module_vcard) .hayme-app-card__description { opacity: 0.84; } /* Kontakt speichern – Icon */ body.hayme-app-page .hayme-action-group--information .hayme-button-wrapper:has(.hayme-stat-action--module_vcard) .hayme-app-card__icon { width: 54px !important; min-width: 54px !important; max-width: 54px !important; height: 54px !important; min-height: 54px !important; max-height: 54px !important; border: 1px solid rgba(255, 255, 255, 0.30) !important; border-radius: 10px !important; background: radial-gradient( circle at 25% 15%, rgba(255, 255, 255, 0.19) 0%, rgba(255, 255, 255, 0.055) 30%, transparent 50% ), linear-gradient( 145deg, rgba(255, 255, 255, 0.10) 0%, rgba(var(--hayme-accent-rgb), 0.26) 42%, rgba(var(--hayme-accent-rgb), 0.12) 100% ), linear-gradient( 180deg, #292a2e 0%, #16171a 48%, #08090a 100% ) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -5px 10px rgba(0, 0, 0, 0.34), 0 7px 16px rgba(0, 0, 0, 0.36), 0 0 12px rgba(var(--hayme-accent-rgb), 0.16) !important; } body.hayme-app-page .hayme-action-group--information .hayme-button-wrapper:has(.hayme-stat-action--module_vcard) .hayme-app-card__icon svg { width: 26px !important; min-width: 26px !important; max-width: 26px !important; height: 26px !important; min-height: 26px !important; max-height: 26px !important; } /* Kontakt speichern – gedrückter Zustand */ body.hayme-app-page .hayme-action-group--information .hayme-button-wrapper:has(.hayme-stat-action--module_vcard) .hayme-app-card:active, body.hayme-app-page .hayme-action-group--information .hayme-button-wrapper:has(.hayme-stat-action--module_vcard) .hayme-app-card.is-pressed { transform: translateY(1px) scale(0.985) !important; border-color: rgba(var(--hayme-accent-rgb), 0.42) !important; background: radial-gradient( ellipse 80% 140% at 92% 50%, rgba(var(--hayme-accent-rgb), 0.20) 0%, transparent 66% ), linear-gradient( 135deg, rgba(var(--hayme-accent-rgb), 0.15) 0%, rgba(var(--hayme-accent-rgb), 0.34) 55%, rgba(var(--hayme-accent-rgb), 0.18) 100% ), linear-gradient( 180deg, #101113 0%, #070809 55%, #030304 100% ) !important; box-shadow: inset 0 6px 16px rgba(0, 0, 0, 0.58), inset 0 0 16px rgba(var(--hayme-accent-rgb), 0.09), 0 5px 14px rgba(0, 0, 0, 0.52), 0 0 12px rgba(var(--hayme-accent-rgb), 0.15) !important; } /* ===================================================== DIGITALE VISITENKARTE ===================================================== */ body.hayme-app-page .hayme-digital-card-accordion__toggle { order: 30; display: grid !important; position: relative; grid-template-columns: 54px minmax(0, 1fr) 22px !important; align-items: center !important; width: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important; min-height: 84px !important; height: auto !important; box-sizing: border-box !important; margin: 16px auto 0 !important; padding: 7px 15px 7px 13px !important; border: 1px solid transparent !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.038), 0 13px 30px rgba(0, 0, 0, 0.54), 0 0 16px rgba(var(--hayme-accent-rgb), 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.075), inset 0 -2px 6px rgba(0, 0, 0, 0.40) !important; cursor: pointer; user-select: none; -webkit-user-select: none; } body.hayme-app-page .hayme-digital-card-accordion__toggle .hayme-app-card__icon { width: 54px !important; min-width: 54px !important; max-width: 54px !important; height: 54px !important; min-height: 54px !important; max-height: 54px !important; margin: 0 !important; border-color: rgba(255, 255, 255, 0.16) !important; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.46), 0 0 18px rgba(var(--hayme-accent-rgb), 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -5px 10px rgba(0, 0, 0, 0.40) !important; } body.hayme-app-page .hayme-digital-card-accordion__toggle .hayme-app-card__icon svg { width: 26px !important; min-width: 26px !important; max-width: 26px !important; height: 26px !important; min-height: 26px !important; max-height: 26px !important; } body.hayme-app-page .hayme-digital-card-accordion__toggle .hayme-app-card__content { display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 5px !important; min-width: 0; padding-left: 0 !important; } body.hayme-app-page .hayme-digital-card-accordion__toggle .hayme-app-card__title { display: block; white-space: nowrap; } /* ===================================================== DYNAMISCHER HINWEISTEXT ===================================================== */ body.hayme-app-page .hayme-digital-card-accordion__toggle .hayme-app-card__description { font-size: 0 !important; } body.hayme-app-page .hayme-digital-card-accordion__toggle .hayme-app-card__description::after { content: "Details anzeigen"; display: block; color: var(--hayme-card-description); font-size: 12.5px !important; font-weight: 400; line-height: 1.4; } body.hayme-app-page .hayme-digital-card-accordion__control:checked + .hayme-digital-card-accordion__toggle .hayme-app-card__description::after { content: "Details ausblenden"; } /* ===================================================== ACCORDION-PFEIL ===================================================== */ body.hayme-app-page .hayme-digital-card-accordion__arrow { position: static !important; display: flex !important; align-items: center; justify-content: center; width: 28px !important; height: 28px !important; color: #ffffff !important; align-self: center; margin: 0 !important; pointer-events: none; transform: none; transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1); } body.hayme-app-page .hayme-digital-card-accordion__arrow::before { display: none !important; content: none !important; } body.hayme-app-page .hayme-digital-card-accordion__arrow svg { display: block !important; width: 27px !important; min-width: 27px !important; max-width: 27px !important; height: 27px !important; min-height: 27px !important; max-height: 27px !important; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; animation: hayme-digital-card-arrow-bounce 1.25s ease-in-out infinite; } body.hayme-app-page .hayme-digital-card-accordion__control:checked + .hayme-digital-card-accordion__toggle .hayme-digital-card-accordion__arrow { transform: rotate(180deg); } body.hayme-app-page .hayme-digital-card-accordion__control:checked + .hayme-digital-card-accordion__toggle .hayme-digital-card-accordion__arrow svg { animation: none; } body.hayme-app-page .hayme-digital-card-accordion__control:focus-visible + .hayme-digital-card-accordion__toggle { outline: 2px solid var(--hayme-card-accent-light); outline-offset: 3px; } /* ===================================================== BUSINESS TOOLS – MOBILE ACCORDION Breite, Höhe und Kartenfarbe entsprechen der Digitalen Visitenkarte. Premium-Gold bleibt ausschließlich in der Rubrik "Premium Services". ===================================================== */ body.hayme-app-page .hayme-business-tools-accordion__control { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; } body.hayme-app-page .hayme-business-tools-accordion__toggle { display: grid !important; position: relative !important; grid-template-columns: 54px minmax(0, 1fr) 22px !important; align-items: center !important; width: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important; min-height: 84px !important; height: auto !important; box-sizing: border-box !important; margin: 0 auto !important; padding: 7px 15px 7px 13px !important; border: 1px solid transparent !important; border-radius: 10px !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.038), 0 13px 30px rgba(0, 0, 0, 0.54), 0 0 16px rgba(var(--hayme-accent-rgb), 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.075), inset 0 -2px 6px rgba(0, 0, 0, 0.40) !important; cursor: pointer; user-select: none; -webkit-user-select: none; } /* Gleiche Profil-Akzentkante wie bei den anderen HayMe-Karten */ body.hayme-app-page .hayme-business-tools-accordion__toggle::after { background: linear-gradient( 180deg, transparent 0%, rgba(var(--hayme-accent-rgb), 0.40) 15%, rgba(var(--hayme-accent-rgb), 0.80) 34%, var(--hayme-card-accent-light) 50%, rgba(var(--hayme-accent-rgb), 0.80) 66%, rgba(var(--hayme-accent-rgb), 0.40) 85%, transparent 100% ) !important; box-shadow: 0 0 7px rgba(var(--hayme-accent-rgb), 0.78), 0 0 16px rgba(var(--hayme-accent-rgb), 0.28), -8px 0 24px rgba(var(--hayme-accent-rgb), 0.20) !important; opacity: 0.94 !important; } /* Krone / Icon */ body.hayme-app-page .hayme-business-tools-accordion__toggle .hayme-app-card__icon { width: 54px !important; min-width: 54px !important; max-width: 54px !important; height: 54px !important; min-height: 54px !important; max-height: 54px !important; margin: 0 !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.16) !important; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.46), 0 0 18px rgba(var(--hayme-accent-rgb), 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -5px 10px rgba(0, 0, 0, 0.40) !important; } body.hayme-app-page .hayme-business-tools-accordion__toggle .hayme-app-card__icon svg { display: block !important; width: 27px !important; min-width: 27px !important; max-width: 27px !important; height: 27px !important; min-height: 27px !important; max-height: 27px !important; fill: none !important; stroke: currentColor !important; margin: 0 !important; padding: 0 !important; } body.hayme-app-page .hayme-business-tools-accordion__toggle .hayme-app-card__content { display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 5px !important; min-width: 0; padding-left: 0 !important; } body.hayme-app-page .hayme-business-tools-accordion__toggle .hayme-app-card__title { display: block; white-space: nowrap; } /* Dynamischer Hinweistext */ body.hayme-app-page .hayme-business-tools-accordion__toggle .hayme-business-tools-accordion__description { font-size: 0 !important; } body.hayme-app-page .hayme-business-tools-accordion__toggle .hayme-business-tools-accordion__description::after { content: "Details anzeigen"; display: block; color: var(--hayme-card-description); font-size: 12.5px !important; font-weight: 400; line-height: 1.4; } body.hayme-app-page .hayme-business-tools-accordion__control:checked + .hayme-business-tools-accordion__toggle .hayme-business-tools-accordion__description::after { content: "Details ausblenden"; } /* Business-Tools Pfeil */ body.hayme-app-page .hayme-business-tools-accordion__arrow { position: static !important; display: flex !important; align-items: center; justify-content: center; width: 28px !important; height: 28px !important; color: #ffffff !important; align-self: center; margin: 0 !important; pointer-events: none; transform: none; transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1); } body.hayme-app-page .hayme-business-tools-accordion__arrow::before { display: none !important; content: none !important; } body.hayme-app-page .hayme-business-tools-accordion__arrow svg { display: block !important; width: 27px !important; min-width: 27px !important; max-width: 27px !important; height: 27px !important; min-height: 27px !important; max-height: 27px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; animation: hayme-digital-card-arrow-bounce 1.25s ease-in-out infinite; } body.hayme-app-page .hayme-business-tools-accordion__control:checked + .hayme-business-tools-accordion__toggle .hayme-business-tools-accordion__arrow { transform: rotate(180deg); } body.hayme-app-page .hayme-business-tools-accordion__control:checked + .hayme-business-tools-accordion__toggle .hayme-business-tools-accordion__arrow svg { animation: none; } body.hayme-app-page .hayme-business-tools-accordion__control:focus-visible + .hayme-business-tools-accordion__toggle { outline: 2px solid var(--hayme-card-accent-light); outline-offset: 3px; } /* ===================================================== BUSINESS TOOLS – INHALT ===================================================== */ body.hayme-app-page .hayme-business-tools-accordion__content { position: relative; width: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important; box-sizing: border-box !important; max-height: 1600px; overflow: hidden; margin: 16px auto 0 !important; padding: 0 !important; opacity: 1; transform: translateY(0); visibility: visible; transition: max-height 720ms cubic-bezier(0.16, 1, 0.3, 1), margin 680ms cubic-bezier(0.16, 1, 0.3, 1), opacity 360ms ease 110ms, transform 680ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s; } body.hayme-app-page .hayme-business-tools-accordion__content > .hayme-action-group__header { display: none !important; } body.hayme-app-page .hayme-business-tools-accordion__content > .hayme-buttons { position: relative; z-index: 2; width: 100% !important; box-sizing: border-box !important; margin-top: 0 !important; gap: 16px !important; } /* Accordion geschlossen */ body.hayme-app-page .hayme-business-tools-accordion__control:not(:checked) ~ .hayme-business-tools-accordion__content { max-height: 0 !important; overflow: hidden !important; margin-top: 0 !important; opacity: 0 !important; transform: translateY(-12px) !important; visibility: hidden; pointer-events: none; transition: max-height 620ms cubic-bezier(0.4, 0, 0.2, 1), margin 580ms cubic-bezier(0.4, 0, 0.2, 1), padding 580ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms ease, transform 580ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 620ms; } /* ===================================================== INFORMATIONEN ===================================================== */ body.hayme-app-page .hayme-action-group--information > .hayme-action-group__header { display: none !important; } body.hayme-app-page .hayme-action-group--information .hayme-button-wrapper:not(:has(.hayme-stat-action--module_vcard)) { order: 50; position: relative; z-index: 1; width: calc((100% - 52px) / 2) !important; max-width: calc((100% - 52px) / 2) !important; box-sizing: border-box !important; max-height: 166px; overflow: hidden; /* * Einheitlicher Abstand: * 16 px nach oben, kein zusätzlicher Abstand nach unten. * Dadurch sitzt die erste Reihe sauber unter dem Accordion * und zwischen den Reihen bleibt derselbe Rhythmus. */ margin: 16px 0 0 !important; opacity: 1; transform: translateY(0); transition: max-height 1100ms cubic-bezier(0.16, 1, 0.3, 1), margin 1000ms cubic-bezier(0.16, 1, 0.3, 1), opacity 500ms ease 180ms, transform 1000ms cubic-bezier(0.16, 1, 0.3, 1); } body.hayme-app-page .hayme-action-group--information .hayme-button-wrapper:not(:has(.hayme-stat-action--module_vcard)) .hayme-app-card { position: relative; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto !important; justify-items: center !important; align-content: center !important; gap: 8px !important; width: 100% !important; min-height: 130px !important; height: 130px !important; padding: 12px !important; box-sizing: border-box !important; text-align: center !important; } body.hayme-app-page .hayme-action-group--information .hayme-button-wrapper:not(:has(.hayme-stat-action--module_vcard)) .hayme-app-card__icon { margin: 0 auto !important; } body.hayme-app-page .hayme-action-group--information .hayme-button-wrapper:not(:has(.hayme-stat-action--module_vcard)) .hayme-app-card__content { align-items: center !important; text-align: center !important; } body.hayme-app-page .hayme-action-group--information .hayme-button-wrapper:not(:has(.hayme-stat-action--module_vcard)) .hayme-app-card__title, body.hayme-app-page .hayme-action-group--information .hayme-button-wrapper:not(:has(.hayme-stat-action--module_vcard)) .hayme-app-card__description { width: 100% !important; text-align: center !important; } body.hayme-app-page .hayme-action-group--information .hayme-button-wrapper:not(:has(.hayme-stat-action--module_vcard)) .hayme-app-card__arrow { display: none !important; } body.hayme-app-page .hayme-action-group--information .hayme-stat-action--module_website .hayme-app-card__title, body.hayme-app-page .hayme-action-group--information .hayme-stat-action--module_route .hayme-app-card__title, body.hayme-app-page .hayme-action-group--information .hayme-stat-action--module_review .hayme-app-card__title, body.hayme-app-page .hayme-action-group--information .hayme-button-wrapper:not(:has(.hayme-stat-action--module_vcard)) .hayme-app-card__description { font-size: 0 !important; } body.hayme-app-page .hayme-action-group--information .hayme-stat-action--module_website .hayme-app-card__title::after { content: "Webseite"; } body.hayme-app-page .hayme-action-group--information .hayme-stat-action--module_website .hayme-app-card__description::after { content: "Online ansehen"; } body.hayme-app-page .hayme-action-group--information .hayme-stat-action--module_route .hayme-app-card__title::after { content: "Route"; } body.hayme-app-page .hayme-action-group--information .hayme-stat-action--module_route .hayme-app-card__description::after { content: "Route starten"; } body.hayme-app-page .hayme-action-group--information .hayme-stat-action--module_review .hayme-app-card__title::after { content: "Bewerten"; } body.hayme-app-page .hayme-action-group--information .hayme-stat-action--module_review .hayme-app-card__description::after { content: "Auf Google"; } body.hayme-app-page .hayme-action-group--information .hayme-stat-action--module_hours .hayme-app-card__description::after { content: "Jetzt ansehen"; } body.hayme-app-page .hayme-action-group--information .hayme-button-wrapper:not(:has(.hayme-stat-action--module_vcard)) .hayme-app-card__title::after { display: block; font-size: 14px !important; line-height: 1.25 !important; } body.hayme-app-page .hayme-action-group--information .hayme-button-wrapper:not(:has(.hayme-stat-action--module_vcard)) .hayme-app-card__description::after { display: block; font-size: 11.5px !important; line-height: 1.4 !important; } body.hayme-app-page .hayme-action-group--information .hayme-stat-action--module_hours .hayme-app-card__title { font-size: 14px !important; line-height: 1.25 !important; } body.hayme-app-page .hayme-action-group--information .hayme-stat-action--module_website::before { animation-delay: -1s !important; } body.hayme-app-page .hayme-action-group--information .hayme-stat-action--module_route::before { animation-delay: -4.5s !important; } body.hayme-app-page .hayme-action-group--information .hayme-stat-action--module_review::before { animation-delay: -8s !important; } body.hayme-app-page .hayme-action-group--information .hayme-stat-action--module_hours::before { animation-delay: -11.5s !important; } /* Accordion geschlossen */ body.hayme-app-page .hayme-digital-card-accordion__control:not(:checked) ~ .hayme-action-group--information > .hayme-action-group__header, body.hayme-app-page .hayme-digital-card-accordion__control:not(:checked) ~ .hayme-action-group--information .hayme-button-wrapper:not(:has(.hayme-stat-action--module_vcard)) { max-height: 0 !important; overflow: hidden !important; margin-top: 0 !important; margin-bottom: 0 !important; opacity: 0 !important; transform: translateY(-20px) !important; visibility: hidden; pointer-events: none; transition: max-height 900ms cubic-bezier(0.4, 0, 0.2, 1), margin 820ms cubic-bezier(0.4, 0, 0.2, 1), opacity 420ms ease, transform 820ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 900ms; } } /* ========================================================= 02. AKTIONSBEREICH ========================================================= */ body.hayme-app-page .hayme-action-section { width: 100%; max-width: none; margin: 0; padding: 0; } /* ========================================================= 03. BUTTON-LISTE ========================================================= */ body.hayme-app-page .hayme-buttons { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 720px; gap: var(--hayme-card-gap); margin: 0 auto; padding: 0; } body.hayme-app-page .hayme-button-wrapper { width: 100%; min-width: 0; margin: 0; padding: 0; } /* ========================================================= 04. APP-BUTTON ========================================================= */ body.hayme-app-page .hayme-app-card { position: relative; isolation: isolate; display: grid; grid-template-columns: 62px minmax(0, 1fr) 26px; align-items: center; width: 100%; max-width: none; min-width: 0; min-height: 98px; gap: 18px; margin: 0; padding: 14px 19px 14px 16px; overflow: hidden; border: 1px solid var(--hayme-card-border); border-radius: var(--hayme-card-radius); background: linear-gradient( 180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.018) 12%, transparent 29% ), radial-gradient( circle at 18% 8%, rgba(255, 255, 255, 0.040) 0%, rgba(255, 255, 255, 0.012) 20%, transparent 35% ), radial-gradient( ellipse 46% 145% at 112% 50%, rgba(var(--hayme-accent-rgb), 0.060) 0%, rgba(var(--hayme-accent-rgb), 0.015) 34%, transparent 62% ), linear-gradient( 180deg, var(--hayme-card-bg-top) 0%, var(--hayme-card-bg-middle) 45%, var(--hayme-card-bg-bottom) 100% ); color: var(--hayme-card-title); font-family: var( --hayme-font-family, "Poppins", Arial, sans-serif ); font-size: inherit; text-align: left; text-decoration: none; white-space: normal; cursor: pointer; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.040), 0 16px 36px rgba(0, 0, 0, 0.58), 0 30px 60px rgba(0, 0, 0, 0.20), 0 0 18px rgba(var(--hayme-accent-rgb), 0.040), inset 0 1px 0 rgba(255, 255, 255, 0.085), inset 0 -2px 7px rgba(0, 0, 0, 0.42); transform: translateZ(0) translateY(0) scale(1); transform-origin: center; transition: transform var(--hayme-card-transition), border-color 190ms ease, box-shadow 220ms ease, background 220ms ease; appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; } /* ========================================================= 05. OBERFLÄCHENLICHT ========================================================= */ body.hayme-app-page .hayme-app-card::before { content: ""; position: absolute; top: -35%; bottom: -35%; left: -48%; z-index: 1; width: 32%; opacity: 0; background: linear-gradient( 105deg, transparent 0%, rgba(255, 255, 255, 0.015) 34%, rgba(255, 255, 255, 0.055) 44%, rgba(255, 255, 255, 0.13) 50%, rgba(255, 255, 255, 0.055) 56%, rgba(255, 255, 255, 0.015) 66%, transparent 100% ); transform: translateX(0) skewX(-15deg); pointer-events: none; } /* ========================================================= 06. AKZENT-LICHTKANTE RECHTS ========================================================= */ body.hayme-app-page .hayme-app-card::after { content: ""; position: absolute; top: 11%; right: 0; bottom: 11%; z-index: 1; width: 2px; border-radius: 999px; background: linear-gradient( 180deg, transparent 0%, rgba(var(--hayme-accent-rgb), 0.40) 15%, rgba(var(--hayme-accent-rgb), 0.80) 34%, var(--hayme-card-accent-light) 50%, rgba(var(--hayme-accent-rgb), 0.80) 66%, rgba(var(--hayme-accent-rgb), 0.40) 85%, transparent 100% ); box-shadow: 0 0 7px rgba(var(--hayme-accent-rgb), 0.78), 0 0 16px rgba(var(--hayme-accent-rgb), 0.28), -8px 0 24px rgba(var(--hayme-accent-rgb), 0.20); opacity: 0.94; pointer-events: none; transition: width 140ms ease, opacity 140ms ease, box-shadow 180ms ease; } /* ========================================================= 07. LICHTSTREIFEN-ANIMATION ========================================================= */ @keyframes hayme-card-sweep { 0% { left: -48%; opacity: 0; } 12% { opacity: 0.65; } 78% { opacity: 0.48; } 100% { left: 132%; opacity: 0; } } body.hayme-app-page .hayme-app-card.is-sweeping::before { animation: hayme-card-sweep 1400ms cubic-bezier(0.22, 1, 0.36, 1); } /* ========================================================= 08. PREMIUM-ICON-BOX ========================================================= */ body.hayme-app-page .hayme-app-card__icon { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 62px; min-width: 62px; max-width: 62px; height: 62px; min-height: 62px; max-height: 62px; flex-shrink: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; background: radial-gradient( circle at 26% 16%, rgba(255, 255, 255, 0.105) 0%, rgba(255, 255, 255, 0.030) 28%, transparent 48% ), linear-gradient( 120deg, rgba(255, 255, 255, 0.018) 0%, transparent 35%, rgba(255, 255, 255, 0.012) 60%, transparent 100% ), linear-gradient( 180deg, #303238 0%, #1d1f23 35%, #111216 68%, #08090a 100% ); color: #ffffff; font-size: 27px; line-height: 1; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.46), 0 0 18px rgba(var(--hayme-accent-rgb), 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -5px 10px rgba(0, 0, 0, 0.40); transform: translateZ(0) scale(1); transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; } /* SVG-Sicherheitsbegrenzung */ body.hayme-app-page .hayme-app-card__icon svg { display: block !important; width: 29px !important; min-width: 29px !important; max-width: 29px !important; height: 29px !important; min-height: 29px !important; max-height: 29px !important; margin: 0 !important; padding: 0 !important; color: currentColor; fill: none; stroke: currentColor; flex: 0 0 29px; transform: none; } /* ========================================================= 09. TEXTBEREICH ========================================================= */ body.hayme-app-page .hayme-app-card__content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; width: auto; min-width: 0; max-width: none; gap: 5px; } body.hayme-app-page .hayme-app-card__title { display: block; width: auto; min-width: 0; max-width: none; margin: 0; color: var(--hayme-card-title); font-size: 18px; font-weight: 700; line-height: 1.24; letter-spacing: -0.015em; white-space: normal; word-break: normal; overflow-wrap: break-word; } body.hayme-app-page .hayme-app-card__description { display: block; width: auto; min-width: 0; max-width: none; margin: 0; color: var(--hayme-card-description); font-size: 13px; font-weight: 400; line-height: 1.44; white-space: normal; word-break: normal; overflow-wrap: break-word; } /* ========================================================= 10. GOOGLE-BEWERTUNG ========================================================= */ body.hayme-app-page .hayme-app-card__google-heading { display: flex; align-items: center; flex-wrap: nowrap; width: 100%; min-width: 0; gap: 8px; } body.hayme-app-page .hayme-app-card__google-heading .hayme-app-card__title { flex: 0 1 auto; min-width: 0; white-space: nowrap; } body.hayme-app-page .hayme-app-card__google-stars { display: inline-flex; align-items: center; flex: 0 0 auto; color: #f4b400; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.8px; white-space: nowrap; text-shadow: 0 0 6px rgba(244, 180, 0, 0.34); } /* ========================================================= 11. MARKEN-ICONS ========================================================= */ body.hayme-app-page .hayme-brand-icon--whatsapp svg { display: block !important; width: 36px !important; min-width: 36px !important; max-width: 36px !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; filter: drop-shadow( 0 0 7px rgba(37, 211, 102, 0.28) ); } body.hayme-app-page .hayme-brand-icon--google { display: flex; align-items: center; justify-content: center; } body.hayme-app-page .hayme-brand-icon--google svg { display: block !important; width: 32px !important; min-width: 32px !important; max-width: 32px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; transform: translateY(-1px); filter: drop-shadow( 0 0 4px rgba(255, 255, 255, 0.08) ); } /* ========================================================= 12. PFEIL / CHEVRON ========================================================= */ body.hayme-app-page .hayme-app-card__arrow { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 26px; height: 34px; color: var(--hayme-card-accent-light); font-size: 0; line-height: 1; transform: translateX(-4px); transition: transform 190ms cubic-bezier(0.22, 1, 0.36, 1), color 190ms ease; } body.hayme-app-page .hayme-app-card__arrow::before { content: ""; display: block; width: 11px; height: 11px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; border-radius: 1px; transform: rotate(45deg); transition: transform 190ms cubic-bezier(0.22, 1, 0.36, 1), border-color 190ms ease; } body.hayme-app-page .hayme-app-card__arrow svg { display: none; } /* ========================================================= 13. DESKTOP-HOVER ========================================================= */ @media (hover: hover) and (pointer: fine) { body.hayme-app-page .hayme-app-card:hover { transform: translateY(0.5px) scale(0.993); border-color: var(--hayme-card-border-hover); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.050), 0 20px 44px rgba(0, 0, 0, 0.62), 0 34px 70px rgba(0, 0, 0, 0.23), 0 0 18px rgba(var(--hayme-accent-rgb), 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.105), inset 0 -2px 8px rgba(0, 0, 0, 0.42); } body.hayme-app-page .hayme-app-card:hover::after { box-shadow: 0 0 7px rgba(var(--hayme-accent-rgb), 0.58), 0 0 15px rgba(var(--hayme-accent-rgb), 0.18), -8px 0 22px rgba(var(--hayme-accent-rgb), 0.11); } body.hayme-app-page .hayme-app-card:hover .hayme-app-card__icon { transform: translateY(-0.5px) scale(1.006); border-color: rgba(255, 255, 255, 0.24); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.50), 0 0 14px rgba(var(--hayme-accent-rgb), 0.035), inset 0 3px 10px rgba(0, 0, 0, 0.48), inset 0 -3px 9px rgba(0, 0, 0, 0.40); } body.hayme-app-page .hayme-app-card:hover .hayme-app-card__arrow { color: #ffffff; transform: translateX(0); } /* ===================================================== KONTAKT SPEICHERN – DEZENTER HOVER NACH INNEN Gleicher Grundstil wie die anderen Buttons, nur mit leichtem Inset-Effekt, damit der Button beim Hover sichtbar nach innen geht. ===================================================== */ body.hayme-app-page .hayme-action-group--information .hayme-button-wrapper:has(.hayme-stat-action--module_vcard) .hayme-app-card:hover { transform: translateY(0.5px) scale(0.990) !important; border-color: rgba(var(--hayme-accent-rgb), 0.52) !important; box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -3px 8px rgba(0, 0, 0, 0.30), inset 0 0 12px rgba(var(--hayme-accent-rgb), 0.07), 0 10px 22px rgba(0, 0, 0, 0.50), 0 0 11px rgba(var(--hayme-accent-rgb), 0.13) !important; } body.hayme-app-page .hayme-action-group--information .hayme-button-wrapper:has(.hayme-stat-action--module_vcard) .hayme-app-card:hover .hayme-app-card__icon { transform: translateY(0.5px) scale(0.985) !important; border-color: rgba(255, 255, 255, 0.24) !important; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.11), inset 0 -2px 6px rgba(0, 0, 0, 0.28), 0 5px 10px rgba(0, 0, 0, 0.34), 0 0 9px rgba(var(--hayme-accent-rgb), 0.10) !important; } body.hayme-app-page .hayme-action-group--information .hayme-button-wrapper:has(.hayme-stat-action--module_vcard) .hayme-app-card:hover .hayme-app-card__arrow { color: #ffffff !important; transform: translateX(-1px) scale(0.97) !important; } } /* ========================================================= 14. TOUCH / GEDRÜCKTER ZUSTAND ========================================================= */ body.hayme-app-page .hayme-app-card:active, body.hayme-app-page .hayme-app-card.is-pressed { transform: translateY(1px) scale(0.98); border-color: rgba(255, 255, 255, 0.28); background: linear-gradient( 180deg, #141619 0%, #0d0e10 52%, #060708 100% ); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.62), 0 0 14px rgba(255, 255, 255, 0.035), inset 0 6px 16px rgba(0, 0, 0, 0.68), inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: transform 110ms cubic-bezier(0.22, 1, 0.36, 1), border-color 100ms ease, box-shadow 100ms ease, background 100ms ease; } body.hayme-app-page .hayme-app-card:active::after, body.hayme-app-page .hayme-app-card.is-pressed::after { width: 2px; opacity: 0.55; box-shadow: 0 0 7px rgba(var(--hayme-accent-rgb), 0.55), 0 0 16px rgba(var(--hayme-accent-rgb), 0.16); } /* Kein Browser-Linkmenü beim langen Gedrückthalten. */ body.hayme-app-page .hayme-app-card, body.hayme-app-page .hayme-app-card * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } body.hayme-app-page .hayme-app-card:active .hayme-app-card__icon, body.hayme-app-page .hayme-app-card.is-pressed .hayme-app-card__icon { transform: scale(0.97); border-color: rgba(var(--hayme-accent-rgb), 0.38); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28), 0 0 15px rgba(var(--hayme-accent-rgb), 0.10), inset 0 4px 10px rgba(0, 0, 0, 0.62), inset 0 -2px 7px rgba(0, 0, 0, 0.36); } body.hayme-app-page .hayme-app-card:active .hayme-app-card__arrow, body.hayme-app-page .hayme-app-card.is-pressed .hayme-app-card__arrow { color: #ffffff; transform: translateX(-3px) scale(0.94); } /* ========================================================= 15. TASTATUR-FOKUS ========================================================= */ body.hayme-app-page .hayme-app-card:focus { outline: none; } body.hayme-app-page .hayme-app-card:focus-visible { outline: none; border-color: rgba(var(--hayme-accent-rgb), 0.68); box-shadow: 0 0 0 3px rgba(var(--hayme-accent-rgb), 0.16), 0 16px 36px rgba(0, 0, 0, 0.54); } /* ========================================================= 16. ACTION GROUPS ========================================================= */ body.hayme-app-page .hayme-contact-actions { display: flex; flex-direction: column; width: 100%; gap: 72px; } body.hayme-app-page .hayme-action-group { width: 100%; min-width: 0; } body.hayme-app-page .hayme-action-group__header { display: grid; grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr); align-items: center; width: 100%; gap: 14px; margin: 0 0 22px; } body.hayme-app-page .hayme-action-group__title { margin: 0 !important; padding: 0 !important; color: rgba(255, 255, 255, 0.92) !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; } body.hayme-app-page .hayme-action-group__line { display: block; width: 50%; height: 2px; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.18) 20%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0.18) 80%, transparent 100% ); } body.hayme-app-page .hayme-action-group__line:first-child { justify-self: end; } body.hayme-app-page .hayme-action-group__line:last-child { justify-self: start; transform: scaleX(-1); } /* ========================================================= 17. GRID ========================================================= */ body.hayme-app-page .hayme-buttons { display: grid; width: 100%; grid-template-columns: 1fr; gap: 20px; } body.hayme-app-page .hayme-button-wrapper { width: 100%; min-width: 0; } body.hayme-app-page .hayme-buttons--location { grid-template-columns: 1fr; } /* ========================================================= 18. KARTEN IM GRID ========================================================= */ body.hayme-app-page .hayme-contact-actions .hayme-app-card { width: 100%; height: 100%; min-height: 116px; text-decoration: none; } body.hayme-app-page .hayme-contact-actions .hayme-app-card__icon svg { display: block !important; width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; } /* ========================================================= 19. TABLET ========================================================= */ @media screen and (min-width: 768px) { body.hayme-app-page .hayme-buttons--two-columns { grid-template-columns: repeat( 2, minmax(0, 1fr) ); } body.hayme-app-page .hayme-buttons--three-columns { grid-template-columns: repeat( 2, minmax(0, 1fr) ); } } /* ========================================================= 20. DESKTOP ========================================================= */ @media screen and (min-width: 1200px) { body.hayme-app-page .hayme-buttons--three-columns { display: grid !important; grid-template-columns: repeat( 3, minmax(0, 1fr) ) !important; gap: 28px !important; } body.hayme-app-page .hayme-buttons--three-columns .hayme-button-wrapper { width: 100% !important; margin: 0 !important; } body.hayme-app-page .hayme-buttons--three-columns .hayme-app-card { width: 100% !important; min-height: 92px !important; height: 92px !important; padding: 12px 18px !important; grid-template-columns: 58px minmax(0, 1fr) 28px !important; column-gap: 16px !important; } body.hayme-app-page .hayme-buttons--three-columns .hayme-app-card__icon { width: 58px !important; min-width: 58px !important; max-width: 58px !important; height: 58px !important; min-height: 58px !important; max-height: 58px !important; border-radius: 15px !important; } body.hayme-app-page .hayme-buttons--three-columns .hayme-app-card__icon svg { width: 28px !important; min-width: 28px !important; max-width: 28px !important; height: 28px !important; min-height: 28px !important; max-height: 28px !important; } body.hayme-app-page .hayme-buttons--three-columns .hayme-brand-icon--whatsapp svg { width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; } body.hayme-app-page .hayme-buttons--three-columns .hayme-brand-icon--google svg { width: 30px !important; min-width: 30px !important; max-width: 30px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; } body.hayme-app-page .hayme-buttons--three-columns .hayme-app-card__title { font-size: 18px !important; line-height: 1.25 !important; } body.hayme-app-page .hayme-buttons--three-columns .hayme-app-card__description { margin-top: 4px !important; font-size: 14px !important; line-height: 1.35 !important; } body.hayme-app-page .hayme-buttons--location .hayme-app-card { min-height: 106px; } } /* ========================================================= 21. SMARTPHONE ========================================================= */ @media screen and (max-width: 767px) { body.hayme-app-page .hayme-buttons { width: 100%; max-width: none; gap: 16px; padding-right: 10px; padding-left: 10px; box-sizing: border-box; } body.hayme-app-page .hayme-contact-actions { gap: 52px; } body.hayme-app-page .hayme-action-group__header { gap: 10px; margin-bottom: 14px; } body.hayme-app-page .hayme-action-group__title { font-size: 12px !important; } body.hayme-app-page .hayme-app-card { grid-template-columns: 54px minmax(0, 1fr) 22px; min-height: 88px; gap: 13px; padding: 12px 15px 12px 13px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.038), 0 13px 30px rgba(0, 0, 0, 0.54), 0 0 16px rgba(var(--hayme-accent-rgb), 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.075), inset 0 -2px 6px rgba(0, 0, 0, 0.40); } body.hayme-app-page .hayme-contact-actions .hayme-app-card { min-height: 104px; } body.hayme-app-page .hayme-app-card::before { border-radius: 9px; } body.hayme-app-page .hayme-app-card__icon { width: 54px; min-width: 54px; max-width: 54px; height: 54px; min-height: 54px; max-height: 54px; border-radius: 10px; font-size: 24px; } body.hayme-app-page .hayme-app-card__icon svg { width: 26px !important; min-width: 26px !important; max-width: 26px !important; height: 26px !important; min-height: 26px !important; max-height: 26px !important; } body.hayme-app-page .hayme-brand-icon--whatsapp svg { width: 32px !important; min-width: 32px !important; max-width: 32px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; } body.hayme-app-page .hayme-brand-icon--google svg { width: 29px !important; min-width: 29px !important; max-width: 29px !important; height: 29px !important; min-height: 29px !important; max-height: 29px !important; transform: none; } body.hayme-app-page .hayme-app-card__title { font-size: 16px; } body.hayme-app-page .hayme-app-card__description { font-size: 12.5px; line-height: 1.40; } body.hayme-app-page .hayme-app-card__google-heading { gap: 6px; } body.hayme-app-page .hayme-app-card__google-stars { font-size: 13px; letter-spacing: 0.45px; } body.hayme-app-page .hayme-app-card__arrow { width: 22px; height: 30px; transform: translateX(-3px); } body.hayme-app-page .hayme-app-card__arrow::before { width: 10px; height: 10px; border-width: 1.9px; } } /* ========================================================= 22. SEHR KLEINE SMARTPHONES ========================================================= */ @media screen and (max-width: 380px) { body.hayme-app-page .hayme-buttons { padding-right: 8px; padding-left: 8px; } body.hayme-app-page .hayme-app-card { grid-template-columns: 50px minmax(0, 1fr) 20px; min-height: 84px; gap: 10px; padding: 11px 12px; } body.hayme-app-page .hayme-app-card__icon { width: 50px; min-width: 50px; max-width: 50px; height: 50px; min-height: 50px; max-height: 50px; font-size: 22px; } body.hayme-app-page .hayme-brand-icon--whatsapp svg { width: 30px !important; min-width: 30px !important; max-width: 30px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; } body.hayme-app-page .hayme-brand-icon--google svg { width: 27px !important; min-width: 27px !important; max-width: 27px !important; height: 27px !important; min-height: 27px !important; max-height: 27px !important; } body.hayme-app-page .hayme-app-card__title { font-size: 15px; } body.hayme-app-page .hayme-app-card__description { font-size: 12px; } body.hayme-app-page .hayme-app-card__google-heading { gap: 5px; } body.hayme-app-page .hayme-app-card__google-stars { font-size: 12px; letter-spacing: 0.3px; } } /* ========================================================= 23. REDUZIERTE BEWEGUNGEN ========================================================= */ @media (prefers-reduced-motion: reduce) { body.hayme-app-page .hayme-app-card, body.hayme-app-page .hayme-app-card__icon, body.hayme-app-page .hayme-app-card__arrow, body.hayme-app-page .hayme-business-tools-accordion__arrow, body.hayme-app-page .hayme-business-tools-accordion__arrow svg { animation: none !important; transition: none !important; transform: none !important; } body.hayme-app-page .hayme-app-card::before { animation: none !important; } } /* ========================================================= MOBILE BUTTON-HÖHE – FINALE ÜBERSCHREIBUNG ========================================================= */ @media screen and (max-width: 767px) { body.hayme-app-page .hayme-contact-actions .hayme-app-card { min-height: 84px !important; height: auto !important; padding-top: 7px !important; padding-bottom: 7px !important; } } /* ========================================================= WEISS-SCHWARZER VERLAUF IM KARTENRAND ========================================================= */ body.hayme-app-page .hayme-app-card { border: 1px solid transparent; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.018) 12%, transparent 29% ) padding-box, radial-gradient( circle at 18% 8%, rgba(255, 255, 255, 0.040) 0%, rgba(255, 255, 255, 0.012) 20%, transparent 35% ) padding-box, radial-gradient( ellipse 46% 145% at 112% 50%, rgba(var(--hayme-accent-rgb), 0.060) 0%, rgba(var(--hayme-accent-rgb), 0.015) 34%, transparent 62% ) padding-box, linear-gradient( 180deg, var(--hayme-card-bg-top) 0%, var(--hayme-card-bg-middle) 45%, var(--hayme-card-bg-bottom) 100% ) padding-box, radial-gradient( ellipse 78% 95% at 0% 0%, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.14) 42%, rgba(255, 255, 255, 0.04) 70%, transparent 100% ) border-box, radial-gradient( ellipse 112% 95% at 0% 100%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.11) 48%, rgba(255, 255, 255, 0.035) 82%, transparent 100% ) border-box, linear-gradient( 135deg, rgba(255, 255, 255, 0.10) 0%, rgba(22, 23, 26, 0.76) 54%, rgba(0, 0, 0, 0.94) 100% ) border-box; } @media (hover: hover) and (pointer: fine) { body.hayme-app-page .hayme-app-card:hover { border-color: transparent; } } body.hayme-app-page .hayme-app-card:active, body.hayme-app-page .hayme-app-card.is-pressed { border-color: rgba(255, 255, 255, 0.16); background: linear-gradient( 180deg, #141619 0%, #0d0e10 52%, #060708 100% ) padding-box, radial-gradient( ellipse 78% 95% at 0% 0%, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.14) 42%, rgba(255, 255, 255, 0.04) 70%, transparent 100% ) border-box, radial-gradient( ellipse 112% 95% at 0% 100%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.11) 48%, rgba(255, 255, 255, 0.035) 82%, transparent 100% ) border-box, linear-gradient( 135deg, rgba(255, 255, 255, 0.10) 0%, rgba(22, 23, 26, 0.76) 54%, rgba(0, 0, 0, 0.94) 100% ) border-box; } body.hayme-app-page .hayme-app-card:focus-visible { border-color: transparent; } /* ========================================================= 24. ABSTAND VOR PREMIUM-FUNKTIONEN ========================================================= */ body.hayme-app-page .hayme-action-group.hayme-premium-modules { padding-top: 30px !important; } /* Premium-Rubrik */ body.hayme-app-page .hayme-premium-modules .hayme-premium-title { display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: #e7b84b !important; font-size: 15px !important; text-shadow: 0 0 8px rgba(231, 184, 75, 0.28), 0 0 18px rgba(231, 184, 75, 0.12); } body.hayme-app-page .hayme-premium-modules .hayme-premium-title__crown { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow( 0 0 5px rgba(231, 184, 75, 0.3) ); } body.hayme-app-page .hayme-premium-modules .hayme-action-group__line { background: linear-gradient( 90deg, transparent 0%, rgba(231, 184, 75, 0.08) 28%, rgba(231, 184, 75, 0.38) 72%, rgba(231, 184, 75, 0.78) 100% ); box-shadow: 0 0 8px rgba(231, 184, 75, 0.12); } @media screen and (max-width: 767px) { body.hayme-app-page .hayme-action-group.hayme-premium-modules { /* * Business Tools sitzt im gleichen vertikalen Rhythmus * wie Kontakt speichern und Digitale Visitenkarte. * * Der negative Wert gleicht den zusätzlichen Abstand aus, * der durch die getrennte Premium-Sektion entsteht. */ padding-top: 0 !important; margin-top: -10px !important; } /* * Wenn die Digitale Visitenkarte geöffnet ist, bleibt zwischen * der letzten Info-Kachel und Business Tools ein sauberer Abstand. */ body.hayme-app-page:has( .hayme-digital-card-accordion__control:checked ) .hayme-action-group.hayme-premium-modules { margin-top: -6px !important; } /* * Falls keine Digitale Visitenkarte vorhanden ist, * Business Tools normal mit 16 px Abstand darstellen. */ body.hayme-app-page:not(:has( .hayme-digital-card-accordion__control )) .hayme-action-group.hayme-premium-modules { margin-top: 16px !important; } body.hayme-app-page .hayme-premium-modules > .hayme-business-tools-accordion__toggle { margin-top: 0 !important; } body.hayme-app-page .hayme-premium-modules .hayme-premium-title { gap: 6px; font-size: 12px !important; white-space: nowrap; } body.hayme-app-page .hayme-premium-modules .hayme-premium-title__crown { width: 15px; height: 15px; flex-basis: 15px; } } /* ========================================================= 25. AUTOMATISCHER LICHTSTREIFEN ========================================================= */ @keyframes hayme-card-auto-sweep { 0%, 58% { left: -48%; opacity: 0; } 64% { opacity: 0.65; } 84% { opacity: 0.48; } 92%, 100% { left: 132%; opacity: 0; } } body.hayme-app-page .hayme-app-card::before { animation: hayme-card-auto-sweep 14s ease-in-out infinite; } /* Individuelle Zeitpunkte */ body.hayme-app-page .hayme-contact-actions .hayme-action-group:nth-child(1) .hayme-button-wrapper:nth-child(2) .hayme-app-card::before { animation-delay: -4s; } body.hayme-app-page .hayme-contact-actions .hayme-action-group:nth-child(1) .hayme-button-wrapper:nth-child(3) .hayme-app-card::before { animation-delay: -8s; } body.hayme-app-page .hayme-contact-actions .hayme-action-group:nth-child(2) .hayme-button-wrapper:nth-child(1) .hayme-app-card::before { animation-delay: -2s; } body.hayme-app-page .hayme-contact-actions .hayme-action-group:nth-child(2) .hayme-button-wrapper:nth-child(2) .hayme-app-card::before { animation-delay: -6s; } body.hayme-app-page .hayme-contact-actions .hayme-action-group:nth-child(2) .hayme-button-wrapper:nth-child(3) .hayme-app-card::before { animation-delay: -10s; } body.hayme-app-page .hayme-contact-actions .hayme-action-group:nth-child(3) .hayme-app-card::before { animation-delay: -5s; } body.hayme-app-page .hayme-premium-modules .hayme-button-wrapper:nth-child(1) .hayme-app-card::before { animation-delay: -1s; } body.hayme-app-page .hayme-premium-modules .hayme-button-wrapper:nth-child(2) .hayme-app-card::before { animation-delay: -5s; } body.hayme-app-page .hayme-premium-modules .hayme-button-wrapper:nth-child(3) .hayme-app-card::before { animation-delay: -9s; } body.hayme-app-page .hayme-premium-modules .hayme-button-wrapper:nth-child(4) .hayme-app-card::before { animation-delay: -12s; } @media (prefers-reduced-motion: reduce) { body.hayme-app-page .hayme-app-card::before { animation: none !important; } } /* ========================================================= ÖFFNUNGSZEITEN-POPUP ========================================================= */ body.hayme-app-page .hayme-opening-hours__header { display: grid !important; grid-template-columns: 74px minmax(0, 1fr) !important; align-items: center !important; gap: 20px !important; text-align: left !important; } body.hayme-app-page .hayme-opening-hours__icon { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 74px !important; min-width: 74px !important; max-width: 74px !important; height: 74px !important; min-height: 74px !important; max-height: 74px !important; overflow: hidden !important; flex: 0 0 74px !important; border: 1px solid rgba(var(--hayme-accent-rgb), 0.62); border-radius: 50%; color: var(--hayme-card-accent-light); background: radial-gradient( circle at 32% 22%, rgba(255, 255, 255, 0.10), transparent 42% ), #191a1d; box-shadow: 0 0 20px rgba(var(--hayme-accent-rgb), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.10); } body.hayme-app-page .hayme-opening-hours__icon svg { display: block !important; width: 38px !important; min-width: 38px !important; max-width: 38px !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; margin: 0 !important; padding: 0 !important; transform: none !important; } body.hayme-app-page .hayme-opening-hours__heading h2, body.hayme-app-page .hayme-opening-hours__heading p { margin-right: 44px; } body.hayme-app-page .hayme-opening-hours { margin-top: 28px; padding: 8px 28px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 18px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012) ); color: rgba(255, 255, 255, 0.90); font-family: var( --hayme-font-family, "Poppins", Arial, sans-serif ); } body.hayme-app-page .hayme-opening-hours__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; min-height: 78px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: 16px; } body.hayme-app-page .hayme-opening-hours__row:last-child { border-bottom: 0; } body.hayme-app-page .hayme-opening-hours__time { text-align: right; white-space: nowrap; } body.hayme-app-page .hayme-opening-hours__time.is-closed { color: var(--hayme-card-accent-light); } @media screen and (max-width: 767px) { body.hayme-app-page .hayme-opening-hours__header { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; } body.hayme-app-page .hayme-opening-hours__icon { width: 58px !important; min-width: 58px !important; max-width: 58px !important; height: 58px !important; min-height: 58px !important; max-height: 58px !important; flex-basis: 58px !important; } body.hayme-app-page .hayme-opening-hours__icon svg { width: 30px !important; min-width: 30px !important; max-width: 30px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; } body.hayme-app-page .hayme-opening-hours { margin-top: 22px; padding: 6px 18px; border-radius: 15px; } body.hayme-app-page .hayme-opening-hours__row { min-height: 66px; gap: 14px; font-size: 14px; } } /* ========================================================= SMARTPHONE: TELEFON, E-MAIL UND WHATSAPP ALS ICONS ========================================================= */ @media screen and (max-width: 767px) { body.hayme-app-page .hayme-contact-actions > .hayme-action-group:first-child > .hayme-buttons--three-columns { display: grid !important; grid-template-columns: repeat(3, 88px) !important; justify-content: center !important; align-items: center !important; width: 100% !important; gap: 22px !important; margin-right: auto !important; margin-left: auto !important; padding: 0 !important; } body.hayme-app-page .hayme-contact-actions > .hayme-action-group:first-child .hayme-button-wrapper { width: 88px !important; height: 88px !important; margin: 0 !important; } body.hayme-app-page .hayme-contact-actions > .hayme-action-group:first-child .hayme-app-card { display: flex !important; align-items: center !important; justify-content: center !important; width: 88px !important; min-width: 88px !important; max-width: 88px !important; height: 88px !important; min-height: 88px !important; max-height: 88px !important; gap: 0 !important; padding: 0 !important; border-radius: 22px !important; } body.hayme-app-page .hayme-contact-actions > .hayme-action-group:first-child .hayme-app-card__content, body.hayme-app-page .hayme-contact-actions > .hayme-action-group:first-child .hayme-app-card__arrow { display: none !important; } body.hayme-app-page .hayme-contact-actions > .hayme-action-group:first-child .hayme-app-card__icon { width: 68px !important; min-width: 68px !important; max-width: 68px !important; height: 68px !important; min-height: 68px !important; max-height: 68px !important; margin: 0 !important; border-radius: 18px !important; } body.hayme-app-page .hayme-contact-actions > .hayme-action-group:first-child .hayme-app-card__icon svg { width: 36px !important; min-width: 36px !important; max-width: 36px !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; } body.hayme-app-page .hayme-contact-actions > .hayme-action-group:first-child .hayme-brand-icon--whatsapp svg { width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; } } /* ========================================================= SEHR KLEINE SMARTPHONES – KONTAKT-ICONS ========================================================= */ @media screen and (max-width: 350px) { body.hayme-app-page .hayme-contact-actions > .hayme-action-group:first-child > .hayme-buttons--three-columns { grid-template-columns: repeat(3, 80px) !important; gap: 14px !important; } body.hayme-app-page .hayme-contact-actions > .hayme-action-group:first-child .hayme-button-wrapper, body.hayme-app-page .hayme-contact-actions > .hayme-action-group:first-child .hayme-app-card { width: 80px !important; min-width: 80px !important; max-width: 80px !important; height: 80px !important; min-height: 80px !important; max-height: 80px !important; } }