/* =========================================================================
   Quer-Verweis auf den Automarkt (.ksc-) — 12.10.2026

   Vorher: ein dunkler, mittig gesetzter Block. Der Inhaber wollte den Aufbau
   der Vorlage (licenseplate.ae, „Find out what your car is worth"): eine
   getoente Karte ueber die ganze Spalte, Text links in einer schmalen Spalte,
   zwei Pillen-Knoepfe darunter, und rechts eine freigestellte Figur, die bis
   an die Unterkante der Karte laeuft.

   Am Entwurfsbild ausgemessen (GD, 2000 px breite Aufnahme, Massstab 1,396 —
   siehe reference_pixel_rebuild_from_design):
     Karte   Innenabstand links 70, oben 75
     Eyebrow 14/700, danach bis zur H2 35
     H2      zwei Zeilen, Zeilenabstand 52, Versalhoehe 38 -> rund 44 Grad
     Text    Zeilenabstand 28,7 -> 17/28
     Knoepfe 56 hoch, Pille, Luecke 16
     Fussnote 14, 84 unter der Knopfoberkante

   Uebernommen ist der AUFBAU, nicht die Farbe: dort Rot auf Rosa, bei uns
   Markengruen auf einem sehr hellen Gruen. Reines CSS mit eigenem Namensraum
   — das Tailwind-Bundle ist seit 23.08. eingefroren.
   ========================================================================= */

