/* =====================================================================
   BitPoint Hosting – bestellen.css
   ---------------------------------------------------------------------
   Stile fuer die Bestellseite (bestellen.php). Ergaenzt style.css und
   nutzt dessen Design-Tokens (:root). Die Formular-Grundstile aus
   style.css sind auf #kontakt gescoped und greifen hier nicht – deshalb
   spiegeln wir den gleichen Look scoped auf .bestell-page.

   INHALT
     1. Seite / Layout
     2. Schlanker Header + Footer
     3. Karten + Schrittkoepfe
     4. Formular-Primitive (Inputs/Selects, Fokus, Fehler, Helper, Check)
     5. Auswahl-Kacheln (.opt) fuer Paket / Domain-Status / SSL / Zahlung
     6. Zusammenfassung (sticky)
     7. Responsive
   ===================================================================== */

/* ============ 1. SEITE / LAYOUT ============ */
.bestell-page {
    padding-top: var(--header-height);
    min-height: 100vh;
    background: var(--section-bg);
    color: var(--section-text);
}
.bestell-wrap {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}
.bestell-intro { margin-bottom: 1.75rem; }
.bestell-intro h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--section-text);
}
.bestell-intro h1 span { color: var(--accent); }
.bestell-intro p {
    margin-top: 0.5rem;
    color: var(--text-muted-light);
    font-size: 0.98rem;
}
.bestell-intro .required { color: var(--red); }

.bestell-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.75rem;
    align-items: start;
}

/* ============ 2. HEADER-ZUSATZ + FOOTER ============ */
.bestell-back {
    color: var(--text-subtle);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--t-base);
}
.bestell-back:hover { color: var(--text-main); }

.bestell-footer {
    background: var(--bg-darker);
    color: var(--text-muted);
    padding: 1.5rem 0;
    text-align: center;
    font-size: 0.9rem;
}
.bestell-footer a { color: var(--text-subtle); text-decoration: none; }
.bestell-footer a:hover { color: var(--accent); }

/* ============ 3. KARTEN + SCHRITTKOEPFE ============ */
.bestell-card {
    background: var(--section-bg-alt);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 1.5rem 1.6rem;
    margin-bottom: 1.5rem;
}
.step-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    flex-shrink: 0;
}
.step-head h2 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--section-text);
}
.step-head h2 .required { color: var(--red); margin-left: 2px; }

/* ============ 4. FORMULAR-PRIMITIVE (Look wie #kontakt) ============ */
.bestell-page .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.bestell-page .form-row-strasse { grid-template-columns: 3fr 1fr; }
.bestell-page .form-row-plz      { grid-template-columns: 1fr 2fr; }
.bestell-page .form-group {
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
}
.bestell-page .form-group:last-child { margin-bottom: 0; }
.bestell-page .form-row .form-group { margin-bottom: 0; }
.bestell-page .form-group label,
.bestell-page .group-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--section-text);
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}
.bestell-page .required { color: var(--red); margin-left: 2px; }

.bestell-page .form-group input,
.bestell-page .form-group select {
    width: 100%;
    padding: 0.75rem 0.9rem;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--section-text);
    background: var(--section-bg-alt);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    transition: all var(--t-base);
    appearance: none;
    -webkit-appearance: none;
}
.bestell-page .form-group input::placeholder { color: var(--text-muted-light); }
.bestell-page .form-group input:hover,
.bestell-page .form-group select:hover { border-color: var(--login-border); }
.bestell-page .form-group input:focus,
.bestell-page .form-group select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.bestell-page .form-group select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='none' stroke='%232196f3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px 8px;
    padding-right: 2.5rem;
    cursor: pointer;
}
.bestell-page .helper {
    font-size: 0.8rem;
    color: var(--text-muted-light);
    margin-top: 0.4rem;
}
.bestell-page .helper code,
.bestell-page .domain-hinweis code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82em;
    background: var(--section-bg);
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
}

/* Fehler-Markierung (Klasse .feld-fehler, gesetzt von bestellen.js) */
.bestell-page .form-group input.feld-fehler,
.bestell-page .form-group select.feld-fehler,
.bestell-page .form-group input.feld-fehler:focus,
.bestell-page .form-group select.feld-fehler:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px var(--red-glow);
}
.bestell-page .form-check input[type="checkbox"].feld-fehler {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}
/* Auswahlgruppen im Fehlerfall dezent rahmen */
.bestell-page .opt-grid.feld-fehler {
    outline: 2px solid var(--red);
    outline-offset: 4px;
    border-radius: var(--radius-md);
}

/* Checkbox-Zeile */
.bestell-page .form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.88rem;
    color: var(--text-muted-light);
    line-height: 1.5;
}
.bestell-page .form-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}
.bestell-page .form-check a { color: var(--accent); text-decoration: none; font-weight: 500; }
.bestell-page .form-check a:hover { text-decoration: underline; }

