/* ==========================================================================
   Termin-Abschnitt am Seitenende (include/termin_cta.php, Claude-Design-Vorschlag 08.10.2026)
   Teamfoto links, rechts Überschrift, Text, Buttons, E-Mail. Mobil untereinander. Keine Serifenschrift (nur in der H1 der Bühne).
   Eigene Datei, damit auch Seiten ohne toc.css (z. B. Startseite) den Abschnitt nutzen können: wird von header.php geladen, wenn
   die Seite vorher $pkTermin = true setzt (oder $pkToc = true, dann ist sie ohnehin dabei). Die Farben haben Rückfallwerte, weil die
   --pk-*-Variablen aus toc.css auf Seiten ohne toc.css fehlen.
   ========================================================================== */

.pk-termin {
    margin-top: 50px;
    background: var(--pk-warm, #eee9e2);
}

.pk-termin__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    padding-top: 48px;
    padding-bottom: 48px;
}

.pk-termin__media {
    overflow: hidden;
    background: #fff;
    border-radius: 16px;
    padding: 16px 16px 0; /* Das Motiv reicht in den Bildern bis an den Rand: weißer Abstand oben, links und rechts, unten bleibt es bündig (die Personen stehen auf der Boxkante) */
}

.pk-termin__media picture {
    display: block;
}

.pk-termin__img {
    display: block;
    width: 100%;
    height: auto; /* Bilder sind 2:1 (400x200, 600x300, 800x400): die Höhe folgt der Breite, nichts wird abgeschnitten */
}

.pk-termin__title {
    margin: 0;
    font-family: "Fira Sans", sans-serif;
    /* Schriftgröße bewusst nicht gesetzt: gilt die globale h2-Größe wie bei den Überschriften im Inhalt (custom.css: 1.5rem, ab 992 px 1.875rem) */
    font-weight: 300;
    line-height: 1.1;
    color: #035783;
    text-wrap: balance;
}

.pk-termin__lead {
    margin: 14px 0 0;
    font-family: "Fira Sans", sans-serif;
    font-size: 1.0625rem !important; /* schlägt die globale p-Schriftgröße */
    font-weight: 300;
    line-height: 1.6;
    color: var(--pk-ink, #203040);
}

/* Zusage unter dem Text: eigene Zeile, etwas kräftiger (Fira Sans ist nur bis 500 eingebunden) */
.pk-termin__assure {
    margin: 10px 0 0;
    font-family: "Fira Sans", sans-serif;
    font-size: 1.0625rem !important; /* schlägt die globale p-Schriftgröße */
    font-weight: 500;
    line-height: 1.6;
    color: #035783;
}

.pk-termin__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 26px;
}

/* Buttons: Pill-Design wie .pk-cta__btn in toc.css (hier nachgebaut, damit der Abschnitt auch ohne toc.css gleich aussieht) */
.pk-termin .btn {
    padding: 0.65rem 1.75rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 500;
}

.pk-termin__mail {
    display: inline-block;
    margin-top: 18px;
    font-size: 1rem;
    color: var(--pk-title, #035783);
    text-decoration: none;
}

.pk-termin__mail:hover,
.pk-termin__mail:focus-visible {
    color: var(--pk-pink, #e6007e);
}

@media (min-width: 576px) {
    .pk-termin__actions {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 14px;
    }
}

@media (min-width: 992px) {
    .pk-termin__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 56px;
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .pk-termin__media {
        padding: 24px 24px 0;
    }

    .pk-termin__lead,
    .pk-termin__assure {
        font-size: 1.125rem !important;
    }
}

/* Variante mit Person (pk_termin_cta($sprache, ["person" => "tanzella"])): quadratisches Porträt ohne weißen Rand (seit 02.11.2026).
   Mobil 200 px, ab 992 px 320 px (Quelle 400 px für scharfe Darstellung); die Box schließt eng ums Bild und steht mittig in der Spalte. Bei schmaleren Spalten (992-1199 px)
   schrumpft das Bild mit (max-width), das Seitenverhältnis bleibt. */
.pk-termin__media--square {
    justify-self: center;
    width: fit-content;
    max-width: 100%;
    padding: 0; /* 02.11.2026: Porträt ohne weißen Rand, das Bild füllt die abgerundete Box ganz aus */
    background: none; /* auch kein weißer Hintergrund hinter freigestellten Porträts (Tanzella) */
}

.pk-termin__media--square .pk-termin__img {
    width: 200px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

@media (min-width: 992px) {
    .pk-termin__media--square .pk-termin__img {
        width: 320px;
    }
}