/* design.css */

:root {
    /* =========================================
     Color Palette
     ========================================= */
    /* Explicitly defined hex codes from the color swatches */
    --color-brand-red: #e84128;
    --color-brand-dark-teal: #22676b;
    --color-brand-cyan: #00aaa9;
    --color-brand-light-teal: #48a9a6;
    --color-brand-navy: #283558;

    /* Additional colors observed in the logo applications */
    --color-brand-white: #ffffff;

    /* Muted / secondary text */
    --color-menu-muted: #B4B4B4;

    /* =========================================
     Typography
     ========================================= */
    /* Font Families */
    --font-family-primary: 'Montserrat', sans-serif;
    --font-family-secondary: 'Karla', sans-serif;

    /* Font Weights
     Note: The image labels all text lines as "Bold", but visually displays
     both bold and standard regular weights for the numbers and text. */
    --font-weight-regular: 400;
    --font-weight-bold: 700;

    /* =========================================
     Nav / Header
     ========================================= */
    --nav-font-size: 0.78125em;
    --nav-font-weight: var(--font-weight-regular);
    --nav-font-weight-active: var(--font-weight-bold);
    --nav-line-height: 100%;
    --nav-font-style: normal;

    /* Nav pill container padding (relative to parent ~16px) */
    --nav-pill-padding-block: 0.45em;
    --nav-pill-padding-inline: 1.5em;
    --nav-pill-gap: 1.8em;
    --nav-pill-radius: 50px;
    --nav-pill-bg: rgba(255, 255, 255, 0.15);
    --nav-pill-blur: 8px;

    /* Header button padding (relative to button font-size 10px, visually matches nav pill) */
    --nav-btn-padding-block: 0.72em;
    --nav-btn-padding-inline: 2.4em;

    /* Header layout */
    --header-padding-block: 0.7em;
    --header-padding-inline: 3em;

    /* Logo */
    --logo-width: 7em;
    --logo-height: 2.2em;

    /* =========================================
     Glass Pill Button
     ========================================= */
    --btn-glass-bg: rgba(255, 255, 255, 0.3);
    --btn-glass-bg-hover: rgba(255, 255, 255, 0.4);
    --btn-glass-blur: 8px;
    --btn-glass-border-color: rgba(255, 255, 255, 0.5);
    --btn-glass-radius: 50px;
    --btn-glass-font-size: 1.1em;
    --btn-glass-padding-block: 0.75em;
    --btn-glass-padding-inline: 1.75em;

    /* =========================================
     Max Aspect Ratio / Letterbox
     ========================================= */
    --max-aspect-ratio: 2 / 1;
    --color-letterbox: #000000;

    /* Frame dimensions — default to full viewport. Inside the
       ultra-wide media query below these are redefined to the
       clamped 2:1 frame so any CSS referencing var(--frame-w)
       or var(--frame-offset) automatically scales to the frame
       instead of the raw viewport. All vw/svw usages across
       the site should reference var(--frame-w). */
    --frame-w: 100vw;
    --frame-offset: 0px;

    /* =========================================
     Animation Durations
     ========================================= */
    --scroll-icon-bounce-duration: 1.2s;
    --pulse-ring-duration: 2.4s;
    --pulse-ring-duration-hover: 1.6s;
    --pulse-ring-ease: ease-in-out;
    --pulse-ring-stagger: 0.3s;

    /* =========================================
     Product Page
     ========================================= */
    --product-zoom-max: 1.6;
    --product-slide-distance: 2em;
    --product-slide-duration: 0.5s;
    --product-slide-easing: cubic-bezier(0.22, 1, 0.36, 1);

    /* =========================================
     Termin / Wizard
     Shared tokens for the multi-step appointment
     wizard. Colors are remapped from the green
     reference to FRITTS brand (red CTA, cyan
     progress, navy text) so the flow reads as
     native FRITTS. All dimensions em-based.
     ========================================= */
    /* Step card shell */
    --termin-card-bg: #ffffff;
    --termin-card-radius: 1.5em;
    --termin-card-shadow: 0 1.5em 3em rgba(0, 0, 0, 0.12);
    --termin-card-padding-block: 3em;
    --termin-card-padding-inline: 3em;
    --termin-card-max-width: 42em;

    /* Text colors */
    --termin-text: var(--color-brand-navy);
    --termin-muted: #6b7280;

    /* Progress bar */
    --termin-progress-track: #e5e7eb;
    --termin-progress-fill: var(--color-brand-cyan);
    --termin-progress-height: 0.3em;

    /* Eyebrow label */
    --termin-eyebrow-color: var(--color-brand-cyan);

    /* Inputs */
    --termin-input-bg: #f5f7f9;
    --termin-input-border: #e5e7eb;
    --termin-input-border-focus: var(--color-brand-cyan);
    --termin-input-radius: 0.75em;
    --termin-input-padding-block: 1em;
    --termin-input-padding-inline: 1.25em;

    /* Option tiles */
    --termin-option-border: #e5e7eb;
    --termin-option-border-active: var(--color-brand-red);
    --termin-option-bg-active: rgba(232, 65, 40, 0.08);
    --termin-option-radius: 1em;

    /* Pill badge ("Nur noch X Schritte!") */
    --termin-pill-bg: rgba(0, 170, 169, 0.12);
    --termin-pill-color: var(--color-brand-cyan);
    --termin-pill-radius: 50px;

    /* Primary full-width wizard button */
    --termin-btn-radius: 0.9em;
    --termin-btn-padding-block: 1.1em;
    --termin-btn-padding-inline: 2em;
    --termin-btn-bg: var(--color-brand-red);
    --termin-btn-bg-hover: #d6391f;
    --termin-btn-disabled-bg: #d1d5db;
}