.ksc {
    --ksc-green: var(--ksa-green, #006C35);
    --ksc-green-dark: var(--ksa-green-dark, #004F26);

    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: #F1F8F3;
    padding: 64px 72px;
    /* Hoehe nach der Figur: 640 breit mal 1041/1510 = 441 hoch, plus Luft.
       Niedriger, und overflow:hidden wuerde ihr oben das Fragezeichen nehmen. */
    min-height: 520px;
    display: flex;
    align-items: center;
}

/* Ohne Bild saehe eine halbe Karte leer aus — dann darf der Text breiter
   laufen und die Karte sich auf ihren Inhalt zusammenziehen. */
.ksc--ohne-bild { min-height: 0; }
.ksc--ohne-bild .ksc-text { max-width: 720px; }

/* Der Text liegt UEBER dem Bild. Das ist Absicht (Inhaber 12.10.2026): die
   Figur schliesst buendig mit der Karte ab, und der Satz darf in sie
   hineinragen, statt dass beide sich eine Spalte teilen und in der Mitte
   eine Naht entsteht. */
.ksc-text { position: relative; z-index: 1; max-width: 520px; }

/* Der Schleier hinter dem Satz. Gemessen (GD, Leuchtdichte je Bildspalte im
   Textband): ab card-x 535 faellt der Grund auf 0,21 und darunter — dort
   liegt der Arm und der Bart der Figur, und 17er Text haette 1,9:1 statt
   4,5:1. Ein harter Textkasten waere die falsche Loesung; stattdessen liegt
   die Kartenfarbe selbst hinter dem Satz und laeuft nach aussen aus. Die
   Figur taucht dadurch weich aus der Flaeche auf, statt abgeschnitten zu
   wirken, und die Ueberlappung bleibt sichtbar. */
.ksc-text::before {
    content: '';
    position: absolute;
    inset-block: -24px;
    inset-inline-start: -32px;
    inset-inline-end: -120px;
    z-index: -1;
    background: linear-gradient(to var(--ksc-to, right),
        #F1F8F3 0%,
        #F1F8F3 calc(100% - 120px),
        rgba(241, 248, 243, 0) 100%);
}
[dir="rtl"] .ksc { --ksc-to: left; }

.ksc-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0 0 20px;
    color: var(--ksc-green);
    font-size: 15px; line-height: 20px; font-weight: 700;
}
.ksc-eyebrow i { font-size: 14px; }

.ksc-h {
    margin: 0;
    color: #111318;
    font-size: 44px; line-height: 52px; font-weight: 800;
    letter-spacing: -.8px;
    text-wrap: balance;
    max-width: 14ch;
}

.ksc-p {
    margin: 20px 0 0;
    color: #4b5159;
    font-size: 17px; line-height: 28px;
}

.ksc-act { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }

.ksc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 56px; padding: 0 28px;
    border-radius: 999px;
    font-size: 17px; font-weight: 700; line-height: 1;
    text-decoration: none; white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.ksc-btn:hover { transform: translateY(-1px); }
.ksc-btn--voll { background: var(--ksc-green); color: #fff; border: 1px solid var(--ksc-green); }
.ksc-btn--voll:hover { background: var(--ksc-green-dark); border-color: var(--ksc-green-dark); }
.ksc-btn--rand { background: #fff; color: var(--ksc-green); border: 1px solid rgba(0, 108, 53, .35); }
.ksc-btn--rand:hover { border-color: var(--ksc-green); background: #f6fbf8; }
.ksc-btn:focus-visible { outline: 3px solid var(--ksc-green); outline-offset: 3px; }

.ksc-fuss { margin: 20px 0 0; color: #6b7079; font-size: 15px; line-height: 22px; }

/* Die Figur haengt in der Ecke und schliesst mit Unterkante UND Aussenkante
   der Karte buendig ab — deshalb `inset` auf 0 statt eines Rasterplatzes.
   `pointer-events: none`, damit sie die Knoepfe darunter nicht abfaengt.

   NICHT spiegeln in /ar: das Fragezeichen im Bild wuerde seitenverkehrt
   stehen. Weil die Figur links im Bild sitzt und das Bild in /ar an die
   linke Kante rutscht, steht der Mann dort ohnehin aussen und das Auto
   zeigt nach innen zum Text — die Leserichtung stimmt von selbst. */
.ksc-bild {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    z-index: 0;
    width: min(50%, 640px);
    pointer-events: none;
}

/* Tiefe statt Flaeche (Inhaber 12.10.2026): der Mann steht vorn, Auto und
   Fragezeichen verwaschen nach hinten. Eine hochgezogene Ellipse um seinen
   Oberkoerper haelt ihn von Kopf bis Saum voll deckend und nimmt alles
   drumherum zurueck — das Fragezeichen landet bei rund 45 %, das Heck des
   Wagens bei 18 %. Waagerecht allein ginge nicht: das Fragezeichen steht
   UEBER dem Mann, ein seitlicher Verlauf wuerde entweder es stehen lassen
   oder ihm den Kopf nehmen.

   Die Maske haengt am BILD, nicht an der Leserichtung — deshalb kein
   logisches Pendant fuer /ar: dort liegt das Bild gespiegelt, der Mann
   steht aber weiter an derselben Stelle IM Bild. */
.ksc-bild img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: radial-gradient(62% 155% at 17% 55%,
        #000 0%, #000 22%,
        rgba(0, 0, 0, .42) 44%,
        rgba(0, 0, 0, .22) 72%,
        rgba(0, 0, 0, .18) 100%);
    mask-image: radial-gradient(62% 155% at 17% 55%,
        #000 0%, #000 22%,
        rgba(0, 0, 0, .42) 44%,
        rgba(0, 0, 0, .22) 72%,
        rgba(0, 0, 0, .18) 100%);
}

@media (max-width: 1023px) {
    .ksc { padding: 48px; min-height: 430px; }
    .ksc-h { font-size: 36px; line-height: 44px; }
    .ksc-text { max-width: 440px; }
    .ksc-bild { width: min(52%, 500px); }
}

@media (max-width: 767px) {
    /* Auf dem Telefon gibt es keine zweite Spalte: der Text steht oben, die
       Figur darunter und schliesst mit der Unterkante ab. */
    .ksc {
        padding: 32px 20px 0;
        min-height: 0;
        display: block;
        border-radius: 20px;
    }
    .ksc--ohne-bild { padding-bottom: 32px; }
    .ksc-text { max-width: none; }
    .ksc-bild { position: static; width: 100%; max-width: 420px; margin: 16px auto 0; }
    .ksc-text::before { display: none; }
    .ksc-h { font-size: 30px; line-height: 38px; max-width: none; }
    .ksc-p { font-size: 16px; line-height: 26px; }
    .ksc-act { margin-top: 24px; }
    .ksc-act .ksc-btn { flex: 1 1 200px; padding: 0 18px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .ksc-btn, .ksc-btn:hover { transition: none; transform: none; }
}