/* Einleitender Erklaertext direkt unter einem Schritt-Titel
   (z. B. warum das Hosting eine Domain braucht). */
.bestell-page .step-intro {
    margin: -0.3rem 0 1.2rem;
    font-size: 0.9rem;
    color: var(--text-muted-light);
    line-height: 1.5;
}

/* Kontexthinweis zur gewaehlten Domain-Option.
   Bewusst KEIN Bernstein (kein Achtung-Zustand), aber im Akzentblau
   mit Balken links, damit er nicht ueberlesen wird. Der groessere
   Abstand nach unten trennt ihn klar vom AuthCode-Feld. */
.domain-status-hinweis {
    margin: 0.9rem 0 1.4rem;
    font-size: 0.9rem;
    padding: 0.8rem 1rem;
    border-radius: var(--radius-md);
    background: rgba(33,150,243,0.08);
    color: var(--section-text);
    border: 1px solid var(--accent-soft);
    border-left: 4px solid var(--accent);
    line-height: 1.5;
}

.domain-hinweis, .pay-hinweis {
    margin-top: 0.9rem;
    font-size: 0.85rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-md);
    background: var(--color-warn-bg);
    color: var(--color-warn);
    border: 1px solid rgba(239,108,0,0.35);
    line-height: 1.45;
}
.domain-hinweis a, .pay-hinweis a { color: inherit; font-weight: 600; }

/* Inline-Ergebnis der Live-Verfügbarkeitsprüfung (nur bei Neuregistrierung).
   Zustände: pruefe / available / taken / warn (Ratelimit oder Fehler). */
.dc-inline {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    padding: 0.55rem 0.8rem;
    border-radius: var(--radius-md);
    line-height: 1.4;
    border: 1px solid transparent;
}
.dc-inline.pruefe    { background: var(--section-bg); color: var(--text-muted-light); }
.dc-inline.available { background: var(--color-success-bg); color: var(--color-success); border-color: rgba(46,125,50,0.35); }
.dc-inline.taken     { background: var(--color-error-bg);   color: var(--color-error);   border-color: rgba(198,40,40,0.35); }
.dc-inline.warn      { background: var(--color-warn-bg);    color: var(--color-warn);     border-color: rgba(239,108,0,0.35); }

/* Vorschlag bei vermutetem Tippfehler in der E-Mail-Domain.
   Sieht aus wie ein Link, ist aber ein <button> – ein Link mit href="#"
   wuerde beim Klick nach oben springen. Deshalb muessen die
   Knopf-Vorgaben des Browsers hier zurueckgesetzt werden. */
.email-vorschlag {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.email-vorschlag:hover,
.email-vorschlag:focus-visible {
    text-decoration: none;
}

/* ============ 5. AUSWAHL-KACHELN (.opt) ============ */
.opt-grid { display: grid; gap: 0.85rem; }
.opt-grid-2 { grid-template-columns: 1fr 1fr; }
.opt-grid-3 { grid-template-columns: repeat(3, 1fr); }
.group-label { display: block; }

.opt { position: relative; display: block; cursor: pointer; }
/* Native Radios versteckt, aber fokussierbar */
.opt input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}
.opt-inner {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    height: 100%;
    padding: 1rem 1rem;
    background: var(--section-bg-alt);
    border: 2px solid var(--input-border);
    border-radius: var(--radius-md);
    transition: all var(--t-base);
}
.opt:hover .opt-inner { border-color: var(--login-border); }
.opt input:focus-visible + .opt-inner {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.opt input:checked + .opt-inner {
    border-color: var(--accent);
    background: var(--login-hover);
}
.opt-title { font-weight: 600; font-size: 0.98rem; color: var(--section-text); }
.opt-price { font-size: 0.92rem; font-weight: 600; color: var(--accent); }
.opt-price small { font-weight: 400; color: var(--text-muted-light); }
.opt-meta { font-size: 0.8rem; color: var(--text-muted-light); line-height: 1.4; }
.opt-grid-compact .opt-inner { padding: 0.85rem 0.9rem; }

/* --- Paketkachel mit ausklappbaren Angebotsdetails ---
   Basis (und Mobile-Ansicht): jede Kachel ist eine eigene Spalte aus
   Label, Button und Detailliste. */
.paket-kachel { display: flex; flex-direction: column; }
.paket-kachel .opt { flex: 1; }

/* Mehrspaltige Ansicht: Label, Button und Detailliste werden zu drei
   ECHTEN Grid-Zeilen ueber alle drei Pakete hinweg.

   Warum: Die Kacheln stehen in einer Grid-Zeile und werden auf gleiche
   Hoehe gestreckt. Mit der Flex-Variante schluckt das Label (flex:1) die
   Resthoehe – und die faellt je Paket unterschiedlich aus, weil die
   Detaillisten verschieden hoch sind (z.B. bricht "phpMyAdmin und 10
   MySQL-Datenbanken" um, "... 1 MySQL-Datenbank" nicht). Folge: bei den
   kuerzeren Listen entsteht Leerraum im Label, Button und Detailbox
   rutschen nach unten und die Trennlinien stehen versetzt.

   Mit fester Zeilenzuordnung liegen Labels, Buttons und Detailboxen
   immer auf gleicher Hoehe – unabhaengig von der Textlaenge. */
@media (min-width: 769px) {
    .opt-grid-pakete {
        grid-template-rows: auto auto auto;
        row-gap: 0.45rem;
    }
    /* Wrapper aufloesen: seine Kinder werden direkt zu Grid-Elementen */
    .opt-grid-pakete .paket-kachel { display: contents; }

    .opt-grid-pakete .paket-kachel > .opt             { grid-row: 1; }
    .opt-grid-pakete .paket-kachel > .opt-details-btn { grid-row: 2; margin-top: 0; }
    .opt-grid-pakete .paket-kachel > .opt-details     { grid-row: 3; margin-top: 0; }

    /* Spaltenzuordnung, da die Kinder sonst zeilenweise einsortiert wuerden */
    .opt-grid-pakete .paket-kachel:nth-child(1) > * { grid-column: 1; }
    .opt-grid-pakete .paket-kachel:nth-child(2) > * { grid-column: 2; }
    .opt-grid-pakete .paket-kachel:nth-child(3) > * { grid-column: 3; }
}

.opt-details-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    margin-top: 0.45rem;
    padding: 0.5rem 0.6rem;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--t-base);
}
.opt-details-btn:hover { background: var(--login-hover); border-color: var(--accent); }
.opt-details-btn:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.dt-pfeil { transition: transform var(--t-base); font-size: 0.9em; }
.opt-details-btn.offen .dt-pfeil { transform: rotate(180deg); }

