/* =========================================================================
   webseo.one – Kostenrechner als Haupt-CTA auf der Startseite

   1. Dunkles Band „Was kostet Ihre Website?“ direkt nach den Leistungen. Gestaltet wie das Abschluss-Band des
      Ratgebers unter dem Rechner (kostenrechner/plugin/…/assets/css/ratgeber.css): Aufwandsformel in heller
      Schmalschrift mit Teal-Plus, „= Ihre Spanne“ und als Hauptaktion die Mint-Platte in der Form der Abdeckung
      (Spitzen links und rechts, gestrichelte 60°-Linie, Navy-Schrägstrich).
   2. Ruhige Alternative im Kontaktbereich („Noch unsicher beim Budget?“).
   3. Konditionszeile unter den Preiskarten (.pricing__terms.kr-terms): dasselbe dreispaltige Raster wie die Karten,
      alle Blöcke oben bündig. Links Stundensatz und Hinweis zu den Paketpreisen, rechts über zwei Spalten der
      Kostenrechner mit eigener Überschrift und Button.

   Alles unter .kr-, Tokens aus styles.css (--ink, --white, --accent, --page-gutter) mit Ersatzwerten.
   Bewegung nur als Antwort auf Hover und Fokus; bei reduzierter Bewegung ohne Übergänge.
   Hintergrund, Einbindung und Rückbau: KOSTENRECHNER-VERLINKUNG-LOKAL.md (Schritt 3).
   ========================================================================= */

.kr-band,
.kr-contact-alt {
    --kr-ink: var(--ink, #07110f);
    --kr-white: var(--white, #fff);
    --kr-mint: var(--accent, #22e6bd);
    /* Teal-Plus wie im Rechner: 7,5:1 auf Ink */
    --kr-teal: #33b4a2;
    --kr-navy: #093146;
    /* Fließtext auf Ink: 11,8:1 */
    --kr-on-dark: #c3cec9;
    --kr-line-dark: rgba(195, 206, 201, 0.16);
    --kr-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --kr-hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

/* Nur für Screenreader (Pluszeichen der Formel) */
.kr-band .kr-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ------------------------------------------------------------------ Band */
.kr-band {
    position: relative;
    padding: clamp(4.5rem, 9vw, 8.5rem) var(--page-gutter, clamp(1.25rem, 3.4vw, 4rem));
    background: var(--kr-ink);
    color: var(--kr-white);
    overflow-wrap: break-word;
}

/* H2 links, Einleitung rechts (Raster wie im Ratgeber) */
.kr-band__head {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2rem, 5vw, 6rem);
    align-items: start;
}

.kr-band__title {
    max-width: 14ch;
    margin: 0;
    color: var(--kr-white);
    font-size: clamp(2.4rem, 4.4vw, 4.4rem);
    font-stretch: 80%;
    font-weight: 560;
    letter-spacing: -0.05em;
    line-height: 0.96;
    text-wrap: balance;
}

.kr-band__text {
    max-width: 46ch;
    margin: 0;
    padding-top: 0.45rem;
    color: var(--kr-on-dark);
    font-size: clamp(1.1rem, 0.95rem + 0.45vw, 1.3rem);
    line-height: 1.5;
}

/* Die Aufwandsformel, Zeile für Zeile lesbar: Jedes Pluszeichen hängt am folgenden Begriff. */
.kr-band__formula {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.05em 0.38em;
    margin: clamp(2.75rem, 5.5vw, 4.75rem) 0 0;
    padding: clamp(1rem, 1.6vw, 1.35rem) 0 0;
    border-top: 1px solid var(--kr-line-dark);
    color: var(--kr-white);
    font-size: clamp(1.55rem, 3.1vw, 3.1rem);
    font-stretch: 80%;
    font-weight: 560;
    letter-spacing: -0.03em;
    line-height: 1.12;
}

.kr-band__term {
    display: inline-flex;
    align-items: baseline;
    gap: 0.38em;
}

.kr-band__formula i,
.kr-band__label i {
    color: var(--kr-teal);
    font-style: normal;
    font-weight: 400;
}

/* „= Ihre Spanne“ in der linken Spalte (Flucht der H2), Mint-Platte und Fakten in der rechten Spalte (Flucht des
   Einleitungstexts): dasselbe Raster wie .kr-band__head, damit alles auf zwei klaren Linien steht. */
.kr-band__sum {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2rem, 5vw, 6rem);
    row-gap: 1.25rem;
    align-items: center;
    margin-top: clamp(0.9rem, 1.8vw, 1.5rem);
}

.kr-band__label {
    margin: 0;
    color: var(--kr-white);
    font-size: clamp(1.55rem, 3.1vw, 3.1rem);
    font-stretch: 80%;
    font-weight: 560;
    letter-spacing: -0.03em;
    line-height: 1.12;
}

.kr-band__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.1rem clamp(1.5rem, 3vw, 2.75rem);
}

.kr-band__facts {
    display: grid;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    color: var(--kr-on-dark);
    font-size: 0.95rem;
    font-weight: 520;
    line-height: 1.4;
    list-style: none;
}

.kr-band__facts li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
}

