/*!
 * Grün-Event Rollrasen Konfigurator – Frontend Styles
 * Mobile-first; layout switches at 700px, footer refinement below 480px.
 * Scoped selectors override ordinary theme rules. !important is reserved for
 * control resets, inherited site typography, keyboard outlines and hidden state.
 */
.gerk-wrap {
        --gerk-green: #046A38;
        --gerk-lime: #B0CB39;
        --gerk-field: #EFFCD9;
        --gerk-text: #414141;
        --gerk-muted: #6E6E6E;
        --gerk-line: #E0E0E0;
        --gerk-warn: #9A5B00;
        --gerk-warn-bg: #FDF6E3;
        --gerk-alert: #B3261E;
        --gerk-white: #FFFFFF;
        --gerk-surface: #F8F8F8;
        --gerk-alert-bg: #FEF2F2;
        --gerk-brand: var(--gerk-green);
        --gerk-brand-dark: #03512B;
        max-width: 640px;
        margin: 0 auto;
        padding: 16px 12px;
        font-family: "Barlow", Helvetica, Arial, sans-serif !important;
        color: var(--gerk-text);
        -webkit-font-smoothing: antialiased;
        line-height: 1.4;
}
.gerk-wrap, .gerk-wrap * { box-sizing: border-box !important; }
.gerk-wrap * { font-family: inherit !important; }
.gerk-wrap button { cursor: pointer; margin: 0 !important; }
.gerk-wrap a { text-decoration: none !important; }
.gerk-wrap input, .gerk-wrap label { margin: 0 !important; }
.gerk-wrap svg { display: inline-block; vertical-align: middle; }

.gerk-wrap .gerk-card {
        background: var(--gerk-white);
        border: 1px solid var(--gerk-line);
        border-top: 3px solid var(--gerk-brand);
        border-radius: 0;
}
.gerk-wrap .gerk-section { padding: 20px 16px; border-bottom: 1px solid var(--gerk-line); }
.gerk-wrap .gerk-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.gerk-wrap .gerk-section-label { font-size: 11px; font-weight: 700; color: var(--gerk-muted); text-transform: uppercase; letter-spacing: .05em; }
.gerk-wrap .gerk-section-hint { display: none; font-size: 11px; color: var(--gerk-muted); }

/* Sortenwahl */
.gerk-wrap .gerk-sort-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.gerk-wrap .gerk-sort-btn,
.gerk-wrap .gerk-sort-body,
.gerk-wrap .gerk-sort-title-row,
.gerk-wrap .gerk-sort-sub { min-width: 0; }
.gerk-wrap .gerk-sort-btn,
.gerk-wrap .gerk-sort-body,
.gerk-wrap .gerk-sort-title-row,
.gerk-wrap .gerk-sort-title,
.gerk-wrap .gerk-sort-sub { white-space: normal; }
.gerk-wrap .gerk-sort-btn {
        display: flex; align-items: flex-start; gap: 10px;
        padding: 14px !important;
        text-align: left;
        background: var(--gerk-white) !important;
        border: 2px solid var(--gerk-line) !important;
        border-radius: 0 !important;
        transition: background .15s, border-color .15s;
        min-height: 56px; position: relative; z-index: 1; width: 100%;
        color: var(--gerk-text);
}
.gerk-wrap .gerk-sort-btn:not(.is-active):hover { border-color: var(--gerk-green) !important; }
.gerk-wrap .gerk-sort-btn.is-active { border-color: var(--gerk-green) !important; background: var(--gerk-field) !important; z-index: 2; }
.gerk-wrap .gerk-sort-icon { flex-shrink: 0; margin-top: 2px; color: var(--gerk-muted); }
.gerk-wrap .gerk-sort-btn.is-active .gerk-sort-icon { color: var(--gerk-brand); }
.gerk-wrap .gerk-sort-body { flex: 1; }
.gerk-wrap .gerk-sort-title-row { display: flex; align-items: center; gap: 6px; }
.gerk-wrap .gerk-sort-title { font-weight: 700; font-size: 14px; color: var(--gerk-text); }
.gerk-wrap .gerk-sort-btn.is-active .gerk-sort-title { color: var(--gerk-brand-dark); }
.gerk-wrap .gerk-sort-sub { display: block; font-size: 12px; color: var(--gerk-muted); margin-top: 2px; }
.gerk-wrap .gerk-sort-check { color: var(--gerk-brand); }

