/*
 * Ergänzungen für die Plattformseiten (Hauptseite, Preise, Bestellung).
 * Baut auf base.css auf und überschreibt nur, was dort nicht hingehört.
 */

.platform {
    --brand: #c1121f;
    --accent: #c9a227;
}

.eyebrow {
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 13px;
    margin: 0 0 14px;
}

.cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.button.ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}

.button.ghost:hover {
    border-color: var(--accent);
    filter: none;
}

.small {
    font-size: 14px;
}

.notice.wide {
    max-width: none;
}

/* ------------------------------------------------------------------ */
/* Preise                                                              */
/* ------------------------------------------------------------------ */

.cards.pricing {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
}

.plan {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Der Paketname ist eine h2 - die Optik soll das nicht mitmachen. */
.plan h2 {
    font-family: var(--font-display);
    font-size: 19px;
    margin: 0;
}

.plan.featured {
    border-color: color-mix(in srgb, var(--brand) 60%, var(--border));
    box-shadow: var(--shadow);
}

.plan .tag {
    color: var(--accent);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}

.plan .price {
    font-family: var(--font-display);
    font-size: 34px;
    color: var(--text);
    margin: 0;
}

.plan .price small {
    display: block;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--muted);
}

.features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    font-size: 15px;
    color: var(--muted);
}

.features li {
    padding-left: 20px;
    position: relative;
}

.features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--accent);
}

/* ------------------------------------------------------------------ */
/* Bestellformular                                                     */
/* ------------------------------------------------------------------ */

.form.wide {
    max-width: 760px;
    gap: 26px;
}

.form fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    margin: 0;
    display: grid;
    gap: 14px;
    background: var(--surface);
}

.form legend {
    font-family: var(--font-display);
    padding-inline: 8px;
    color: var(--text);
}

.hint {
    font-size: 14px;
    color: var(--muted);
}

.slug-field {
    display: flex;
    align-items: stretch;
}

.slug-field input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.slug-suffix {
    display: flex;
    align-items: center;
    padding-inline: 13px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 0;
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    color: var(--muted);
    white-space: nowrap;
    font-size: 15px;
}

.plan-choice {
    display: grid;
    gap: 10px;
}

.plan-option {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    background: var(--surface-2);
    cursor: pointer;
    color: var(--text);
}

.plan-option:has(input:checked) {
    border-color: var(--brand);
    box-shadow: inset 0 0 0 1px var(--brand);
}

.plan-option input {
    width: auto;
}

.plan-option strong {
    display: block;
    font-family: var(--font-display);
}

.summary {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
    background: var(--surface-2);
}

.summary h2 {
    font-family: var(--font-display);
    font-size: 19px;
    margin: 0 0 12px;
}

.summary dl {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 20px;
    font-size: 15px;
}

.summary dt {
    color: var(--muted);
}

.summary dd {
    margin: 0;
}

.check {
    display: flex !important;
    align-items: start;
    gap: 10px;
    color: var(--text) !important;
    font-size: 15px !important;
}

.check input {
    width: auto;
    margin-top: 4px;
}

@media (max-width: 560px) {
    .slug-field {
        flex-direction: column;
    }

    .slug-field input {
        border-radius: var(--radius);
    }

    .slug-suffix {
        border-left: 1px solid var(--border);
        border-radius: var(--radius);
        margin-top: 6px;
    }

    .summary dl {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------ */
/* Pflichtseiten                                                       */
/* ------------------------------------------------------------------ */

/*
 * Der Warnkasten soll sich vom Rest der Seite abheben und nicht mit einem
 * freundlichen Hinweis verwechselt werden: kraeftiger Rahmen, eigener
 * Untergrund, breite Kante links. Wer die Seite ueberfliegt, soll ihn
 * nicht uebersehen koennen.
 */
.legal-warning {
    border: 2px solid #ff8d8d;
    border-left-width: 8px;
    border-radius: var(--radius);
    background: color-mix(in srgb, #ff8d8d 10%, var(--surface));
    padding: 18px 22px;
    margin-bottom: 32px;
}

.legal-warning p {
    margin: 0 0 10px;
    font-size: 16px;
}

.legal-warning p:last-child {
    margin-bottom: 0;
}

/*
 * Platzhalter muessen als solche ins Auge springen - sonst liest jemand
 * "[Firmenname]" ueber und haelt die Seite fuer fertig.
 */
.ph {
    display: inline-block;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.92em;
    background: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
    border: 1px dashed color-mix(in srgb, var(--accent) 65%, var(--border));
    border-radius: 6px;
    padding: 1px 7px;
    color: var(--text);
}

/* Beschriftung links, Angabe rechts - und auf schmalen Geraeten
   untereinander, weil zweispaltig bei 360px nichts mehr lesbar ist. */
.fields,
.record {
    display: grid;
    grid-template-columns: minmax(180px, max-content) 1fr;
    gap: 8px 24px;
    margin: 0 0 28px;
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.fields dt,
.record dt {
    color: var(--muted);
    font-size: 15px;
}

.fields dd,
.record dd {
    margin: 0;
    font-size: 16px;
}

.legal h2 {
    margin-top: 34px;
}

.legal h3 {
    margin-top: 24px;
}

/* Die Kuendigungsseite traegt nichts ausser dem Formular - der Text davor
   bleibt schmal genug, um in einem Zug gelesen zu werden. */
.cancellation .notice {
    max-width: 760px;
}

.record time {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
    .fields,
    .record {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .fields dd,
    .record dd {
        margin-bottom: 12px;
    }

    .legal-warning {
        padding: 14px 16px;
        border-left-width: 6px;
    }
}

/* Der Fuss traegt jetzt fuenf Pflichtlinks. Ohne Umbruch schiebt er auf
   einem 360px breiten Geraet die Seite in die Waagerechte. */
.footer-inner nav {
    flex-wrap: wrap;
    row-gap: 8px;
}