/* Sechseck-Aufzählung in Teal statt Punkten */
.kr-band__facts li::before {
    flex: 0 0 auto;
    width: 0.62em;
    aspect-ratio: 2 / 1.732;
    background: var(--kr-teal);
    clip-path: var(--kr-hex);
    content: "";
}

/* ------------------------------------------------ Mint-Platte (Hauptaktion)
   Die Form liegt auf ::before, damit der Fokusrahmen nicht abgeschnitten wird. Ziel mindestens 64 px hoch. */
.kr-plate {
    --h: 4.25rem;
    --cc: calc(var(--h) * 0.2887);
    position: relative;
    z-index: 0;
    display: inline-flex;
    max-width: 100%;
    min-height: var(--h);
    align-items: center;
    padding: 0.6rem calc(var(--cc) + 3.5rem) 0.6rem calc(var(--cc) + 1.05rem);
    color: var(--kr-ink);
    font-size: 1.05rem;
    font-weight: 640;
    line-height: 1.2;
    text-decoration: none;
}

.kr-plate::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--kr-mint);
    clip-path: polygon(var(--cc) 0, calc(100% - var(--cc)) 0, 100% 50%, calc(100% - var(--cc)) 100%, var(--cc) 100%, 0 50%);
    content: "";
    transition: background-color 300ms ease;
}

/* Gestrichelte 60°-Linie mit Navy-Schrägstrich */
.kr-plate__line {
    position: absolute;
    top: 0;
    right: calc(var(--cc) + 1.5rem);
    bottom: 0;
    width: 0;
    transform: skewX(-30deg);
}

.kr-plate__perf {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    width: 2px;
    background: repeating-linear-gradient(to bottom, var(--kr-ink) 0 5px, transparent 5px 10px);
    opacity: 0.55;
}

.kr-plate__slash {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -5px;
    width: 10px;
    background: var(--kr-navy);
    clip-path: inset(64% 0 0 0);
    transition: clip-path 300ms var(--kr-ease);
}

.kr-plate:focus-visible {
    outline: 3px solid var(--kr-mint);
    outline-offset: 4px;
    box-shadow: none;
}

.kr-plate:focus-visible .kr-plate__slash {
    clip-path: inset(0 0 0 0);
}

@media (hover: hover) and (pointer: fine) {
    .kr-plate:hover::before {
        background: var(--kr-white);
    }

    .kr-plate:hover .kr-plate__slash {
        clip-path: inset(0 0 0 0);
    }
}

