/* termin/css/webentwicklung.css
 *
 * Stile des eigenständigen Anfrage-Flows Webentwicklung:
 *   anfrage/webentwicklung.php          Formular
 *   anfrage/webentwicklung_process.php  Meldungsseiten
 *   anfrage/webentwicklung_success.php  Bestätigung
 *
 * Wird nach styles.css und booking.css geladen und korrigiert an einigen
 * Stellen deren globale Vorgaben — die betreffenden Regeln sind kommentiert.
 */

/* ------------------------------------------------ Seitenraster (alle Seiten) */

.flow-main {
    margin-top: 56px;
}

.flow-stage {
    min-height: calc(100vh - 56px);
}

.flow-copy {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

/* Spamschutz-Feld: für Menschen und Screenreader unsichtbar */
.honeypot {
    position: absolute;
    left: -9999px;
    top: 0;
    height: 0;
    overflow: hidden;
}

/* ------------------------------------------------------------- Formular */

/* Akzentfarbe: --color-secondary statt --color-primary.
   #0a95b3 erreicht auf Weiß nur 3,5:1 und genügt damit nicht für Text (4,5:1).
   #1F7487 ist eine bestehende Marken­farbe und erreicht 5,4:1. */
.web-inquiry {
    --web-accent: var(--color-secondary);
    --web-accent-dark: var(--color-tertiary);
}

/* booking.css zentriert jede .card-body (text-align: center) und lässt ihre
   Kinder über align-items: center auf Inhaltsbreite schrumpfen. Dadurch
   waren die Beschriftungen zentriert und die Spaltenbreite änderte sich mit
   dem Inhalt. Überschriften und Schaltflächen bringen ihre eigene
   Zentrierung mit, hier wird also nur der Grundzustand gerade gerückt. */
.web-inquiry .card-body {
    align-items: stretch;
    text-align: left;
}

/* Platz für die Bildlaufleiste dauerhaft reservieren. Sonst verschiebt
   sich die gesamte Seite seitlich, sobald ein Schritt länger oder kürzer
   wird und die Leiste erscheint oder verschwindet. */
html {
    scrollbar-gutter: stable;
}

.wizard-step {
    display: none;
}

.wizard-step.active {
    display: block;
    animation: wizardFade 0.35s ease-out;
}

@keyframes wizardFade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .wizard-step.active,
    .choice-card,
    .progress-fill {
        animation: none !important;
        transition: none !important;
    }
}

/* Muss über den display-Regeln unten stehen, sonst hebeln .q-error{display:flex}
   und Co. das hidden-Attribut aus. */
.web-inquiry [hidden] {
    display: none !important;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Fortschritt */
.progress-indicator {
    text-align: center;
    margin-bottom: 26px;
    color: #5b6668;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.progress-indicator strong {
    color: var(--web-accent);
    font-weight: 700;
}

.progress-track {
    max-width: 420px;
    height: 6px;
    margin: 12px auto 0;
    background: #e3e7e8;
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0;
    background: var(--web-accent);
    transition: width 0.3s ease;
}

/* Schrittkopf — zentriert wie in den bestehenden Flows */
.step-badge {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--web-accent);
    margin-bottom: 6px;
}

.step-heading {
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 30px;
}

.step-heading:focus {
    outline: none;
}

.step-heading:focus-visible {
    outline: 3px solid var(--web-accent);
    outline-offset: 4px;
}

/* Ein Schritt zeigt genau eine Frage. Die Frage ist die Überschrift,
   darunter die Antwortmöglichkeiten in ruhiger Spaltenbreite. */
.q-canvas {
    max-width: 620px;
    margin: 0 auto;
}

/* Schriftart und Versalien kommen aus der h2-Regel in styles.css —
   dieselbe Darstellung wie die Fragen in den bestehenden Flows.
   Kein font-weight setzen: von Oswald ist nur der Regular-Schnitt geladen. */
.step-question {
    font-size: 1.5rem;
    line-height: 1.3;
    text-align: center;
    color: var(--color-text-dark);
    margin: 0 0 6px 0;
}

.step-question:focus {
    outline: none;
}

.step-question:focus-visible {
    outline: 3px solid var(--web-accent);
    outline-offset: 4px;
}