/* Fläche & Preis */
.gerk-wrap .gerk-area-row { display: flex; flex-direction: column; gap: 10px; }
.gerk-wrap .gerk-area-input-grp { display: flex; flex-direction: column; align-items: stretch; gap: 8px; flex-shrink: 0; width: 100%; }
.gerk-wrap .gerk-area-label { display: block; width: 100%; font-size: 14px; font-weight: 600; color: var(--gerk-text); }
.gerk-wrap .gerk-input-wrap { position: relative; width: 100%; }
.gerk-wrap .gerk-qm-input {
        width: 100%;
        border: 2px solid var(--gerk-line) !important;
        border-radius: 0 !important;
        padding: 10px 32px 10px 12px !important;
        font-size: 16px; font-weight: 700;
        color: var(--gerk-text);
        background: var(--gerk-field) !important;
        min-height: 44px; box-shadow: none !important;
        -moz-appearance: textfield;
}
.gerk-wrap .gerk-qm-input:focus { border-color: var(--gerk-brand) !important; }
.gerk-wrap .gerk-qm-input::-webkit-outer-spin-button,
.gerk-wrap .gerk-qm-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gerk-wrap .gerk-input-suffix { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 700; color: var(--gerk-muted); pointer-events: none; }
.gerk-wrap .gerk-equals { display: none; align-items: center; font-weight: 700; color: var(--gerk-line); padding: 0 4px; }
.gerk-wrap .gerk-price-box { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 10px 16px; background: var(--gerk-brand); color: var(--gerk-white); }
.gerk-wrap .gerk-price-amount { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; color: var(--gerk-white); }
.gerk-wrap .gerk-price-detail { font-size: 11px; opacity: .75; white-space: nowrap; color: var(--gerk-white); }
.gerk-wrap .gerk-tier-tip { margin-top: 10px; padding: 6px 12px; display: flex; align-items: center; gap: 8px; background: var(--gerk-warn-bg); border-left: 3px solid var(--gerk-warn); font-size: 12px; color: var(--gerk-warn); }
.gerk-wrap .gerk-tier-tip-arrow { color: var(--gerk-warn); font-weight: 700; }
.gerk-wrap .gerk-tier-tip strong { color: inherit; font-weight: 700; }
.gerk-wrap .gerk-tier-tip .gerk-tier-tip-save { color: var(--gerk-warn); }

/* PLZ und Status */
.gerk-wrap .gerk-plz-row { display: flex; flex-direction: column; gap: 8px; }
.gerk-wrap .gerk-plz-label { font-size: 14px; font-weight: 600; color: var(--gerk-text); flex-shrink: 0; }
.gerk-wrap .gerk-plz-input-grp { display: flex; flex: 1; }
.gerk-wrap .gerk-plz-input {
        flex: 1; min-width: 0;
        border: 2px solid var(--gerk-line) !important;
        border-radius: 0 !important;
        padding: 10px 12px !important;
        font-size: 14px; letter-spacing: .1em; min-height: 44px;
        background: var(--gerk-white) !important;
        color: var(--gerk-text); box-shadow: none !important;
}
.gerk-wrap .gerk-plz-input:focus,
.gerk-wrap .gerk-plz-input.is-ok { border-color: var(--gerk-brand) !important; }
.gerk-wrap .gerk-plz-input.is-bad { border-color: var(--gerk-alert) !important; }
.gerk-wrap .gerk-plz-badge { display: flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; border: 2px solid; border-left: none; white-space: nowrap; }
.gerk-wrap .gerk-plz-badge.is-ok { background: var(--gerk-field); color: var(--gerk-brand); border-color: var(--gerk-brand); }
.gerk-wrap .gerk-plz-badge.is-bad { background: var(--gerk-alert-bg); color: var(--gerk-alert); border-color: var(--gerk-alert); }
.gerk-wrap .gerk-status-box { margin-top: 10px; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; font-size: 12px; }
.gerk-wrap .gerk-status-box.is-ok { background: var(--gerk-field); border-left: 3px solid var(--gerk-brand); }
.gerk-wrap .gerk-status-box.is-warn { background: var(--gerk-warn-bg); border-left: 3px solid var(--gerk-warn); }
.gerk-wrap .gerk-status-box.is-error { background: var(--gerk-alert-bg); border-left: 3px solid var(--gerk-alert); }
.gerk-wrap .gerk-status-icon { margin-top: 2px; flex-shrink: 0; font-weight: 700; }
.gerk-wrap .gerk-status-icon.is-warn { color: var(--gerk-warn); }
.gerk-wrap .gerk-status-icon.is-error { color: var(--gerk-alert); }
.gerk-wrap .gerk-status-title { font-weight: 700; }
.gerk-wrap .gerk-status-box.is-ok .gerk-status-title { color: var(--gerk-brand-dark); }
.gerk-wrap .gerk-status-box.is-warn .gerk-status-title { color: var(--gerk-warn); }
.gerk-wrap .gerk-status-box.is-error .gerk-status-title { color: var(--gerk-alert); }
.gerk-wrap .gerk-status-text { color: var(--gerk-muted); margin-top: 2px; }
.gerk-wrap .gerk-status-box.is-warn .gerk-status-text { color: var(--gerk-warn); }
.gerk-wrap .gerk-status-box.is-error .gerk-status-text { color: var(--gerk-alert); }
.gerk-wrap .gerk-plz-prehint { margin-top: 8px; font-size: 12px; color: var(--gerk-muted); line-height: 1.5; }

