/* ============================================================================
   app.css – Integriertes Haupt-Stylesheet mit starrer, nicht zoombarer UI
   ----------------------------------------------------------------------------
   • Vereint alle Regeln aus base.css (Zoom-Lock) und Haupt-Stylesheet
   • Buttons nun 100 % deckend, Hover-States ohne Transparenz
   • Keine Scroll- oder Pinch-Gesten, kein Double-Tap-Zoom
   • Kommentar am Ende erläutert das erforderliche <meta name="viewport">-Tag
   ==========================================================================*/

@charset "UTF-8";

/* --------------------------- CSS-Variablen -------------------------------- */
:root {
    /* Grund-Palette */
    --light-brown: #8D6E63;
    --dark-brown: rgba(79, 50, 6, 0.27);
    --hover-brown: rgb(167, 167, 191);
    --olive-green: #33691E;

    /* Primäre Aktionen */
    --save-green: #2E7D32;
    --save-green-hover: #388E3C;
    --delete-red: #D32F2F;
    --delete-red-hover: #B71C1C;

    /* Neutrale & Sekundärfarben */
    --harmonious-blue: #47ACDA;
    --harmonious-blue-hover: #2993C5;

    /* Sonstiges */
    --creamy-ivory: #FAFAFA;
    --subtle-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    --hover-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    --scale-factor: 1.0;
    --message-fixed-width: calc(400px * var(--scale-factor));
}

/* -------------------- Global Reset & Viewport-Lock ------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;

    /* Schriftgrößen-Autozoom in iOS verhindern */
    -webkit-text-size-adjust: 100%;

    /* Pinch- und Double-Tap-Zoom sperren */
    touch-action: manipulation;
    -ms-touch-action: manipulation;          /* Legacy Edge/IE */

    /* „Gummi-Scrollen“ und Pull-to-Refresh blockieren */
    overscroll-behavior: none;
}

body {
    /* Zoom-Lock aus base.css */
    position: fixed;
    inset: 0;
    overflow: hidden;

    /* Layout-Eigenschaften aus Haupt-Stylesheet */
    font-family: 'Source Sans Pro', sans-serif;
    background: var(--light-brown);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: filter .3s ease;
    color: var(--creamy-ivory);
}

body.blur-active { filter: blur(30px); }

/* iOS zoomt <16 px-Inputs ↗ fest 16 px setzen                               */
input,
textarea,
select,
button { font-size: 16px; }

/* Links und Buttons: Double-Tap-Zoom prophylaktisch sperren                 */
a,
button { touch-action: manipulation; }

/* --------------------------- Formular-Gruppe ------------------------------ */
.form-group {
    display: flex;
    margin-top: 80px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 800px;
    margin-bottom: 2rem;
    gap: 20px;
    position: relative;
}
.form-group::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--dark-brown);
}

/* ----------------------------- Grid-Layout -------------------------------- */
.grid-custom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, calc(100px * var(--scale-factor)));
    gap: calc(20px * var(--scale-factor));
    justify-content: center;
    position: relative;
    max-width: 100%;
    max-height: 100%;
}
.grid-custom::before,
.grid-custom .horizontal-line,
.grid-custom .vertical-line {
    content: '';
    position: absolute;
    background: var(--dark-brown);
    z-index: 1;
}
.grid-custom::before        { top: calc(100% + 20px); left: 0; width: 100%; height: 2px; }
.grid-custom .horizontal-line { width: 100%; height: 2px; }
.grid-custom .vertical-line   { width: 2px; height: 100%; }
.grid-custom .horizontal-line:nth-child(4n + 3),
.grid-custom .horizontal-line:nth-child(4n + 4) { top: 25%; }
.grid-custom .horizontal-line:nth-child(4n + 7),
.grid-custom .horizontal-line:nth-child(4n + 8) { top: 50%; }
.grid-custom .vertical-line:nth-child(2n + 1),
.grid-custom .vertical-line:nth-child(2n + 2)   { left: 33.333%; }
.grid-custom .vertical-line:nth-child(2n + 3),
.grid-custom .vertical-line:nth-child(2n + 4)   { left: 66.666%; }

/* ---------------------- Buttons & Displays (100 % deckend) ---------------- */
.numpad-button,
.numpad-save,
.numpad-clear,
.message-display,
.increase-quantity,
.keyboard-button {
    --btn-bg: var(--harmonious-blue);
    --btn-bg-hover: var(--harmonious-blue-hover);

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: calc(20px * var(--scale-factor));
    margin: calc(10px * var(--scale-factor));
    border-radius: 15px;
    border: none;
    font-size: calc(2rem * var(--scale-factor));
    color: var(--creamy-ivory);

    /* ►► 100 % deckender Farbverlauf */
    background-image: linear-gradient(
        170deg,
        var(--btn-bg) 0%,
        color-mix(in srgb, var(--btn-bg) 90%, #000) 100%
    );
    box-shadow: var(--subtle-shadow);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-image .25s ease,
        filter .25s ease;
    cursor: pointer;
}
.numpad-button:hover,
.numpad-save:hover,
.numpad-clear:hover,
.keyboard-button:hover {
    transform: translateY(-3px);
    box-shadow: var(--hover-shadow);
    background-image: linear-gradient(
        170deg,
        var(--btn-bg-hover) 0%,
        color-mix(in srgb, var(--btn-bg-hover) 80%, #000) 100%
    );
}
.numpad-button:active,
.numpad-save:active,
.numpad-clear:active,
.keyboard-button:active { transform: scale(0.96); }

/* ---------- Speichern- & Löschen-Buttons ---------- */
.numpad-save  { --btn-bg: var(--save-green);  --btn-bg-hover: var(--save-green-hover);  grid-column: span 3; }
.numpad-clear { --btn-bg: var(--delete-red);  --btn-bg-hover: var(--delete-red-hover); }

/* ---------- Message-Display ---------- */
.message-display {
    flex: 0 0 var(--message-fixed-width);
    width: var(--message-fixed-width);
    height: calc(70px * var(--scale-factor));
    background-image: linear-gradient(
        170deg,
        var(--dark-brown) 0%,
        color-mix(in srgb, var(--dark-brown) 90%, #000) 100%
    );
    font-family: 'Arial', sans-serif;
    overflow: hidden;
    user-select: none;
}

/* ---------- Tastatur-Button ---------- */
.keyboard-button {
    --btn-bg: var(--dark-brown);
    --btn-bg-hover: var(--hover-brown);
    padding: calc(10px * var(--scale-factor)) calc(20px * var(--scale-factor));
    font-size: calc(1.4rem * var(--scale-factor));
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    align-self: flex-start;
}