/* legend zurücksetzen — Bootstrap gibt ihr Breite und Float */
.q-legend {
    display: block;
    float: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

.q-block.is-step .q-help,
.q-block.is-step .q-error {
    text-align: center;
    justify-content: center;
}

/* Der Abstand zu den Antworten hängt am Bedienelement, nicht an der
   Überschrift — sonst rückt alles zusammen, sobald eine Frage keine
   Unterzeile hat. */
.q-block.is-step .q-help {
    margin-bottom: 0;
}

.q-block.is-step>.choice-grid,
.q-block.is-step>input:first-of-type,
.q-block.is-step>textarea:first-of-type {
    margin-top: 34px;
}

/* Kachel für mehrere kurze Felder auf einem Schritt (Kontaktdaten) */
.q-group {
    background: #f9f9f9;
    border-radius: 4px;
    padding: 26px 28px;
    margin-bottom: 22px;
}

/* Fragenblock */
.q-block {
    border: 0;
    padding: 0;
    margin: 0;
}

/* mehrere Felder in einer gemeinsamen Kachel (Kontaktdaten) */
.q-block+.q-block {
    margin-top: 26px;
}

.q-label {
    display: block;
    float: none;
    width: auto;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 6px;
    line-height: 1.35;
}

.q-optional {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border: 1px solid #c9d1d3;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #5b6668;
    vertical-align: 2px;
}

.q-help {
    font-size: 0.92rem;
    color: #5b6668;
    margin-bottom: 14px;
}

.q-error {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #a4272b;
    margin-bottom: 12px;
}

.q-error-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Einfachauswahl als Karten */
.choice-grid {
    display: grid;
    gap: 12px;
}

.choice-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* bleibt fokussierbar — kein display:none */
.choice-card {
    display: block;
    padding: 16px 20px;
    border: 2px solid #e4e8e9;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 1.02rem;
    line-height: 1.4;
    color: var(--color-text-dark);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.choice-card:hover {
    border-color: #b4c0c3;
}

/* Zweizeilige Option: hervorgehobener Kopf, darunter die Erläuterung */
.ans-head {
    display: block;
    font-weight: 700;
    margin-bottom: 4px;
}

.ans-meta {
    display: block;
    font-weight: 400;
    font-size: 0.94rem;
    line-height: 1.4;
    color: #5b6668;
}

/* Kein font-weight im ausgewählten Zustand: fetterer Text braucht mehr
   Platz, bricht um und ändert die Höhe der Karte. Der Bestand markiert
   die Auswahl ebenfalls nur über Rahmen, Fläche und Farbe. */
.choice-input:checked+.choice-card {
    border-color: var(--web-accent);
    background-color: #eef6f8;
    color: var(--web-accent-dark);
}

.choice-input:focus-visible+.choice-card {
    outline: 3px solid var(--web-accent);
    outline-offset: 2px;
}

/* Mehrfachauswahl: dieselben Karten, zusätzlich ein Häkchen-Kästchen.
   Der Bestand kennt dafür nur eine schlichte Checkbox-Liste — die Karte
   hält den Flow optisch einheitlich, das Kästchen macht den Unterschied
   zur Einfachauswahl sichtbar. */
.multi-hint {
    text-align: center;
    font-size: 0.9rem;
    color: #5b6668;
    margin: 8px 0 0 0;
}

.choice-card.is-multi {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
}

.choice-mark {
    position: relative;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    /* 3,1:1 gegen Weiß — als Zustandsanzeige braucht das Kästchen den Kontrast */
    border: 2px solid #8a9497;
    background: #fff;
    transition: background-color 0.15s, border-color 0.15s;
}

.choice-input:checked+.choice-card .choice-mark {
    background: var(--web-accent);
    border-color: var(--web-accent);
}

.choice-input:checked+.choice-card .choice-mark::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.choice-text {
    flex: 1;
}

/* Bedingte Zusatzfrage — sitzt direkt unter der Antwort, die sie
   ausgelöst hat. In der Optionsliste sorgt deren gap für den Abstand. */
.cond-block {
    margin-top: 26px;
    padding: 20px 22px;
    background: #f9f9f9;
    border: 1px solid #e9edee;
}

.choice-grid .cond-block {
    margin-top: 0;
    margin-left: 22px;
}

.cond-block .q-label {
    font-size: 1.02rem;
}

/* Eingabefelder im Stil der übrigen Flows.
   Der Innenabstand gilt nur für Felder ohne schwebende Beschriftung: Bootstrap
   steuert bei .form-floating den Abstand zustandsabhängig, um oben Platz für das
   verkleinerte Label zu schaffen. Eine pauschale padding-Regel hätte dieselbe
   Spezifität, käme später — und das Label würde die Eingabe verdecken. */
.web-inquiry .form-control {
    border-radius: 0;
    font-size: 1rem;
}

.web-inquiry .q-block>.form-control {
    padding: 12px 14px;
}

.web-inquiry .form-control:focus {
    border-color: var(--web-accent);
    box-shadow: 0 0 0 0.25rem rgba(31, 116, 135, 0.25);
}

.q-block[data-invalid="1"] .form-control {
    border-color: #a4272b;
}

/* Kontaktfelder mit schwebender Beschriftung — wie details.php der übrigen
   Flows. Höhe, Innenabstände und die Bewegung des Labels kommen vollständig
   von Bootstrap und werden hier bewusst nicht angetastet. */
.web-inquiry .form-floating>label {
    padding-left: 12px;
    font-weight: 400;
    color: var(--color-text);
}

.label-optional {
    color: #7c8a8d;
}

/* Schaltflächen */
.web-inquiry .btn-primary {
    background-color: var(--web-accent) !important;
    border-color: var(--web-accent) !important;
}

.web-inquiry .btn-primary:hover,
.web-inquiry .btn-primary:focus,
.web-inquiry .btn-primary:active {
    background-color: var(--web-accent-dark) !important;
    border-color: var(--web-accent-dark) !important;
}

.web-inquiry .btn:focus-visible {
    outline: 3px solid var(--web-accent-dark);
    outline-offset: 3px;
}

.wizard-actions {
    margin-top: 42px;
    text-align: center;
}

.wizard-actions .btn-primary {
    min-width: 200px;
}

/* Optik des «-Zurück-Links aus den bestehenden Flows, technisch aber ein
   echter Button (tastaturbedienbar, mit Fokusring).
   booking.css setzt für jedes button-Element eine Regel mit sechs
   :not()-Bedingungen — Spezifität 0,6,1. Dagegen hilft nur !important. */
.web-inquiry .step-back {
    display: inline-block;
    margin-top: 18px;
    background: none !important;
    border: 0 !important;
    padding: 6px 10px !important;
    font-family: inherit !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #6c757d !important;
    text-decoration: none !important;
    cursor: pointer;
}

.web-inquiry .step-back:hover {
    color: var(--web-accent-dark) !important;
    text-decoration: underline !important;
}

.web-inquiry .step-back:focus-visible {
    outline: 3px solid var(--web-accent);
    outline-offset: 2px;
}

.privacy-note {
    margin-top: 22px;
    font-size: 0.88rem;
    color: #5b6668;
    line-height: 1.5;
}

.lead-note {
    text-align: center;
    font-size: 0.98rem;
    color: var(--color-text-dark);
    margin-bottom: 24px;
}

@media (max-width: 575.98px) {
    .step-heading {
        font-size: 1.35rem;
    }

    .step-question {
        font-size: 1.25rem;
    }

    /* Beschriftungen kleiner, damit sie einzeilig bleiben —
       „Unternehmen / Organisation" bricht sonst um. */
    .q-label {
        font-size: 1rem;
    }

    .q-block+.q-block {
        margin-top: 20px;
    }

    .q-group {
        padding: 20px 18px;
    }

    .cond-block {
        padding: 16px;
    }

    .choice-card {
        padding: 14px 16px;
    }

    .wizard-actions .btn-primary {
        width: 100%;
        min-width: 0;
    }
}

/* --------------------------------------------------- Bestätigungsseite */

.success-icon {
    width: 76px;
    height: 76px;
    color: var(--color-secondary);
}

.success-card a {
    color: var(--color-secondary);
}