/**
 * MyImmoLeads – Standort-Landingpages
 *
 * Ergänzt css/style.css. BEM mit dem Präfix mil-lp-, damit nichts mit den
 * bestehenden Klassen der Startseite kollidiert.
 */

.mil-lp {
    --lp-rot:        #E60000;
    --lp-rot-dunkel: #B30000;
    --lp-text:       #1a1a1a;
    --lp-grau:       #6b7280;
    --lp-linie:      #e4e4e7;
    --lp-flaeche:    #ffffff;
    --lp-hinter:     #f7f7f9;
    --lp-radius:     14px;
    --lp-schatten:   0 10px 40px rgba(26, 26, 26, .08);

    background: var(--lp-hinter);
    color: var(--lp-text);
}

.mil-lp .container {
    width: min(1180px, 100% - 2.5rem);
    margin-inline: auto;
}

/* ── Kopfzeile ───────────────────────────────────────────────────────────── */

.mil-lp__topbar {
    background: var(--lp-flaeche);
    border-bottom: 1px solid var(--lp-linie);
    position: sticky;
    top: 0;
    z-index: 40;
}

.mil-lp__topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 0;
}

.mil-lp__logo {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.4px;
    color: var(--lp-text);
    text-decoration: none;
}

.mil-lp__logo span { color: var(--lp-rot); }

.mil-lp__phone {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--lp-text);
    text-decoration: none;
    padding: .55rem .9rem;
    border: 1.5px solid var(--lp-linie);
    border-radius: 999px;
    transition: border-color .15s, color .15s;
}

.mil-lp__phone:hover { border-color: var(--lp-rot); color: var(--lp-rot); }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.mil-lp__hero { padding: clamp(2rem, 5vw, 4.5rem) 0; }

.mil-lp__hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

@media (max-width: 940px) {
    .mil-lp__hero-grid { grid-template-columns: 1fr; }
}

.mil-lp__eyebrow {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--lp-rot);
    margin: 0 0 .75rem;
}

.mil-lp__hero-text h1 {
    font-size: clamp(1.9rem, 4.2vw, 3rem);
    line-height: 1.15;
    letter-spacing: -1px;
    margin: 0 0 1rem;
}

.mil-lp__hero-text .text-gradient {
    background: linear-gradient(135deg, var(--lp-rot) 0%, var(--lp-rot-dunkel) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mil-lp__subline {
    font-size: 1.1rem;
    color: var(--lp-grau);
    line-height: 1.6;
    margin: 0 0 1rem;
}

.mil-lp__angle {
    font-size: 1rem;
    line-height: 1.65;
    padding-left: 1rem;
    border-left: 3px solid var(--lp-rot);
    margin: 0 0 1.5rem;
}

.mil-lp__usps {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: grid;
    gap: .6rem;
}

.mil-lp__usps li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-weight: 600;
}

.mil-lp__usps i {
    color: var(--lp-rot);
    margin-top: .25rem;
    flex-shrink: 0;
}

.mil-lp__districts {
    font-size: .92rem;
    color: var(--lp-grau);
    margin: 0;
}

/* ── Formularkarte ───────────────────────────────────────────────────────── */

.mil-lp__form-card {
    background: var(--lp-flaeche);
    border: 1px solid var(--lp-linie);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-schatten);
    padding: clamp(1.25rem, 3vw, 2rem);
    position: sticky;
    top: 5.5rem;
}

@media (max-width: 940px) {
    .mil-lp__form-card { position: static; }
}

.mil-lp__funnel-head h2 {
    font-size: 1.3rem;
    margin: 0 0 .9rem;
}

.mil-lp__progress {
    height: 6px;
    background: var(--lp-hinter);
    border-radius: 999px;
    overflow: hidden;
}

.mil-lp__progress-bar {
    display: block;
    height: 100%;
    width: 33%;
    background: linear-gradient(90deg, var(--lp-rot) 0%, var(--lp-rot-dunkel) 100%);
    border-radius: 999px;
    transition: width .3s ease;
}

.mil-lp__progress-text {
    font-size: .82rem;
    color: var(--lp-grau);
    margin: .5rem 0 1.25rem;
}

/* Ausgeblendete Elemente bleiben ausgeblendet.

   Der Browser blendet [hidden] normalerweise selbst aus. Sobald aber eine
   eigene Regel display setzt – wie .mil-lp__step unten mit display:grid –
   gewinnt diese gegen die Standardregel des Browsers, und das Element bleibt
   trotz hidden sichtbar.

   Genau das war beim Funnel der Fall: das Skript setzte schritt.hidden
   korrekt, es standen aber trotzdem alle drei Schritte gleichzeitig auf der
   Seite – mit mehreren "Weiter"-Schaltflächen untereinander. Besucher sahen
   sofort das komplette Formular statt der gedachten drei kurzen Schritte.

   Die Regel steht bewusst am Anfang und gilt für alle Elemente der
   Landingpage, damit derselbe Fehler nicht bei Erfolgsmeldung oder
   Rückmeldung erneut auftritt. */
[hidden] {
    display: none !important;
}

.mil-lp__step {
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .35rem;
}

.mil-lp__step legend {
    font-size: 1rem;
    font-weight: 700;
    padding: 0;
    margin-bottom: .75rem;
}

.mil-lp__label {
    font-size: .85rem;
    font-weight: 600;
    margin-top: .6rem;
}

.mil-lp__label span { color: var(--lp-rot); }

.mil-lp__input {
    width: 100%;
    padding: .8rem .9rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--lp-text);
    background: var(--lp-flaeche);
    border: 1.5px solid var(--lp-linie);
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s;
}

