/* ==========================================================================
   VomFass Genusskarte - Online Registrierung
   Redesign "new"-Variante (Ticket #9099)

   Hintergrund: /img/background/Oel-Essig-A3.svg (Ticket #9191).
   Der Austausch soll moeglichst nur ueber die Variablen/den Abschnitt
   "Hintergrund" unten erfolgen (Bild tauschen bzw. wenige Zeilen anpassen).
   ========================================================================== */

:root {
    /* Farbwelt: vomFASS-Gruen (provisorisch, ggf. spaeter feinjustieren) */
    --vf-green: #3c6e28;
    --vf-green-dark: #2a4f1c;
    --vf-green-rgb: 60, 110, 40;
    --vf-green-light: #eef5e9;

    --vf-text: #2c2c2c;
    --vf-text-muted: #6b7280;
    --vf-border: #dbe0d9;
    --vf-error: #c0392b;
    --vf-error-bg: #fdecea;

    --vf-card-radius: 20px;
    --vf-input-radius: 8px;
    --vf-max-width: 760px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--vf-text);
    min-height: 100vh;

    /* Hintergrund ------------------------------------------------------ */
    background-color: var(--vf-green-dark);
    background-image:
        linear-gradient(rgba(20, 40, 15, 0.45), rgba(20, 40, 15, 0.6)),
        url('/img/background/Oel-Essig-A3.svg');
    background-size: cover;
    /* Anker rechts oben: dort sitzt das Logo im SVG; bei cover wird dann
       immer nur links/unten beschnitten und das Logo bleibt sichtbar. */
    background-position: right top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* -------------------------------------------------------------------- */
}

a {
    color: var(--vf-green);
}

.vf-page {
    max-width: 980px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 3rem;
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */

.vf-hero {
    text-align: center;
    color: #fff;
    margin-bottom: 2rem;
}

.vf-hero-logo {
    max-width: 220px;
    width: 60%;
    height: auto;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
    margin-bottom: 1rem;
}

.vf-hero-title {
    font-size: clamp(1.4rem, 4vw, 2.1rem);
    font-weight: 700;
    margin: 0 0 1.25rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Solange das Logo ausgeblendet ist (vf-hero-logo auskommentiert), ruckt der
   Inhalt ab der Ueberschrift 3em nach unten (Padding von oben), damit er nicht
   zu weit oben am Rand klebt. Bei Wiedereinbau des Logos: Klasse
   vf-hero-title-nologo im Template entfernen. */
.vf-hero-title-nologo {
    padding-top: 3em;
}

.vf-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.vf-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45em 1.1em;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(2px);
}

/* ---------------------------------------------------------------------- */
/* Card                                                                    */
/* ---------------------------------------------------------------------- */

.vf-card {
    background: #fff;
    max-width: var(--vf-max-width);
    margin: 0 auto;
    border-radius: var(--vf-card-radius);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    padding: 2.5rem;
}

@media (max-width: 640px) {
    .vf-card {
        padding: 1.5rem 1.15rem;
        border-radius: 14px;
    }
}

.vf-card-header {
    text-align: center;
    margin-bottom: 1.75rem;
}

.vf-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--vf-green-dark);
    margin: 0 0 0.5rem;
}

.vf-card-descr {
    color: var(--vf-text-muted);
    font-size: 0.92rem;
    margin: 0;
}

/* ---------------------------------------------------------------------- */
/* Formular / Feld-Grid                                                    */
/* ---------------------------------------------------------------------- */

.vf-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
    row-gap: 1.1rem;
}

@media (max-width: 640px) {
    .vf-field-grid {
        grid-template-columns: 1fr;
    }
}

.vf-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.vf-field-full {
    grid-column: 1 / -1;
}

.vf-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--vf-text);
}

.vf-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--vf-green);
}

.vf-input,
select.vf-input {
    width: 100%;
    padding: 0.6em 0.8em;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--vf-text);
    background: #fff;
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-input-radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vf-input:focus,
select.vf-input:focus {
    outline: none;
    border-color: var(--vf-green);
    box-shadow: 0 0 0 3px rgba(var(--vf-green-rgb), 0.15);
}

.vf-input::placeholder {
    color: #a7ada4;
}

.vf-field-combo {
    display: flex;
    gap: 0.6rem;
}

.vf-field-combo .vf-combo-main {
    flex: 3 1 auto;
    min-width: 0;
}

.vf-field-combo .vf-combo-sub {
    flex: 1 1 4.5em;
    max-width: 5.5em;
}

.vf-combo-caption {
    display: block;
    font-size: 0.72rem;
    color: var(--vf-text-muted);
    margin-top: 0.15rem;
}

.vf-required {
    color: var(--vf-green);
}

/* Fehler / Validierung --------------------------------------------------- */