/* ------------------------------------------------ Startseite, Hero-Aktionen
   „Arbeiten ansehen ↓“ bleibt neben dem längeren Button „Website-Kosten berechnen“ einzeilig. Erst ab 1100 px:
   Dort ändern sich Zeilenzahl des Absatzes und Lage der H1 nicht, auch wenn diese Datei erst nach dem ersten Rendern
   lädt (gemessen 1100–1920 px mit nur kritischem CSS). Darunter bricht der Textlink wie bisher bei Bedarf um. */
@media (min-width: 1100px) {
    .kr-hero-actions .text-link {
        white-space: nowrap;
    }
}

/* ------------------------------------------- Kontaktbereich: Alternative */
.kr-contact-alt {
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.kr-contact-alt p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.85rem;
    margin: 0;
    color: var(--kr-on-dark);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ------------------------------------------------------------- Breiten */
@media (max-width: 959.98px) {
    .kr-band__head,
    .kr-band__sum {
        grid-template-columns: minmax(0, 1fr);
    }

    .kr-band__title {
        max-width: 18ch;
    }

    .kr-band__text {
        margin-top: 1.25rem;
        padding-top: 0;
    }
}

@media (max-width: 640px) {
    .kr-band__title,
    .kr-band__text {
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    .kr-plate {
        --h: 4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kr-plate::before,
    .kr-plate__slash {
        transition: none;
    }
}

/* Erzwungene Farben (Kontrastmodus): Platte als umrandeter Link */
@media (forced-colors: active) {
    .kr-plate {
        border: 2px solid LinkText;
    }

    .kr-plate::before,
    .kr-plate__line {
        display: none;
    }
}

@media print {
    .kr-band {
        background: none;
        color: #000;
    }

    .kr-band :is(.kr-band__title, .kr-band__formula, .kr-band__label) {
        color: #000;
    }
}

/* -------------------------------------------------------------------------
   3. Konditionszeile unter den Preiskarten
   Raster und Abstand wie .pricing__grid (drei Spalten, gleicher Spaltenabstand), alle Blöcke oben bündig:
   Spalte 1 Stundensatz und darunter der Hinweis zu den Paketpreisen, Spalten 2–3 der Kostenrechner. Die
   Beschriftungen „Stundensatz“ und „Kostenrechner“ stehen auf einer Linie, die große Schmalschrift darunter auch.
   ------------------------------------------------------------------------- */
.pricing__terms.kr-terms {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 1.25rem clamp(1rem, 2vw, 1.5rem);
}

.kr-terms .pricing__rate {
    grid-column: 1;
    grid-row: 1;
}

.kr-terms #pricing-tax-note {
    grid-column: 1;
    grid-row: 2;
    max-width: 30em;
    font-size: 0.92rem;
}

.kr-terms__calc {
    display: grid;
    grid-column: 2 / span 2;
    grid-row: 1 / span 2;
    justify-items: start;
    gap: 0.45rem;
    min-width: 0;
    color: var(--ink, #07110f);
}

.kr-terms__title {
    max-width: 16em;
    margin: 0;
    color: var(--ink, #07110f);
    font-size: clamp(1.75rem, 2.6vw, 2.6rem);
    font-stretch: 78%;
    font-weight: 560;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.kr-terms__calc .pricing__tax-note {
    max-width: 36em;
}

.kr-terms__calc .button {
    margin-top: 0.85rem;
    max-width: 100%;
    white-space: normal;
}

/* Wie die Preiskarten: unter 900 px alles untereinander. */
@media (max-width: 900px) {
    .pricing__terms.kr-terms {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        gap: 1.25rem;
    }

    .kr-terms .pricing__rate,
    .kr-terms #pricing-tax-note,
    .kr-terms__calc {
        grid-column: 1;
        grid-row: auto;
    }

    .kr-terms__calc {
        margin-top: 1.25rem;
        padding-top: 1.75rem;
        border-top: 1px solid rgba(7, 17, 15, 0.3);
    }
}

/* Concrete cost labels can wrap inside narrow pricing cards. */
.price-card { min-width: 0; }
.price-card .button[data-wsk-link] { max-width: 100%; white-space: normal; text-align: left; }