/* ========================================================================== HAUMDAUCHER THEME FOR AUTHENTIK Wurst und Spezialitäten n.e.V. Core Principle: Black on White / White on Black (High Contrast & Consistency) ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap'); /* ========================================================================== 1. GLOBAL FOUNDATION & TYPOGRAPHY ========================================================================== */ :root { --hd-font: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --pf-global--FontFamily--sans-serif: var(--hd-font); --pf-v5-global--FontFamily--sans-serif: var(--hd-font); /* PatternFly Button Variables (Light Mode / Default) */ --pf-c-button--m-primary--BackgroundColor: #000000; --pf-c-button--m-primary--hover--BackgroundColor: #262626; --pf-c-button--m-primary--focus--BackgroundColor: #262626; --pf-c-button--m-primary--active--BackgroundColor: #000000; --pf-c-button--m-primary--Color: #ffffff; --pf-c-button--m-primary--hover--Color: #ffffff; --pf-c-button--m-primary--focus--Color: #ffffff; --pf-c-button--m-primary--active--Color: #ffffff; --pf-c-button--m-secondary--BackgroundColor: #ffffff; --pf-c-button--m-secondary--hover--BackgroundColor: #000000; --pf-c-button--m-secondary--focus--BackgroundColor: #f4f5f8; --pf-c-button--m-secondary--active--BackgroundColor: #000000; --pf-c-button--m-secondary--Color: #000000; --pf-c-button--m-secondary--hover--Color: #ffffff; --pf-c-button--m-secondary--focus--Color: #000000; --pf-c-button--m-secondary--active--Color: #ffffff; --pf-c-button--m-secondary--BorderColor: #000000; --pf-c-button--m-secondary--hover--BorderColor: #000000; --pf-c-button--m-control--Color: #000000; --pf-c-button--m-control--BackgroundColor: transparent; --pf-c-button--m-plain--Color: #000000; --pf-c-button--m-tertiary--Color: #000000; } /* Dark Mode Button Variables */ [data-theme='dark'] { --pf-c-button--m-primary--BackgroundColor: #ffffff; --pf-c-button--m-primary--hover--BackgroundColor: #e4e4e7; --pf-c-button--m-primary--focus--BackgroundColor: #e4e4e7; --pf-c-button--m-primary--active--BackgroundColor: #ffffff; --pf-c-button--m-primary--Color: #000000; --pf-c-button--m-primary--hover--Color: #000000; --pf-c-button--m-primary--focus--Color: #000000; --pf-c-button--m-primary--active--Color: #000000; --pf-c-button--m-secondary--BackgroundColor: transparent; --pf-c-button--m-secondary--hover--BackgroundColor: #ffffff; --pf-c-button--m-secondary--focus--BackgroundColor: #27272a; --pf-c-button--m-secondary--active--BackgroundColor: #ffffff; --pf-c-button--m-secondary--Color: #ffffff; --pf-c-button--m-secondary--hover--Color: #000000; --pf-c-button--m-secondary--focus--Color: #ffffff; --pf-c-button--m-secondary--active--Color: #000000; --pf-c-button--m-secondary--BorderColor: #ffffff; --pf-c-button--m-secondary--hover--BorderColor: #ffffff; --pf-c-button--m-control--Color: #ffffff; --pf-c-button--m-control--BackgroundColor: transparent; --pf-c-button--m-plain--Color: #ffffff; --pf-c-button--m-tertiary--Color: #ffffff; } /* ========================================================================== 2. UNIVERSAL BUTTON CONTRAST ENFORCEMENT Guarantees that button text is NEVER the same color as the button background in ANY state (normal, hover, focus, active, disabled). ========================================================================== */ /* Ensure all inner elements (spans, icons, text) inherit button text color */ .pf-c-button *, .pf-v5-c-button *, button * { color: inherit !important; } /* --- Primary Buttons (Light Mode / Default: Solid Black with Solid White Text) --- */ .pf-c-button.pf-m-primary, .pf-v5-c-button.pf-m-primary, button[type="submit"] { background-color: #000000 !important; color: #ffffff !important; border: 1px solid #000000 !important; font-family: var(--hd-font) !important; font-weight: 700 !important; border-radius: 12px !important; transition: all 0.2s ease-in-out !important; } .pf-c-button.pf-m-primary:hover, .pf-v5-c-button.pf-m-primary:hover, button[type="submit"]:hover { background-color: #262626 !important; color: #ffffff !important; border-color: #262626 !important; } .pf-c-button.pf-m-primary:focus, .pf-v5-c-button.pf-m-primary:focus, button[type="submit"]:focus { background-color: #262626 !important; color: #ffffff !important; outline: 2px solid #000000 !important; outline-offset: 2px !important; } .pf-c-button.pf-m-primary:active, .pf-v5-c-button.pf-m-primary:active, button[type="submit"]:active { background-color: #000000 !important; color: #ffffff !important; } .pf-c-button.pf-m-primary:disabled, .pf-c-button.pf-m-primary.pf-m-disabled, .pf-v5-c-button.pf-m-primary:disabled, .pf-v5-c-button.pf-m-primary.pf-m-disabled, button[type="submit"]:disabled { background-color: #e5e7eb !important; color: #6b7280 !important; border-color: #d1d5db !important; cursor: not-allowed !important; opacity: 0.8 !important; } /* --- Primary Buttons (Dark Mode: Solid White with Solid Black Text) --- */ [data-theme='dark'] .pf-c-button.pf-m-primary:not(ak-flow-executor *), [data-theme='dark'] .pf-v5-c-button.pf-m-primary:not(ak-flow-executor *), [data-theme='dark'] .pf-c-page button[type="submit"] { background-color: #ffffff !important; color: #000000 !important; border: 1px solid #ffffff !important; } [data-theme='dark'] .pf-c-button.pf-m-primary:not(ak-flow-executor *):hover, [data-theme='dark'] .pf-v5-c-button.pf-m-primary:not(ak-flow-executor *):hover, [data-theme='dark'] .pf-c-page button[type="submit"]:hover { background-color: #e4e4e7 !important; color: #000000 !important; border-color: #e4e4e7 !important; } [data-theme='dark'] .pf-c-button.pf-m-primary:not(ak-flow-executor *):focus, [data-theme='dark'] .pf-v5-c-button.pf-m-primary:not(ak-flow-executor *):focus, [data-theme='dark'] .pf-c-page button[type="submit"]:focus { background-color: #e4e4e7 !important; color: #000000 !important; outline: 2px solid #ffffff !important; outline-offset: 2px !important; } [data-theme='dark'] .pf-c-button.pf-m-primary:not(ak-flow-executor *):disabled, [data-theme='dark'] .pf-v5-c-button.pf-m-primary:not(ak-flow-executor *):disabled, [data-theme='dark'] .pf-c-page button[type="submit"]:disabled { background-color: #27272a !important; color: #71717a !important; border-color: #3f3f46 !important; } /* --- Secondary Buttons (Light Mode / Default: Solid White with Black Border & Text) --- */ .pf-c-button.pf-m-secondary, .pf-v5-c-button.pf-m-secondary { background-color: #ffffff !important; color: #000000 !important; border: 1px solid #000000 !important; font-family: var(--hd-font) !important; font-weight: 600 !important; border-radius: 12px !important; transition: all 0.2s ease-in-out !important; } .pf-c-button.pf-m-secondary:hover, .pf-v5-c-button.pf-m-secondary:hover { background-color: #000000 !important; color: #ffffff !important; border-color: #000000 !important; } .pf-c-button.pf-m-secondary:focus, .pf-v5-c-button.pf-m-secondary:focus { background-color: #f4f5f8 !important; color: #000000 !important; outline: 2px solid #000000 !important; outline-offset: 2px !important; } .pf-c-button.pf-m-secondary:active, .pf-v5-c-button.pf-m-secondary:active { background-color: #000000 !important; color: #ffffff !important; } .pf-c-button.pf-m-secondary:disabled, .pf-c-button.pf-m-secondary.pf-m-disabled, .pf-v5-c-button.pf-m-secondary:disabled, .pf-v5-c-button.pf-m-secondary.pf-m-disabled { background-color: #f9fafb !important; color: #9ca3af !important; border-color: #e5e7eb !important; cursor: not-allowed !important; } /* --- Secondary Buttons (Dark Mode) --- */ [data-theme='dark'] .pf-c-button.pf-m-secondary:not(ak-flow-executor *), [data-theme='dark'] .pf-v5-c-button.pf-m-secondary:not(ak-flow-executor *) { background-color: transparent !important; color: #ffffff !important; border: 1px solid #ffffff !important; } [data-theme='dark'] .pf-c-button.pf-m-secondary:not(ak-flow-executor *):hover, [data-theme='dark'] .pf-v5-c-button.pf-m-secondary:not(ak-flow-executor *):hover { background-color: #ffffff !important; color: #000000 !important; border-color: #ffffff !important; } [data-theme='dark'] .pf-c-button.pf-m-secondary:not(ak-flow-executor *):focus, [data-theme='dark'] .pf-v5-c-button.pf-m-secondary:not(ak-flow-executor *):focus { background-color: #27272a !important; color: #ffffff !important; outline: 2px solid #ffffff !important; outline-offset: 2px !important; } [data-theme='dark'] .pf-c-button.pf-m-secondary:not(ak-flow-executor *):disabled, [data-theme='dark'] .pf-v5-c-button.pf-m-secondary:not(ak-flow-executor *):disabled { background-color: transparent !important; color: #52525b !important; border-color: #27272a !important; } /* --- Control / Plain / Tertiary Buttons (e.g. eye toggle on password fields) --- */ .pf-c-button.pf-m-control, .pf-v5-c-button.pf-m-control, .pf-c-button.pf-m-plain, .pf-v5-c-button.pf-m-plain, .pf-c-button.pf-m-tertiary, .pf-v5-c-button.pf-m-tertiary { color: #000000 !important; background-color: transparent !important; } .pf-c-button.pf-m-control:hover, .pf-v5-c-button.pf-m-control:hover, .pf-c-button.pf-m-plain:hover, .pf-v5-c-button.pf-m-plain:hover, .pf-c-button.pf-m-tertiary:hover, .pf-v5-c-button.pf-m-tertiary:hover { color: #000000 !important; background-color: rgba(0, 0, 0, 0.08) !important; } [data-theme='dark'] .pf-c-button.pf-m-control:not(ak-flow-executor *), [data-theme='dark'] .pf-v5-c-button.pf-m-control:not(ak-flow-executor *), [data-theme='dark'] .pf-c-button.pf-m-plain:not(ak-flow-executor *), [data-theme='dark'] .pf-v5-c-button.pf-m-plain:not(ak-flow-executor *), [data-theme='dark'] .pf-c-button.pf-m-tertiary:not(ak-flow-executor *), [data-theme='dark'] .pf-v5-c-button.pf-m-tertiary:not(ak-flow-executor *) { color: #ffffff !important; background-color: transparent !important; } [data-theme='dark'] .pf-c-button.pf-m-control:not(ak-flow-executor *):hover, [data-theme='dark'] .pf-v5-c-button.pf-m-control:not(ak-flow-executor *):hover, [data-theme='dark'] .pf-c-button.pf-m-plain:not(ak-flow-executor *):hover, [data-theme='dark'] .pf-v5-c-button.pf-m-plain:not(ak-flow-executor *):hover, [data-theme='dark'] .pf-c-button.pf-m-tertiary:not(ak-flow-executor *):hover, [data-theme='dark'] .pf-v5-c-button.pf-m-tertiary:not(ak-flow-executor *):hover { color: #ffffff !important; background-color: rgba(255, 255, 255, 0.12) !important; } /* --- Link Buttons --- */ .pf-c-button.pf-m-link, .pf-v5-c-button.pf-m-link { color: #000000 !important; text-decoration: underline !important; background-color: transparent !important; } .pf-c-button.pf-m-link:hover, .pf-v5-c-button.pf-m-link:hover { color: #333333 !important; } [data-theme='dark'] .pf-c-button.pf-m-link:not(ak-flow-executor *), [data-theme='dark'] .pf-v5-c-button.pf-m-link:not(ak-flow-executor *) { color: #ffffff !important; text-decoration: underline !important; } [data-theme='dark'] .pf-c-button.pf-m-link:not(ak-flow-executor *):hover, [data-theme='dark'] .pf-v5-c-button.pf-m-link:not(ak-flow-executor *):hover { color: #d4d4d8 !important; } /* ========================================================================== 3. LOGIN & AUTHENTICATION FLOW SCOPE (Classic White Card & Black Elements) ========================================================================== */ /* Page Viewport Centering & Soft Minimal Backdrop */ ak-flow-executor, .pf-c-login, .pf-v5-c-login { min-height: 100vh !important; min-height: 100dvh !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; background-color: #f4f5f8 !important; background-image: radial-gradient(circle at 50% 15%, rgba(0, 0, 0, 0.03) 0%, transparent 60%) !important; background-attachment: fixed !important; background-size: cover !important; padding: 32px 16px 48px 16px !important; box-sizing: border-box !important; position: relative !important; font-family: var(--hd-font) !important; color: #111111 !important; } /* Centered Login Container */ ak-flow-executor .pf-c-login__container, .pf-c-login .pf-c-login__container, .pf-v5-c-login .pf-v5-c-login__container { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 420px !important; margin: auto !important; padding: 0 !important; box-sizing: border-box !important; } /* Header & Logo */ ak-flow-executor .pf-c-login__header, .pf-c-login .pf-c-login__header, .pf-v5-c-login .pf-v5-c-login__header { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin-top: 0 !important; margin-bottom: 24px !important; padding: 0 !important; } ak-flow-executor .pf-c-login__header ak-brand, ak-flow-executor .pf-c-login__header img, .pf-c-login .pf-c-login__header ak-brand, .pf-c-login .pf-c-login__header img, .pf-v5-c-login .pf-v5-c-login__header ak-brand, .pf-v5-c-login .pf-v5-c-login__header img { display: block !important; max-height: 85px !important; max-width: 240px !important; width: auto !important; margin: 0 auto !important; mix-blend-mode: multiply !important; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08)) !important; transition: all 0.2s ease-in-out; } /* The White Card */ ak-flow-executor .pf-c-login__main, .pf-c-login .pf-c-login__main, .pf-v5-c-login .pf-v5-c-login__main, ak-flow-executor ak-stage, ak-flow-executor .ak-stage { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 20px !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important; padding: 36px 32px 32px 32px !important; width: 100% !important; box-sizing: border-box !important; color: #111111 !important; } /* Hide Redundant / Generic Flow Title */ ak-flow-executor .pf-c-login__main-header-title, ak-flow-executor .pf-v5-c-login__main-header-title, ak-flow-executor .pf-c-title, ak-flow-executor .pf-v5-c-title, .pf-c-login .pf-c-login__main-header-title, .pf-v5-c-login .pf-v5-c-login__main-header-title { display: none !important; } ak-flow-executor .pf-c-login__main-header, .pf-c-login .pf-c-login__main-header, .pf-v5-c-login .pf-v5-c-login__main-header { margin-bottom: 24px !important; padding: 0 !important; text-align: center !important; } ak-flow-executor .pf-c-login__main-header-desc, .pf-c-login .pf-c-login__main-header-desc, .pf-v5-c-login .pf-v5-c-login__main-header-desc { font-family: var(--hd-font) !important; font-size: 0.95rem !important; line-height: 1.5 !important; margin: 0 !important; color: #555555 !important; text-align: center !important; } ak-flow-executor .pf-c-login__main-header-desc strong, ak-flow-executor .pf-c-login__main-header-desc b, .pf-c-login .pf-c-login__main-header-desc strong, .pf-c-login .pf-c-login__main-header-desc b, .pf-v5-c-login .pf-v5-c-login__main-header-desc strong, .pf-v5-c-login .pf-v5-c-login__main-header-desc b { color: #000000 !important; font-weight: 700 !important; } /* Form Groups & Labels */ ak-flow-executor .pf-c-form__group, .pf-c-login .pf-c-form__group, .pf-v5-c-login .pf-v5-c-form__group { margin-bottom: 20px !important; } ak-flow-executor .pf-c-form__label, ak-flow-executor .pf-v5-c-form__label, ak-flow-executor .pf-c-form__label-text, ak-flow-executor .pf-v5-c-form__label-text, ak-flow-executor .pf-c-form__group-label, ak-flow-executor .pf-v5-c-form__group-label, ak-flow-executor label, ak-flow-executor label *, .pf-c-login .pf-c-form__label, .pf-c-login .pf-v5-c-form__label, .pf-c-login .pf-c-form__label-text, .pf-c-login .pf-v5-c-form__label-text, .pf-c-login label, .pf-c-login label *, .pf-v5-c-login label, .pf-v5-c-login label * { font-family: var(--hd-font) !important; font-weight: 600 !important; font-size: 0.9rem !important; color: #000000 !important; margin-bottom: 6px !important; display: inline-block !important; opacity: 1 !important; } /* Required Asterisk */ ak-flow-executor .pf-c-form__label-required, ak-flow-executor .pf-v5-c-form__label-required, .pf-c-login .pf-c-form__label-required, .pf-v5-c-login .pf-v5-c-form__label-required { color: #c9190b !important; margin-left: 4px !important; font-weight: 700 !important; } /* Inputs */ ak-flow-executor .pf-c-form-control, ak-flow-executor .pf-v5-c-form-control, ak-flow-executor input[type="text"], ak-flow-executor input[type="password"], ak-flow-executor input[type="email"], ak-flow-executor input, .pf-c-login .pf-c-form-control, .pf-c-login .pf-v5-c-form-control, .pf-c-login input, .pf-v5-c-login input { font-family: var(--hd-font) !important; font-size: 0.98rem !important; border-radius: 12px !important; padding: 12px 14px !important; background-color: #f9f9fb !important; border: 1px solid #d0d5dd !important; color: #000000 !important; transition: all 0.2s ease-in-out !important; width: 100% !important; box-sizing: border-box !important; } ak-flow-executor input::placeholder, .pf-c-login input::placeholder, .pf-v5-c-login input::placeholder { color: #666666 !important; font-style: normal !important; opacity: 1 !important; } ak-flow-executor input:focus, .pf-c-login input:focus, .pf-v5-c-login input:focus { outline: none !important; border-color: #000000 !important; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12) !important; background-color: #ffffff !important; color: #000000 !important; } /* Autofill Fix */ ak-flow-executor input:-webkit-autofill, ak-flow-executor input:-webkit-autofill:hover, ak-flow-executor input:-webkit-autofill:focus, .pf-c-login input:-webkit-autofill, .pf-v5-c-login input:-webkit-autofill { -webkit-text-fill-color: #000000 !important; -webkit-box-shadow: 0 0 0 1000px #f9f9fb inset !important; box-shadow: 0 0 0 1000px #f9f9fb inset !important; transition: background-color 5000s ease-in-out 0s !important; } /* Flow Submit Button Spacing */ ak-flow-executor button[type="submit"], .pf-c-login button[type="submit"], .pf-v5-c-login button[type="submit"] { width: 100% !important; padding: 13px 20px !important; margin-top: 16px !important; margin-bottom: 4px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Language Selector at Bottom Right */ ak-flow-executor ak-locale-select, ak-flow-executor [part="locale-select"], ak-flow-executor::part(locale-select), .pf-c-login ak-locale-select, .pf-v5-c-login ak-locale-select { position: fixed !important; inset-block-start: auto !important; inset-inline-start: auto !important; top: auto !important; left: auto !important; bottom: 14px !important; right: 18px !important; z-index: 999 !important; opacity: 0.65 !important; transition: opacity 0.2s ease, transform 0.2s ease !important; } ak-flow-executor ak-locale-select:hover, .pf-c-login ak-locale-select:hover { opacity: 1 !important; transform: translateY(-1px) !important; } ak-flow-executor ak-locale-select select, .pf-c-login ak-locale-select select { color: #000000 !important; background: transparent !important; cursor: pointer !important; } ak-flow-executor ak-locale-select label, .pf-c-login ak-locale-select label { color: #000000 !important; cursor: pointer !important; } /* Footer & Watermark */ ak-flow-executor ak-brand-links, ak-flow-executor .pf-c-login__footer, ak-flow-executor .pf-v5-c-login__footer, .pf-c-login .pf-c-login__footer, .pf-v5-c-login .pf-v5-c-login__footer { margin-top: 24px !important; margin-bottom: 0 !important; text-align: center !important; font-size: 0.82rem !important; color: #555555 !important; } ak-flow-executor ak-brand-links a, ak-flow-executor .pf-c-login__footer a, .pf-c-login .pf-c-login__footer a, .pf-v5-c-login .pf-v5-c-login__footer a { color: #000000 !important; text-decoration: none !important; font-weight: 600 !important; } ak-flow-executor ak-brand-links a:hover, ak-flow-executor .pf-c-login__footer a:hover, .pf-c-login .pf-c-login__footer a:hover, .pf-v5-c-login .pf-v5-c-login__footer a:hover { text-decoration: underline !important; } ak-flow-executor .pf-c-login__container::after, .pf-c-login .pf-c-login__container::after, .pf-v5-c-login .pf-v5-c-login__container::after { content: "HAUMDAUCHER • Wurst und Spezialitäten n.e.V."; display: block; margin-top: 28px; margin-bottom: 12px; font-size: 0.76rem; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; color: #888888; text-align: center; } /* Mobile Responsiveness */ @media (max-width: 480px) { ak-flow-executor, .pf-c-login, .pf-v5-c-login { padding: 24px 12px 48px 12px !important; } ak-flow-executor .pf-c-login__container, .pf-c-login .pf-c-login__container, .pf-v5-c-login .pf-v5-c-login__container { padding: 0 !important; } ak-flow-executor .pf-c-login__header, .pf-c-login .pf-c-login__header, .pf-v5-c-login .pf-v5-c-login__header { margin-bottom: 18px !important; } ak-flow-executor .pf-c-login__main, .pf-c-login .pf-c-login__main, .pf-v5-c-login .pf-v5-c-login__main, ak-flow-executor ak-stage, ak-flow-executor .ak-stage { padding: 28px 20px 24px 20px !important; border-radius: 18px !important; } ak-flow-executor .pf-c-login__header img, .pf-c-login .pf-c-login__header img, .pf-v5-c-login .pf-v5-c-login__header img { max-height: 72px !important; } ak-flow-executor .pf-c-login__container::after, .pf-c-login .pf-c-login__container::after, .pf-v5-c-login .pf-v5-c-login__container::after { margin-top: 20px; margin-bottom: 8px; } ak-flow-executor ak-locale-select, .pf-c-login ak-locale-select, .pf-v5-c-login ak-locale-select { bottom: 10px !important; right: 12px !important; } } /* ========================================================================== 4. AUTHENTICATED DASHBOARD (User & Admin Interface) ========================================================================== */ ak-interface-user .pf-c-brand img, ak-interface-admin .pf-c-brand img, .pf-c-page__header-brand img, .pf-v5-c-page__header-brand img { max-height: 36px !important; width: auto !important; } [data-theme='dark'] ak-interface-user .pf-c-brand img, [data-theme='dark'] ak-interface-admin .pf-c-brand img, [data-theme='dark'] .pf-c-page__header-brand img, [data-theme='dark'] .pf-v5-c-page__header-brand img { filter: invert(1) hue-rotate(180deg); }