.validationtext {
    color: var(--vf-error);
    background: var(--vf-error-bg);
    border-radius: 6px;
    padding: 0.25em 0.5em;
    font-size: 0.78rem;
    line-height: 1.3;
}

.vf-input.validationcb,
input.validationcb {
    outline: 2px solid var(--vf-error);
    outline-offset: 1px;
}

/* ---------------------------------------------------------------------- */
/* Consent-Block (Checkboxen)                                              */
/* ---------------------------------------------------------------------- */

.vf-consent-block {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid #eef0ec;
}

.vf-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0;
}

.vf-consent input[type="checkbox"] {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    margin-top: 0.15rem;
    accent-color: var(--vf-green);
    cursor: pointer;
}

.vf-consent-text {
    font-size: 0.85rem;
    color: var(--vf-text);
    line-height: 1.45;
}

.vf-consent-text .formdescr {
    color: var(--vf-text-muted);
    font-size: 0.78rem;
    margin: 0.25em 0 0;
}

.vf-pflicht-hint {
    text-align: left;
    color: var(--vf-text-muted);
    font-size: 0.8rem;
    margin: 1rem 0 0.5rem;
}

/* ---------------------------------------------------------------------- */
/* Submit-Button                                                          */
/* ---------------------------------------------------------------------- */

.vf-submit-wrap {
    text-align: center;
    margin-top: 1rem;
}

.vf-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    background: var(--vf-green);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.85em 2.4em;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease;
}

.vf-submit-btn:hover:not(:disabled) {
    background: var(--vf-green-dark);
}

.vf-submit-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.vf-submit-btn:disabled {
    background: #b7c3b0;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------------- */
/* Newsletter-Nachfass-Modal (Ticket #9191)                               */
/* ---------------------------------------------------------------------- */

.vf-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    background: rgba(20, 40, 15, 0.6);
    padding: 16px;
}

.vf-modal-card {
    background: #fff;
    border-radius: var(--vf-card-radius);
    max-width: 440px;
    width: 100%;
    padding: 28px 32px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    text-align: center;
}

.vf-modal-title {
    font-weight: 700;
    color: var(--vf-green-dark);
    font-size: 1.05rem;
    margin: 0 0 0.75rem;
}

.vf-modal-text {
    margin: 0;
    color: var(--vf-text);
}

.vf-modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 1.5rem;
}

.vf-modal-btn-secondary {
    display: inline-flex;
    align-items: center;
    background: #fff;
    color: var(--vf-text-muted);
    border: 1px solid var(--vf-border);
    border-radius: 999px;
    padding: 0.85em 2.4em;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.vf-modal-btn-secondary:hover {
    background: var(--vf-green-light);
}

/* ---------------------------------------------------------------------- */
/* Ergebnis-Seite                                                         */
/* ---------------------------------------------------------------------- */

.vf-result-title {
    text-align: center;
    color: var(--vf-green-dark);
    font-size: 1.4rem;
    margin: 0 0 0.5rem;
}

.vf-result-lead {
    text-align: center;
    color: var(--vf-text-muted);
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
}

.vf-result-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem 1.5rem;
}

@media (max-width: 640px) {
    .vf-result-cards {
        grid-template-columns: 1fr;
    }
}

.vf-result-item {
    padding: 0.6rem 0;
    border-bottom: 1px solid #eef0ec;
}

.vf-result-item.vf-result-item-full {
    grid-column: 1 / -1;
}

.vf-result-head {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--vf-text-muted);
    margin-bottom: 0.15rem;
}

.vf-result-val {
    font-size: 0.98rem;
    color: var(--vf-text);
}

.vf-result-val.vf-yes {
    color: var(--vf-green);
    font-weight: 700;
}

.vf-result-val.vf-no {
    color: var(--vf-text-muted);
    font-weight: 600;
}

.vf-ean-box {
    background: var(--vf-green-light);
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-input-radius);
    padding: 1rem 1.25rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.vf-ean-box .vf-ean-label {
    font-size: 0.78rem;
    color: var(--vf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.vf-ean-box .vf-ean-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--vf-green-dark);
    letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------- */
/* Benefit-Badges (unten)                                                  */
/* ---------------------------------------------------------------------- */

.vf-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: var(--vf-max-width);
    margin: 2rem auto 0;
}

@media (max-width: 640px) {
    .vf-benefits {
        grid-template-columns: 1fr;
    }
}

.vf-benefit {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.vf-benefit .vf-icon {
    width: 28px;
    height: 28px;
}

.vf-benefit-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--vf-green-dark);
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */

.vf-footer {
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 2.5rem;
    font-size: 0.85rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.vf-footer p {
    margin: 0 0 0.35rem;
    font-weight: 600;
}

.vf-footer a {
    color: #fff;
    text-decoration: underline;
}