/* ============================================================
   Geschäftsführer-Statement — Phase 0.26
   Nutzt EduBlink-Template-Klassen (edu-section-gap, edu-about-area,
   section-title, pre-title, shape-line, color-secondary, edu-btn).
   ============================================================ */

/* no_gap-Modus: ersetzt edu-section-gap (115/120px) durch kompakteres Padding.
   Wenn die GF-Sektion in einen anderen Container (z.B. about-style-8) integriert
   wird, der schon eigenen Hintergrund/Padding mitbringt. */
.ti-gf-section.ti-gf-no-gap {
    padding: 20px 0 60px;
}
@media (max-width: 767px) {
    .ti-gf-section.ti-gf-no-gap { padding: 16px 0 40px; }
}

/* --- Hintergrund-Varianten --- */
.ti-gf-section.ti-gf-bg-plain     { background: transparent; }
.ti-gf-section.ti-gf-bg-soft      { background: linear-gradient(180deg, #f4faf8 0%, #ffffff 100%); }
.ti-gf-section.ti-gf-bg-gray      { background: #f8fafc; }
.ti-gf-section.ti-gf-bg-highlight { background: linear-gradient(180deg, #fff7e6 0%, #ffffff 100%); }
/* cream — dezenter Beige-Übergang, der den about-style-8::before-Gradient
   nahtlos fortsetzt (rechts beige, links fast transparent). */
.ti-gf-section.ti-gf-bg-cream     {
    background: linear-gradient(-90deg, rgba(245, 241, 235, 0.55) 0%, rgba(245, 241, 235, 0.18) 100%);
}
/* warm — kompletter heller Übergang zu weiß (für die Position zwischen warmer und
   weißer Sektion — z.B. zwischen Counterup und Why-Choose). */
.ti-gf-section.ti-gf-bg-warm {
    background: linear-gradient(180deg, rgba(245, 241, 235, 0.45) 0%, #ffffff 100%);
}

/* --- Portrait-Container (Format wird via Klasse gesetzt) --- */
.ti-gf-section .ti-gf-portrait {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    background: #f3f6fa;
    border: 6px solid #fff;
    box-shadow: 0 24px 50px rgba(29, 78, 154, 0.18);
}
.ti-gf-section .ti-gf-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--ti-gf-fokus, center center);
    display: block;
}
.ti-gf-section .ti-gf-portrait.is-placeholder {
    background: linear-gradient(135deg, var(--color-primary, #1AB69D) 0%, #1d4e9a 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 96px; font-weight: 700;
    font-family: 'Times New Roman', serif;
}

/* Format-Varianten */
.ti-gf-section .ti-gf-fmt-round {
    width: 320px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}
.ti-gf-section .ti-gf-fmt-square {
    width: 320px;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
}
.ti-gf-section .ti-gf-fmt-portrait {
    width: 280px;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
}
.ti-gf-section .ti-gf-fmt-landscape {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
}
.ti-gf-section .ti-gf-fmt-panorama {
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
}

@media (max-width: 991px) {
    .ti-gf-section .ti-gf-fmt-round,
    .ti-gf-section .ti-gf-fmt-square { width: 240px; }
    .ti-gf-section .ti-gf-fmt-portrait { width: 220px; }
}
@media (max-width: 767px) {
    .ti-gf-section .ti-gf-fmt-round,
    .ti-gf-section .ti-gf-fmt-square { width: 200px; }
    .ti-gf-section .ti-gf-fmt-portrait { width: 200px; }
    .ti-gf-section .ti-gf-image-col { margin-bottom: 24px; }
}

/* --- Pull-Quote (EduBlink-Stil: kein Karten-Look, nur icon-26 + großer Italic-Text) --- */
.ti-gf-section .ti-gf-pullquote-wrap {
    position: relative;
    margin: 12px 0 24px;
    padding-left: 56px; /* Platz für das Quote-Icon links */
}
.ti-gf-section .ti-gf-quote-mark {
    position: absolute;
    top: 4px;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary, #1AB69D);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 6px 14px rgba(26, 182, 157, 0.30);
}
.ti-gf-section .ti-gf-pullquote {
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.45;
    font-weight: 600;
    color: var(--color-heading, #2c3e54);
    font-family: var(--font-secondary), inherit;
    margin: 0;
    font-style: italic;
    background: transparent;
    border: none;
    padding: 0;
}

/* --- Quote-Modus (Hero-Banner) --- */
.ti-gf-section .ti-gf-quote-hero {
    text-align: center;
    margin: 0;
    padding: 30px 0 10px;
    border: none;
}
.ti-gf-section .ti-gf-quote-mark-lg {
    position: static;
    width: 64px;
    height: 64px;
    font-size: 26px;
    margin: 0 auto 24px;
    display: flex;
}
.ti-gf-section .ti-gf-pullquote-lg {
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.3;
    font-weight: 700;
    max-width: 880px;
    margin: 0 auto 18px;
}
.ti-gf-section .ti-gf-quote-attr {
    font-size: 15px;
    color: #6b7a90;
    margin-top: 14px;
}
.ti-gf-section .ti-gf-quote-attr strong {
    color: var(--color-heading, #2c3e54);
}

/* --- Signatur-Block (Name + Titel + Slogan) --- */
.ti-gf-section .ti-gf-signatur {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(26, 182, 157, 0.25);
}
.ti-gf-section .ti-gf-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-heading, #2c3e54);
    margin-bottom: 2px;
    font-family: inherit;
}
.ti-gf-section .ti-gf-titel {
    font-size: 14px;
    color: #6b7a90;
    margin-bottom: 6px;
}
.ti-gf-section .ti-gf-slogan {
    font-size: 14px;
    color: var(--color-primary, #1AB69D);
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* --- Compact-Modus: kleineres Bild, kompaktere Abstände --- */
.ti-gf-section.ti-gf-mode-compact .ti-gf-fmt-round,
.ti-gf-section.ti-gf-mode-compact .ti-gf-fmt-square { width: 240px; }
.ti-gf-section.ti-gf-mode-compact .ti-gf-fmt-portrait { width: 220px; }
.ti-gf-section.ti-gf-mode-compact { padding-top: 60px; padding-bottom: 60px; }

/* --- read-more-btn (für compact-CTA) --- */
.ti-gf-section .read-more-btn {
    margin-top: 28px;
}

/* ============================================================
   Card-Modus — weiße Karte mit Schatten, Quote-Icon links
   Inspiration: Live-Site-Variante mit Doppel-Anführungszeichen.
   ============================================================ */
.ti-gf-section .ti-gf-card {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 24px 50px rgba(29, 78, 154, 0.10), 0 4px 12px rgba(0, 0, 0, 0.04);
    padding: 36px 44px 36px 32px;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    border: 1px solid rgba(229, 235, 244, 0.7);
}
@media (max-width: 575px) {
    .ti-gf-section .ti-gf-card { padding: 28px 22px; gap: 18px; flex-direction: column; }
}
.ti-gf-section .ti-gf-card-icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(26, 182, 157, 0.10);
    color: var(--color-primary, #1AB69D);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
}
.ti-gf-section .ti-gf-card-body {
    flex: 1 1 auto;
    min-width: 0;
}
.ti-gf-section .ti-gf-card-quote {
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.6;
    color: var(--color-body, #5d666f);
    margin: 0 0 12px;
    font-style: normal;
    font-weight: 400;
}
.ti-gf-section .ti-gf-card-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-body, #5d666f);
    margin: 0 0 12px;
}
.ti-gf-section .ti-gf-card-author {
    margin-top: 8px;
}
.ti-gf-section .ti-gf-card-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-heading, #2c3e54);
}
.ti-gf-section .ti-gf-card-titel {
    font-size: 14px;
    color: #6b7a90;
    font-weight: 400;
}