.opt-details {
    margin-top: 0.45rem;
    padding: 0.8rem 0.95rem;
    background: var(--section-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
}
.opt-details ul { list-style: none; margin: 0; padding: 0; }
.opt-details li {
    position: relative;
    padding: 0.22rem 0 0.22rem 1.1rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-muted-light);
}
/* Häkchen als CSS-Pseudoelement – kein zusätzliches Markup nötig */
.opt-details li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-success);
    font-weight: 700;
}

/* WICHTIG: Das hidden-Attribut muss zuverlässig ausblenden – auch bei
   Elementen, die sonst display:flex/grid bekommen (z. B. .form-group oder
   die Summenzeile <li>). Ohne diese Regel überschreiben die Author-Styles
   (display:flex) die UA-Regel [hidden]{display:none}, wodurch etwa die
   Postrechnungs-Zeile oder das Telefon-/AuthCode-Feld trotz gesetztem
   hidden-Attribut sichtbar blieben. */
[hidden] { display: none !important; }

/* ============ 6. ZUSAMMENFASSUNG (sticky) ============ */
.bestell-summary { position: sticky; top: calc(var(--header-height) + 1.5rem); }
.summary-inner {
    background: var(--section-bg-alt);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 1.4rem 1.5rem;
}
.summary-inner h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--section-text);
}
.summary-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.summary-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px dashed var(--border-light);
    font-size: 0.9rem;
}
.summary-list .s-label { color: var(--text-muted-light); }
.summary-list .s-val { font-weight: 600; color: var(--section-text); text-align: right; }
.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.5rem 0 1.1rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--section-text);
}
.summary-total small { font-size: 0.75rem; font-weight: 400; color: var(--text-muted-light); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--t-base);
}
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.summary-btn { width: 100%; }
.summary-note {
    margin-top: 0.85rem;
    font-size: 0.78rem;
    color: var(--text-muted-light);
    line-height: 1.4;
}

/* ============ 7. RESPONSIVE ============ */
@media (max-width: 1170px) {
    .bestell-layout { grid-template-columns: 1fr; }
    .bestell-summary { position: static; order: 2; }
}
@media (max-width: 768px) {
    .bestell-wrap { padding: 1.75rem 1rem 3rem; }
    .bestell-intro h1 { font-size: 1.6rem; }
    .bestell-card { padding: 1.25rem 1.1rem; }
    .opt-grid-3, .opt-grid-2 { grid-template-columns: 1fr; }
    .bestell-page .form-row,
    .bestell-page .form-row-strasse,
    .bestell-page .form-row-plz { grid-template-columns: 1fr; gap: 0; }
    .bestell-page .form-row .form-group { margin-bottom: 1.25rem; }
    .bestell-back span { display: none; }
}

/* Fehlerliste innerhalb des Hinweisblocks (serverseitige Validierung) */
.hinweis-fehlerliste {
    margin: 0.6rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.86rem;
    line-height: 1.5;
}
.hinweis-fehlerliste li { margin-top: 0.2rem; }