/* ===========================================================
   ThinkFlow – Stylesheet
   Premium, ruhig, diskret, B2B-tauglich und menschlich.
   Mobile-First, schlank gehalten, ergänzt Bootstrap 5.
   =========================================================== */

:root {
    --tf-blue: #0F2C59;
    --tf-taupe: #8B7D6B;
    --tf-gold: #D4AF37;
    --tf-grayblue: #6B7B8E;
    --tf-bordeaux: #6D2E46;
    --tf-bordeaux-dark: #5a2639;
    --tf-bg: #F8F6F2;
    --tf-white: #FFFFFF;
    --tf-border: rgba(107, 123, 142, 0.22);
    --tf-shadow: 0 1rem 2.5rem rgba(15, 44, 89, 0.08);
    --tf-shadow-sm: 0 0.4rem 1.2rem rgba(15, 44, 89, 0.06);

    --tf-text: #0F2C59;
    --tf-text-soft: #3c4a63;
    --tf-text-muted: #5d6b82;

    --tf-radius: 1rem;
    --tf-radius-lg: 1.25rem;
}

/* Systemfont-Stack statt externer Fonts */
html, body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    color: var(--tf-text);
    background-color: var(--tf-bg);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* Sprungziele etwas unter den fixen Header schieben */
section[id], div[id].tf-anchor {
    scroll-margin-top: 5.5rem;
}

body {
    line-height: 1.65;
    font-size: 1.0625rem;
}

p {
    color: var(--tf-text-soft);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--tf-blue);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

a {
    color: var(--tf-bordeaux);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--tf-bordeaux-dark);
}

/* ---------- Skip-Link ---------- */
.tf-skip-link {
    position: absolute;
    left: 0.75rem;
    top: -3.5rem;
    z-index: 1100;
    background: var(--tf-blue);
    color: #fff;
    padding: 0.6rem 1rem;
    border-radius: 0 0 0.5rem 0.5rem;
    transition: top 0.2s ease;
}

.tf-skip-link:focus {
    top: 0;
    color: #fff;
    outline: 3px solid var(--tf-gold);
}

/* ---------- Sichtbare Focus-States ---------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--tf-gold);
    outline-offset: 2px;
    box-shadow: none;
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: 0.7rem;
    font-weight: 600;
    padding: 0.7rem 1.4rem;
}

.btn-lg {
    padding: 0.9rem 1.7rem;
    font-size: 1.0625rem;
}

/* Primärer CTA = Bordeaux */
.btn-cta,
.btn-cta:visited {
    background-color: var(--tf-bordeaux);
    border: 1px solid var(--tf-bordeaux);
    color: #fff;
}

.btn-cta:hover,
.btn-cta:focus {
    background-color: var(--tf-bordeaux-dark);
    border-color: var(--tf-bordeaux-dark);
    color: #fff;
}

.btn-outline-blue,
.btn-outline-blue:visited {
    background-color: transparent;
    border: 1px solid var(--tf-blue);
    color: var(--tf-blue);
}

.btn-outline-blue:hover,
.btn-outline-blue:focus {
    background-color: var(--tf-blue);
    color: #fff;
}

.btn-ghost-light,
.btn-ghost-light:visited {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #fff;
}

.btn-ghost-light:hover,
.btn-ghost-light:focus {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* ---------- Header / Navigation ---------- */
.tf-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(248, 246, 242, 0.92);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--tf-border);
}

.tf-brand {
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: var(--tf-blue);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.tf-brand:hover {
    color: var(--tf-blue);
}

.tf-brand .tf-brand-mark {
    color: var(--tf-gold);
    flex: 0 0 auto;
}

.tf-nav .nav-link {
    color: var(--tf-text-soft);
    font-weight: 600;
    padding: 0.5rem 0.85rem;
    border-radius: 0.5rem;
}

.tf-nav .nav-link:hover,
.tf-nav .nav-link:focus {
    color: var(--tf-blue);
    background: rgba(15, 44, 89, 0.05);
}

/* ---------- Sektionen ---------- */
.tf-section {
    padding: 4rem 0;
}

.tf-section-alt {
    background: linear-gradient(180deg, #fff 0%, var(--tf-bg) 100%);
}

.tf-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--tf-taupe);
    margin-bottom: 0.75rem;
}