.mil-lp__input:focus {
    outline: none;
    border-color: var(--lp-rot);
    box-shadow: 0 0 0 3px rgba(230, 0, 0, .12);
}

.mil-lp__input--fehler {
    border-color: var(--lp-rot);
    background: rgba(230, 0, 0, .04);
}

.mil-lp__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

@media (max-width: 480px) {
    .mil-lp__row { grid-template-columns: 1fr; }
}

.mil-lp__checkbox {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--lp-grau);
    margin-top: 1rem;
}

.mil-lp__checkbox input {
    margin-top: .2rem;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--lp-rot);
    flex-shrink: 0;
}

.mil-lp__checkbox a { color: var(--lp-rot); }

.mil-lp__actions {
    display: flex;
    gap: .6rem;
    margin-top: 1.1rem;
}

.mil-lp__btn {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    padding: .9rem 1.4rem;
    border-radius: 10px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background .15s, transform .12s, border-color .15s;
}

.mil-lp__btn:focus-visible {
    outline: 3px solid rgba(230, 0, 0, .35);
    outline-offset: 2px;
}

.mil-lp__btn--primary {
    background: var(--lp-rot);
    color: #fff;
    flex: 1;
    margin-top: 1.1rem;
}

.mil-lp__actions .mil-lp__btn--primary { margin-top: 0; }

.mil-lp__btn--primary:hover:not(:disabled) {
    background: var(--lp-rot-dunkel);
    transform: translateY(-1px);
}

.mil-lp__btn--primary:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

.mil-lp__btn--ghost {
    background: transparent;
    color: var(--lp-grau);
    border-color: var(--lp-linie);
}

.mil-lp__btn--ghost:hover { border-color: var(--lp-grau); color: var(--lp-text); }

.mil-lp__hint {
    font-size: .8rem;
    color: var(--lp-grau);
    margin: .9rem 0 0;
    text-align: center;
}

.mil-lp__feedback {
    margin-top: 1rem;
    padding: .8rem 1rem;
    border-radius: 10px;
    font-size: .9rem;
}

.mil-lp__feedback--info   { background: #eef2ff; color: #3730a3; }
.mil-lp__feedback--fehler { background: #fee2e2; color: #991b1b; }

.mil-lp__erfolg {
    text-align: center;
    padding: 1rem 0;
}

.mil-lp__erfolg h2 {
    font-size: 1.4rem;
    margin: 0 0 .6rem;
    color: #047857;
}

/* ── Ablauf ──────────────────────────────────────────────────────────────── */

.mil-lp__steps { background: var(--lp-flaeche); padding: clamp(2rem, 5vw, 4rem) 0; }

.mil-lp__steps h2,
.mil-lp__faq h2,
.mil-lp__neighbours h2 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    letter-spacing: -.5px;
    margin: 0 0 1.75rem;
}

.mil-lp__steps-list {
    list-style: none;
    counter-reset: schritt;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.mil-lp__steps-list h3 { font-size: 1.05rem; margin: .75rem 0 .4rem; }
.mil-lp__steps-list p  { color: var(--lp-grau); line-height: 1.6; margin: 0; }

.mil-lp__step-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: var(--lp-rot);
    color: #fff;
    font-weight: 800;
}

/* ── Fragen und Antworten ────────────────────────────────────────────────── */

.mil-lp__faq { padding: clamp(2rem, 5vw, 4rem) 0; }

.mil-lp__faq-list { display: grid; gap: .7rem; }

.mil-lp__faq-list details {
    background: var(--lp-flaeche);
    border: 1px solid var(--lp-linie);
    border-radius: 10px;
    padding: 1rem 1.15rem;
}

.mil-lp__faq-list summary {
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.mil-lp__faq-list summary::-webkit-details-marker { display: none; }

.mil-lp__faq-list summary::after {
    content: '+';
    float: right;
    color: var(--lp-rot);
    font-size: 1.3rem;
    line-height: 1;
}

.mil-lp__faq-list details[open] summary::after { content: '–'; }

.mil-lp__faq-list p {
    margin: .75rem 0 0;
    color: var(--lp-grau);
    line-height: 1.65;
}

/* ── Nachbarstandorte ────────────────────────────────────────────────────── */

.mil-lp__neighbours {
    background: var(--lp-flaeche);
    border-top: 1px solid var(--lp-linie);
    padding: clamp(2rem, 5vw, 3.5rem) 0;
}

.mil-lp__neighbour-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.mil-lp__neighbour-list a {
    display: inline-block;
    padding: .55rem 1rem;
    border: 1.5px solid var(--lp-linie);
    border-radius: 999px;
    color: var(--lp-text);
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
    transition: border-color .15s, color .15s;
}

.mil-lp__neighbour-list a:hover { border-color: var(--lp-rot); color: var(--lp-rot); }

/* ── Fusszeile ───────────────────────────────────────────────────────────── */

.mil-lp__footer {
    background: #111;
    color: #d4d4d8;
    padding: clamp(2rem, 4vw, 3rem) 0;
    text-align: center;
}

.mil-lp__footer-claim { max-width: 640px; margin: 0 auto 1.25rem; line-height: 1.65; }

.mil-lp__footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.mil-lp__footer-links a {
    color: #d4d4d8;
    text-decoration: none;
    font-size: .92rem;
}

.mil-lp__footer-links a:hover { color: #fff; text-decoration: underline; }

.mil-lp__footer-copy { font-size: .85rem; color: #71717a; margin: 0; }

/* ── Bewegung reduzieren ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .mil-lp *,
    .mil-lp *::before,
    .mil-lp *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}