/* =========================================
   App Frame — clamp content to max 2:1 aspect ratio
   On ultra-wide screens (> 2:1) the document is letterboxed
   with brand green side bars. Because the codebase uses
   viewport-relative root font-size (calc(16 * 100vw / 1644))
   for all em-based sizing, we rescale it off viewport height
   so that em-sized content fits the clamped frame exactly.
   Fixed/absolute elements are re-centered on the frame.
   ========================================= */
.app-frame {
    /* Wrapper is a no-op at normal aspect ratios; flow content
       behaves as before. Kept as a semantic hook for the frame. */
    position: relative;
    width: 100%;
}

@media (min-aspect-ratio: 2 / 1) {
    :root {
        /* Frame width (= 200vh) and left/right gutter offset.
           All viewport-unit usages (vw/svw/dvw) inside the
           clamped frame must be re-expressed relative to
           these so nothing leaks outside the 2:1 area. */
        --frame-w: calc(100vh * 2);
        --frame-offset: calc((100vw - 100vh * 2) / 2);
    }

    html {
        background: var(--color-letterbox);
    }

    /* Clamp flow content to the 2:1 frame and center it.
       Fixed-position chrome (header, side menu) is repositioned
       separately below since it's taken out of normal flow. */
    .app-frame {
        width: var(--frame-w);
        margin-left: var(--frame-offset);
        margin-right: var(--frame-offset);
    }

    /* Letterbox bars — fixed overlays masking the sides of the
       viewport that fall outside the 2:1 frame. Sits above page
       content but below modals (rotate prompt = 999999). */
    body::before,
    body::after {
        content: '';
        position: fixed;
        top: 0;
        bottom: 0;
        width: var(--frame-offset);
        background: var(--color-letterbox);
        z-index: 100000;
        pointer-events: none;
    }
    body::before { left: 0; }
    body::after  { right: 0; }

    /* Side menu tab must sit above the letterbox bars so it
       remains visible. Everything else scales automatically
       because individual rules in the page CSS files reference
       var(--frame-w) / var(--frame-offset), which are redefined
       above. No per-element overrides needed here. */
    .side-menu-tab { z-index: 100001; }
}

/* =========================================
   Rotate Device Prompt (portrait / mobile)
   ========================================= */
#rotate-device-prompt {
    display: none;
}

@media (orientation: portrait) {
    #rotate-device-prompt {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 999999;
        background: var(--color-brand-dark-teal);
        color: var(--color-brand-red);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2em;
        text-align: center;
        font-family: var(--font-family-primary);
    }

    #rotate-device-prompt svg {
        width: min(45vw, 50em);
        height: auto;
        color: var(--color-brand-red);
        transform-origin: 50% 50%;
        animation: rotate-device-rotation 3.5s infinite;

    }

    #rotate-device-prompt p {
        margin-top: 2.5em;
        font-size: 5svw;
        font-weight: var(--font-weight-bold);
        max-width: 18em;
        line-height: 1.4;
    }

    #rotate-device-prompt .rotate-device-logo {
        margin-top: 2.5em;
        width: min(30vw, 24em);
        height: auto;
    }

    body:has(#rotate-device-prompt) {
        overflow: hidden;
    }
}

@keyframes rotate-device-rotation {
    0%   { 
        transform: rotate(0deg); 
        /* Insert ONE of the cubic-bezier options below here */
        animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1); 
    }
    60%  { transform: rotate(90deg); }
    100% { transform: rotate(90deg); }
}