.tf-section-title {
    margin-bottom: 0.75rem;
}

.tf-section-intro {
    color: var(--tf-text-soft);
    max-width: 46rem;
}

.tf-gold-rule {
    width: 3rem;
    height: 3px;
    background: var(--tf-gold);
    border: 0;
    opacity: 1;
    border-radius: 2px;
    margin: 0.5rem 0 1.25rem;
}

/* ---------- Hero ---------- */
.tf-hero {
    position: relative;
    padding: 3.5rem 0 3rem;
    overflow: hidden;
    background:
            radial-gradient(120% 120% at 100% 0%, rgba(107, 123, 142, 0.18) 0%, rgba(248, 246, 242, 0) 55%),
            var(--tf-bg);
}

.tf-hero h1 {
    font-size: clamp(2rem, 5vw, 3.25rem);
}

.tf-hero-lead {
    font-size: 1.15rem;
    color: var(--tf-text-soft);
    max-width: 40rem;
}

.tf-orient {
    font-weight: 600;
    color: var(--tf-blue);
}

.tf-hero-art {
    width: 100%;
    height: auto;
    display: block;
}

/* ---------- Segmentkarten ---------- */
.tf-segment-card {
    border-radius: var(--tf-radius-lg);
    padding: 1.75rem;
    height: 100%;
    border: 1px solid var(--tf-border);
    box-shadow: var(--tf-shadow);
    background: var(--tf-white);
    display: flex;
    flex-direction: column;
}

.tf-segment-card .tf-segment-title {
    font-size: 1.35rem;
}

.tf-segment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tf-gold);
    flex: 0 0 auto;
}

/* Unternehmer-Pfad = tiefblau */
.tf-segment-blue {
    background: linear-gradient(160deg, #14366b 0%, var(--tf-blue) 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

.tf-segment-blue .tf-segment-title,
.tf-segment-blue p,
.tf-segment-blue li {
    color: #eef1f6;
}

/* Unternehmens-/HR-Pfad = Taupe/Grau-Blau */
.tf-segment-taupe {
    background: linear-gradient(160deg, #f2efe9 0%, #e7e2d8 100%);
    border-color: var(--tf-border);
}

.tf-segment-taupe .tf-segment-title {
    color: var(--tf-blue);
}

.tf-segment-taupe p,
.tf-segment-taupe li {
    color: #4a4336;
}

.tf-check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.tf-check-list li {
    position: relative;
    padding-left: 1.85rem;
    margin-bottom: 0.6rem;
}

.tf-check-list li .tf-check {
    position: absolute;
    left: 0;
    top: 0.15rem;
    color: var(--tf-gold);
    flex: 0 0 auto;
}

.tf-segment-card .btn {
    margin-top: auto;
}

/* ---------- Trust Badges ---------- */
.tf-trust {
    border-top: 1px solid var(--tf-border);
    border-bottom: 1px solid var(--tf-border);
    background: var(--tf-white);
    padding: 1.25rem 0;
}

.tf-trust-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--tf-text-soft);
    font-weight: 600;
    font-size: 0.95rem;
}

.tf-trust-item .tf-badge-icon {
    color: var(--tf-gold);
    flex: 0 0 auto;
}

/* ---------- Cards ---------- */
.tf-card {
    background: var(--tf-white);
    border: 1px solid var(--tf-border);
    border-radius: var(--tf-radius);
    box-shadow: var(--tf-shadow-sm);
    padding: 1.5rem;
    height: 100%;
}

.tf-card h3 {
    font-size: 1.2rem;
}

.tf-icon-circle {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.12);
    color: var(--tf-gold);
    margin-bottom: 1rem;
}

