/* Aus produktseite.php der frueheren CodeIgniter-Seite uebernommen. Inhaltlich unveraendert, damit das
   Design gleich bleibt. */

    /* Kopf der Produktseiten: dunkles Band mit Logo, Einleitung, zwei Knöpfen und Gerätebild */
    .gts-firma.produkt-kopf {
        padding: 64px 0;
    }

    .produkt-kopf .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 36px 56px;
    }

    .produkt-kopf .text {
        flex: 1 1 380px;
        min-width: 0;
    }

    .produkt-kopf h1 {
        margin: 0 0 28px;
    }

    .produkt-kopf h1 img {
        display: block;
        width: 100%;
        max-width: 380px;
        height: auto;
    }

    .produkt-kopf .lede {
        margin: 0;
        font-size: 20px;
        font-weight: 600;
        line-height: 1.5;
        color: rgba(255, 255, 255, .85);
    }

    .produkt-kopf .bild {
        flex: 1.3 1 440px;
        min-width: 0;
        text-align: center;
    }

    .produkt-kopf .bild img {
        max-width: 100%;
        height: auto;
    }

    /* Der zweite Knopf im dunklen Kopf: durchsichtig mit hellem Rand */
    .gts-firma.produkt-kopf .knopf--hell {
        border-color: rgba(255, 255, 255, .7);
        background: transparent;
        color: #fff;
    }

    .gts-firma.produkt-kopf .knopf--hell:hover,
    .gts-firma.produkt-kopf .knopf--hell:focus {
        border-color: #fff;
        background: rgba(255, 255, 255, .14);
        color: #fff;
    }

    .produkt .preisband {
        margin-top: 0;
    }

    .produkt .abschnitt .haken {
        margin-bottom: 16px;
    }

    .produkt .abschnitt .text > :last-child {
        margin-bottom: 0;
    }

    .produkt .abschnitt .knoepfe {
        margin-top: 22px;
    }

    /* Bereich ohne Bild (z. B. „Neu für Träger in Hamburg“): Text über die ganze Breite, Aufzählung in Spalten */
    .produkt .abschnitt--breit h2 {
        margin-bottom: 16px;
    }

    .produkt .abschnitt--breit .text > p {
        max-width: 75ch;
        font-size: 17px;
    }

    .produkt .abschnitt--breit .haken {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
        gap: 12px 32px;
    }

    @media (max-width: 575px) {
        .gts-firma.produkt-kopf {
            padding: 44px 0;
        }

        .produkt-kopf .lede {
            font-size: 18px;
        }
    }