/* Buttons: equal-height mobile rows, original desktop row at 700px. */
.gerk-wrap .gerk-cta-row { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; align-items: stretch; gap: 12px; }
.gerk-wrap .gerk-cta {
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
        padding: 14px 20px !important;
        font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
        transition: background .15s, color .15s;
        min-height: 56px; min-width: 0; width: 100%;
        border-radius: 0 !important; box-shadow: none !important;
}
.gerk-wrap .gerk-cta-primary { background: var(--gerk-brand) !important; color: var(--gerk-white) !important; }
.gerk-wrap .gerk-cta-primary:hover { background: var(--gerk-brand-dark) !important; }
.gerk-wrap .gerk-cta-secondary { background: var(--gerk-white) !important; color: var(--gerk-brand) !important; border: 2px solid var(--gerk-brand) !important; margin: 0; }
.gerk-wrap .gerk-cta-secondary:hover { background: var(--gerk-field) !important; color: var(--gerk-brand-dark) !important; }
.gerk-wrap .gerk-cta-secondary.is-highlight { background: var(--gerk-brand-dark) !important; color: var(--gerk-white) !important; }
.gerk-wrap .gerk-cta-secondary.is-highlight:hover { background: var(--gerk-brand) !important; }
.gerk-wrap .gerk-cta span,
.gerk-wrap .gerk-cta svg { color: inherit; background: transparent; }
.gerk-wrap .gerk-cta-icon { flex-shrink: 0; display: flex; align-items: center; }
.gerk-wrap .gerk-sort-btn:focus-visible,
.gerk-wrap .gerk-cta:focus-visible,
.gerk-wrap .gerk-qm-input:focus-visible,
.gerk-wrap .gerk-plz-input:focus-visible {
        outline: 3px solid var(--gerk-brand) !important;
        outline-offset: 2px !important;
}

/* Footer follows the same content edges as the sections. */
.gerk-wrap .gerk-footer { padding: 16px 16px 18px; background: var(--gerk-surface); display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
.gerk-wrap .gerk-footer-pickup { display: flex; align-items: flex-start; gap: 8px; color: var(--gerk-muted); }
.gerk-wrap .gerk-pin-icon { color: var(--gerk-brand); margin-top: 1px; flex-shrink: 0; }
.gerk-wrap .gerk-footer-pickup strong { color: var(--gerk-text); font-weight: 700; }
.gerk-wrap .gerk-footer-pickup .gerk-next { color: var(--gerk-brand-dark); font-weight: 700; }
.gerk-wrap .gerk-footer-tax { color: var(--gerk-muted); margin-left: auto; }
.gerk-wrap .gerk-footer--warn { background: var(--gerk-alert); color: var(--gerk-white); }
.gerk-wrap .gerk-footer--warn .gerk-footer-pickup,
.gerk-wrap .gerk-footer--warn .gerk-pin-icon,
.gerk-wrap .gerk-footer--warn strong,
.gerk-wrap .gerk-footer--warn .gerk-next,
.gerk-wrap .gerk-footer--warn .gerk-footer-tax { color: var(--gerk-white); }
.gerk-wrap .gerk-footer--warn .gerk-footer-tax { opacity: .85; }
.gerk-wrap .gerk-footer-warn-note { font-size: 12px; line-height: 1.45; font-weight: 600; color: var(--gerk-alert); padding: 10px 16px 0; }
.gerk-wrap .gerk-footer-alt-termine { width: 100%; margin-top: 14px; padding: 14px 16px 16px; border-top: 1px dashed var(--gerk-line); color: var(--gerk-warn); font-size: 12px; font-weight: 600; line-height: 1.45; }

@media (min-width: 700px) {
        .gerk-wrap { padding: 24px 16px; }
        .gerk-wrap .gerk-section { padding: 24px 20px; }
        .gerk-wrap .gerk-section-hint { display: inline; }
        .gerk-wrap .gerk-sort-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .gerk-wrap .gerk-area-row { flex-direction: row; align-items: stretch; gap: 12px; }
        .gerk-wrap .gerk-area-input-grp { flex-direction: row; align-items: center; width: auto; }
        .gerk-wrap .gerk-area-label { display: inline; width: auto; }
        .gerk-wrap .gerk-input-wrap { width: auto; }
        .gerk-wrap .gerk-qm-input { width: 100px; }
        .gerk-wrap .gerk-equals { display: flex; }
        .gerk-wrap .gerk-plz-row { flex-direction: row; align-items: center; gap: 12px; }
        .gerk-wrap .gerk-cta-row { display: flex; flex-wrap: wrap; gap: 0; }
        .gerk-wrap .gerk-cta { width: auto; flex: 1 1 0; min-height: 48px; }
        .gerk-wrap .gerk-cta-secondary { margin-left: -2px; }
        .gerk-wrap .gerk-footer { padding: 16px 20px 20px; justify-content: space-between; }
        .gerk-wrap .gerk-footer-warn-note { padding: 10px 20px 0; }
        .gerk-wrap .gerk-footer-alt-termine { padding: 14px 20px 20px; }
}
@media (width < 480px) {
        .gerk-wrap .gerk-footer { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* Hidden must win over theme display rules and all responsive layouts. */
.gerk-wrap .gerk-hidden { display: none !important; }
.gerk-empty { padding: 16px; border: 1px dashed var(--gerk-line, #E0E0E0); color: var(--gerk-muted, #6E6E6E); font-size: 14px; }