/* Karten "Für wen" – farbliche Akzentkante */
.tf-card-accent-blue {
    border-top: 3px solid var(--tf-blue);
}

.tf-card-accent-taupe {
    border-top: 3px solid var(--tf-taupe);
}

/* ---------- Info-Box ---------- */
.tf-infobox {
    background: #fff;
    border: 1px solid var(--tf-border);
    border-left: 4px solid var(--tf-gold);
    border-radius: var(--tf-radius);
    padding: 1.5rem;
    box-shadow: var(--tf-shadow-sm);
}

.tf-infobox ul {
    margin-bottom: 0;
    color: var(--tf-text-soft);
}

/* ---------- Prozess ---------- */
.tf-process-step {
    display: flex;
    gap: 1rem;
    background: var(--tf-white);
    border: 1px solid var(--tf-border);
    border-radius: var(--tf-radius);
    padding: 1.5rem;
    height: 100%;
}

.tf-step-num {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--tf-blue);
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Über ThinkFlow ---------- */
.tf-portrait-wrap {
    border-radius: var(--tf-radius-lg);
    overflow: hidden;
    box-shadow: var(--tf-shadow);
    background:
            linear-gradient(160deg, #e7e2d8 0%, #d9d3c6 100%);
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tf-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tf-portrait-fallback {
    color: var(--tf-taupe);
    text-align: center;
    padding: 1.5rem;
    font-weight: 600;
}

/* ---------- FAQ ---------- */
.tf-faq-item {
    border: 1px solid var(--tf-border);
    border-radius: var(--tf-radius);
    background: var(--tf-white);
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.tf-faq-trigger {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 1.1rem 1.25rem;
    font-weight: 700;
    color: var(--tf-blue);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 1.05rem;
    cursor: pointer;
}

.tf-faq-trigger .tf-faq-chevron {
    flex: 0 0 auto;
    color: var(--tf-gold);
    transition: transform 0.2s ease;
}

.tf-faq-trigger[aria-expanded="true"] .tf-faq-chevron {
    transform: rotate(180deg);
}

.tf-faq-panel {
    padding: 0 1.25rem 1.25rem;
    color: var(--tf-text-soft);
}

/* Reine CSS-FAQ via <details> als no-JS Fallback ist hier nicht nötig,
   da wir <details>/<summary> nutzen, die ohne JS funktionieren. */
details.tf-faq-item > summary {
    list-style: none;
}

details.tf-faq-item > summary::-webkit-details-marker {
    display: none;
}

details.tf-faq-item[open] .tf-faq-chevron {
    transform: rotate(180deg);
}

/* ---------- Kontaktformular ---------- */
.tf-form-card {
    background: var(--tf-white);
    border: 1px solid var(--tf-border);
    border-radius: var(--tf-radius-lg);
    box-shadow: var(--tf-shadow);
    padding: 1.75rem;
}

.tf-form-card label {
    font-weight: 600;
    color: var(--tf-blue);
    margin-bottom: 0.3rem;
}

.tf-form-card .form-control,
.tf-form-card .form-select {
    border-color: var(--tf-border);
    border-radius: 0.6rem;
    padding: 0.7rem 0.85rem;
    font-size: 1rem;
}

.tf-form-card .form-control:focus,
.tf-form-card .form-select:focus {
    border-color: var(--tf-grayblue);
}

.tf-required {
    color: var(--tf-bordeaux);
}

.tf-form-note {
    font-size: 0.9rem;
    color: var(--tf-text-soft);
}

.validation-message,
.tf-validation {
    color: var(--tf-bordeaux);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.tf-form-success {
    background: rgba(15, 44, 89, 0.05);
    border: 1px solid var(--tf-border);
    border-left: 4px solid var(--tf-gold);
    border-radius: var(--tf-radius);
    padding: 1rem 1.25rem;
    color: var(--tf-blue);
    font-weight: 600;
}

/* ---------- Final CTA ---------- */
.tf-final {
    background: linear-gradient(160deg, #14366b 0%, var(--tf-blue) 100%);
    color: #fff;
}

.tf-final h2 {
    color: #fff;
}

.tf-final p {
    color: #dde3ee;
}

/* ---------- Footer ---------- */
.tf-footer {
    background: var(--tf-blue);
    color: #d7deea;
    padding: 2.5rem 0 1.75rem;
}

.tf-footer h2,
.tf-footer .tf-footer-brand {
    color: #fff;
    font-weight: 700;
}

.tf-footer a {
    color: #e7ecf4;
    text-decoration: none;
}

.tf-footer a:hover,
.tf-footer a:focus {
    color: #fff;
    text-decoration: underline;
}

.tf-footer-keywords {
    color: #aeb9cc;
    font-size: 0.9rem;
}

/* ---------- Accessibility-Button + Panel ---------- */
.tf-a11y-toggle {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--tf-blue);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 2rem;
    padding: 0.6rem 1rem;
    font-weight: 600;
    box-shadow: var(--tf-shadow);
    cursor: pointer;
}

.tf-a11y-toggle:hover,
.tf-a11y-toggle:focus {
    background: #14366b;
    color: #fff;
}

.tf-a11y-panel {
    position: fixed;
    right: 1rem;
    bottom: 4.25rem;
    z-index: 1041;
    width: min(20rem, calc(100vw - 2rem));
    background: var(--tf-white);
    border: 1px solid var(--tf-border);
    border-radius: var(--tf-radius);
    box-shadow: var(--tf-shadow);
    padding: 1.25rem;
}

.tf-a11y-panel[hidden] {
    display: none;
}

.tf-a11y-panel h2 {
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
}

.tf-a11y-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.tf-a11y-option label {
    font-weight: 600;
    color: var(--tf-blue);
    margin: 0;
}

/* Mind. 44px Touch-Targets */
.tf-touch {
    min-height: 44px;
    min-width: 44px;
}

/* ===========================================================
   Barrierefreiheitsmodus (per Klasse auf <html>)
   =========================================================== */

/* Grössere Schrift */
html.tf-large-text {
    font-size: 118%;
}

/* Hoher Kontrast */
html.tf-high-contrast,
html.tf-high-contrast body {
    background: #ffffff;
    color: #000000;
}

html.tf-high-contrast {
    --tf-text: #000000;
    --tf-text-soft: #1a1a1a;
    --tf-bg: #ffffff;
    --tf-border: #000000;
}

html.tf-high-contrast p,
html.tf-high-contrast li,
html.tf-high-contrast .tf-section-intro,
html.tf-high-contrast .tf-hero-lead,
html.tf-high-contrast .tf-form-note {
    color: #1a1a1a;
}

html.tf-high-contrast .tf-card,
html.tf-high-contrast .tf-segment-card,
html.tf-high-contrast .tf-faq-item,
html.tf-high-contrast .tf-form-card,
html.tf-high-contrast .tf-process-step,
html.tf-high-contrast .tf-infobox {
    border: 2px solid #000000;
    box-shadow: none;
    background: #ffffff;
}

html.tf-high-contrast .tf-segment-blue,
html.tf-high-contrast .tf-final,
html.tf-high-contrast .tf-footer {
    background: #0a1f3f;
    color: #ffffff;
}

html.tf-high-contrast .btn-cta {
    background: #5a2639;
    border-color: #000;
    color: #fff;
}

/* Animationen reduzieren (per Schalter oder Systemeinstellung) */
html.tf-reduce-motion,
html.tf-reduce-motion * {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .tf-nav .nav-link {
        padding: 0.65rem 0.5rem;
    }
}

@media (min-width: 992px) {
    .tf-section {
        padding: 5rem 0;
    }

    .tf-hero {
        padding: 5rem 0 4rem;
    }
}