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

    /* Der Seitentitel ist hier ein ganzer Satz und deshalb kleiner als der App-Name auf den App-Seiten */
    .gts-firma .gts-app-hero h1 {
        font-size: 44px;
        line-height: 1.1;
    }

    .gts-firma .knoepfe {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 24px;
    }

    .gts-firma .knopf {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 22px;
        border: 1px solid var(--ink);
        border-radius: 999px;
        background: var(--ink);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.3;
        color: #fff;
        text-decoration: none;
    }

    .gts-firma .knopf:hover,
    .gts-firma .knopf:focus {
        border-color: #2d374b;
        background: #2d374b;
        color: #fff;
    }

    .gts-firma .knopf--hell {
        background: #fff;
        color: var(--ink);
    }

    .gts-firma .knopf--hell:hover,
    .gts-firma .knopf--hell:focus {
        border-color: var(--ink);
        background: var(--mist);
        color: var(--ink);
    }

    .gts-firma .knopf--gruen {
        border-color: var(--sprout);
        background: var(--sprout);
        color: var(--ink);
    }

    .gts-firma .knopf--gruen:hover,
    .gts-firma .knopf--gruen:focus {
        border-color: #8fd651;
        background: #8fd651;
        color: var(--ink);
    }

    /* Kasten rechts im Kopf: Eckdaten des Unternehmens bzw. Zahlen aus den Systemen */
    .gts-firma .fakten {
        flex: 0 1 340px;
    }

    .gts-firma .fakten dl {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 6px 0 0;
    }

    .gts-firma .fakten dl div:not(:last-child) {
        padding-bottom: 12px;
        border-bottom: 1px solid var(--line);
    }

    .gts-firma .fakten dt {
        font-size: 13px;
        font-weight: 400;
        color: var(--muted);
    }

    .gts-firma .fakten dd {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: var(--ink);
    }

    /* Zahlen stehen groß vor ihrer Beschriftung */
    .gts-firma .fakten--zahlen dl div {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        align-items: baseline;
        gap: 12px;
    }

    .gts-firma .fakten--zahlen dt {
        font-size: 15px;
    }

    .gts-firma .fakten--zahlen dd {
        font-size: 32px;
        font-weight: 800;
        line-height: 1.1;
    }

    .gts-firma .abschnitt,
    .gts-firma .band {
        margin-top: 72px;
    }

    .gts-firma .abschnitt-kopf {
        margin-bottom: 28px;
    }

    /* Einleitungssatz unter der Überschrift; die Zeilen bleiben lesbar kurz */
    .gts-firma .abschnitt-kopf p:not(.eyebrow) {
        max-width: 760px;
        margin: 12px 0 0;
    }

    .gts-firma .abschnitt .eyebrow {
        margin: 0 0 10px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--forest);
    }

    .gts-firma .abschnitt h2 {
        margin: 0;
        font-size: 32px;
        font-weight: 800;
        line-height: 1.2;
        color: var(--ink);
    }

    .gts-firma .abschnitt p {
        font-size: 16px;
        line-height: 1.6;
        color: #3d4a37;
    }

    .gts-firma .abschnitt p a {
        font-weight: 600;
        color: #3f7a12;
    }

    .gts-firma .zweispaltig {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
        align-items: center;
        gap: 36px 56px;
    }

    .gts-firma .zweispaltig--oben {
        align-items: start;
    }

    .gts-firma .zweispaltig h2 {
        margin-bottom: 16px;
    }

    .gts-firma .bildkasten {
        padding: 28px;
        border: 1px solid var(--line);
        border-radius: 22px;
        background: var(--mist);
        text-align: center;
    }

    .gts-firma .bildkasten img {
        max-width: 100%;
        height: auto;
        border-radius: 14px;
    }

    /* Foto statt Bildschirmfoto: ohne Kasten, mit runden Ecken und Schatten wie auf der Startseite */
    .gts-firma .bildkasten--foto {
        padding: 0;
        border: 0;
        background: transparent;
    }

    .gts-firma .bildkasten--foto img {
        width: 100%;
        border-radius: 22px;
        box-shadow: 0 22px 50px -22px rgba(20, 40, 10, .4);
    }

    /* Steht das Bild vor dem Text, rueckt es hinter ihn, sobald beide untereinander stehen: sonst stossen dort
       die Bilder zweier Abschnitte aneinander. Die Grenze ist die Breite, unter der die zwei Spalten umbrechen. */
    @media (max-width: 991px) {
        .gts-firma .zweispaltig > .bildkasten:first-child {
            order: 1;
        }
    }

    .gts-firma .karten {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
        gap: 20px;
    }

    .gts-firma .karten--zwei {
        grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    }

    .gts-firma .karte {
        padding: 28px;
        border: 1px solid var(--line);
        border-radius: 22px;
        background: #fff;
    }

    /* Symbol links neben dem Text statt darüber */
    .gts-firma .karte--quer {
        display: flex;
        gap: 18px;
    }

    .gts-firma .karte h3 {
        margin: 0 0 6px;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.3;
        color: var(--ink);
    }

    .gts-firma .karte p {
        margin: 0;
        font-size: 15.5px;
        color: var(--muted);
    }

    .gts-firma .karte .hut {
        margin: 0 0 6px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--forest);
    }

    .gts-firma .symbol {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        margin-bottom: 14px;
        border-radius: 50%;
        background: #e3efd8;
        font-size: 22px;
        color: var(--forest);
    }

    .gts-firma .person {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .gts-firma .kuerzel {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: var(--leaf);
        font-size: 24px;
        font-weight: 800;
        color: var(--forest);
    }

    .gts-firma .person h3 {
        margin: 0;
    }

    .gts-firma .person .rolle {
        font-size: 14px;
        font-weight: 700;
        color: var(--forest);
    }

    .gts-firma .karte--hell {
        background: var(--mist);
    }

    /* Zwei Kästen am Seitenende von „Über uns“: Kontakt (hell) und Karriere (dunkel) */
    .gts-firma .kasten {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 36px;
        border: 1px solid var(--line);
        border-radius: 22px;
        background: var(--mist);
    }

    .gts-firma .kasten .eyebrow,
    .gts-firma .kasten p,
    .gts-firma .kasten address {
        margin: 0;
    }

    .gts-firma .abschnitt .kasten h2 {
        font-size: 26px;
    }

    .gts-firma .kasten address {
        font-size: 16px;
        line-height: 1.7;
        color: #3d4a37;
    }

    .gts-firma .kasten address a {
        font-weight: 600;
        color: #3f7a12;
    }

    .gts-firma .kasten .knopf {
        margin-top: auto;
    }

    .gts-firma .kasten--dunkel {
        border-color: #2d374b;
        background: #2d374b;
    }

    .gts-firma .abschnitt .kasten--dunkel .eyebrow {
        color: var(--leaf);
    }

    .gts-firma .abschnitt .kasten--dunkel h2 {
        color: #fff;
    }

    .gts-firma .abschnitt .kasten--dunkel p {
        color: rgba(255, 255, 255, .85);
    }

    .gts-firma .stellen {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .gts-firma .stelle {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 20px 32px;
        padding: 28px 32px;
        border: 1px solid var(--line);
        border-radius: 22px;
        background: #fff;
    }

    .gts-firma .stelle .text {
        flex: 1 1 520px;
        min-width: 0;
    }

    .gts-firma .stelle h3 {
        margin: 0 0 10px;
        font-size: 22px;
        font-weight: 700;
        line-height: 1.3;
        color: var(--ink);
    }

    .gts-firma .stelle p {
        margin: 0;
        font-size: 15.5px;
        color: var(--muted);
    }

    .gts-firma .merkmale {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0 0 10px;
        padding: 0;
        list-style: none;
    }

    .gts-firma .merkmale li {
        padding: 4px 12px;
        border: 1px solid var(--line);
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
        color: var(--muted);
    }

    .gts-firma .merkmale .bereich {
        border-color: #e3efd8;
        background: #e3efd8;
        font-weight: 700;
        color: var(--forest);
    }

    /* Initiativbewerbung: gestrichelt, weil keine ausgeschriebene Stelle */
    .gts-firma .stelle--offen {
        border-style: dashed;
        border-color: #9db38b;
        background: var(--mist);
    }

    .gts-firma .schritte {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
        gap: 20px;
        margin: 0;
        padding: 0;
        list-style: none;
        counter-reset: schritt;
    }

    .gts-firma .schritte li {
        padding: 24px;
        border-radius: 22px;
        background: var(--mist);
        counter-increment: schritt;
    }

    .gts-firma .schritte li::before {
        content: counter(schritt);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-bottom: 14px;
        border-radius: 50%;
        background: #2d374b;
        font-size: 17px;
        font-weight: 800;
        color: #fff;
    }

    .gts-firma .schritte h3 {
        margin: 0 0 6px;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.3;
        color: var(--ink);
    }

    .gts-firma .schritte p {
        margin: 0;
        font-size: 15px;
        color: var(--muted);
    }

    .gts-firma .schritte a {
        font-weight: 600;
        color: #3f7a12;
    }

    /* Stellenanzeige */
    .gts-firma .zurueck {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
        font-size: 14.5px;
        font-weight: 600;
        color: #3f7a12;
    }

    /* Störer im Stellenkopf: zwei Textzeilen zum Arbeitsmodell statt des Zweizeilers der App-Seiten */
    .gts-firma .gts-app-hero .stoerer {
        box-sizing: border-box;
        width: 124px;
        height: 124px;
        padding: 0 13px;
    }

    .gts-firma .gts-app-hero .stoerer strong {
        font-size: 19px;
        font-weight: 800;
        line-height: 1.15;
    }

    .gts-firma .gts-app-hero .stoerer span {
        font-size: 11px;
        letter-spacing: .04em;
        line-height: 1.3;
    }

    .gts-firma .haken {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .gts-firma .haken li {
        position: relative;
        padding-left: 30px;
        font-size: 16px;
        line-height: 1.55;
        color: #3d4a37;
    }

    .gts-firma .haken li::before {
        content: "\f00c";
        position: absolute;
        top: 1px;
        left: 0;
        font-family: FontAwesome;
        color: #3f7a12;
    }

    .gts-firma .haken strong {
        color: var(--ink);
    }

    .gts-firma .haken a {
        font-weight: 600;
        color: #3f7a12;
    }

    .gts-firma .gts-app-cta {
        margin-top: 72px;
    }

    /* Bänder über die volle Seitenbreite (Startseite, Produktseiten). Ihr Hintergrund wechselt streng ab: weiß,
       dunkelblau, weiß ... Wer ein Band einfügt oder entfernt, muss die Farben der folgenden nachziehen.
       Auf den dunklen Bändern steht der Inhalt in weißen Kacheln oder direkt in weißer Schrift. */
    .gts-firma.band {
        padding: 80px 0;
        background: #fff;
    }

    .gts-firma.band--dunkel {
        background: #2d374b;
    }

    .gts-firma.band .container > .abschnitt:first-child,
    .gts-firma.band .container > .gts-app-cta:first-child {
        margin-top: 0;
    }

    .gts-firma.band--dunkel .abschnitt .eyebrow {
        color: var(--leaf);
    }

    .gts-firma.band--dunkel .abschnitt h2 {
        color: #fff;
    }

    .gts-firma.band--dunkel .abschnitt p,
    .gts-firma.band--dunkel .haken li {
        color: rgba(255, 255, 255, .85);
    }

    .gts-firma.band--dunkel .abschnitt p b,
    .gts-firma.band--dunkel .abschnitt p strong,
    .gts-firma.band--dunkel .haken b,
    .gts-firma.band--dunkel .haken strong {
        color: #fff;
    }

    .gts-firma.band--dunkel .haken li::before {
        color: var(--sprout);
    }

    .gts-firma.band--dunkel .abschnitt p a,
    .gts-firma.band--dunkel .haken a {
        color: var(--leaf);
    }

    /* Kacheln auf dunklem Grund: weiß, ohne Rand, mit hellem Schein; innen gelten wieder die dunklen Schriftfarben */
    .gts-firma.band--dunkel .karte {
        border-color: transparent;
        box-shadow: 0 0 70px rgba(255, 255, 255, .14);
    }

    .gts-firma.band--dunkel .abschnitt .karte h2,
    .gts-firma.band--dunkel .abschnitt .karte h3 {
        color: var(--ink);
    }

    .gts-firma.band--dunkel .abschnitt .karte p {
        color: #3d4a37;
    }

    /* Bild ohne Kasten direkt auf dunklem Grund */
    .gts-firma.band--dunkel .bildkasten {
        padding: 0;
        border: 0;
        background: transparent;
    }

    /* Weißer Grund hinter dem Bild, damit freigestellte Screenshots auf Dunkelblau nicht durchscheinen */
    .gts-firma.band--dunkel .bildkasten img {
        border-radius: 22px;
        background: #fff;
        box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6);
    }

    @media (max-width: 575px) {
        .gts-firma.band {
            padding: 56px 0;
        }

        .gts-firma .gts-app-hero h1 {
            font-size: 32px;
        }

        .gts-firma .abschnitt,
        .gts-firma .band,
        .gts-firma .gts-app-cta {
            margin-top: 52px;
        }

        .gts-firma .abschnitt h2 {
            font-size: 26px;
        }

        .gts-firma .karte,
        .gts-firma .kasten,
        .gts-firma .stelle {
            padding: 24px 20px;
        }

        .gts-firma .gts-app-hero .stoerer {
            width: 104px;
            height: 104px;
        }

        .gts-firma .gts-app-hero .stoerer strong {
            font-size: 24px;
        }

        .gts-firma .gts-app-hero .stoerer span {
            font-size: 10.5px;
        }

        /* Platz für den größeren Störer */
        .gts-firma .gts-app-hero .stoerer ~ .text .eyebrow {
            padding-right: 108px;
        }
    }