/* =========================================================
   FCT Financial Consulting Teke GmbH – Theme auf Bootstrap 5.3
   Schriften und Bootstrap liegen lokal (keine externen CDNs, DSGVO-freundlich)
   ========================================================= */

/* ---------- Schriften (lokal) ---------- */
@font-face{font-family:"Bricolage Grotesque";font-weight:500;font-display:swap;src:url(../fonts/bricolage-grotesque-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:700;font-display:swap;src:url(../fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:400;font-display:swap;src:url(../fonts/source-sans-3-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:600;font-display:swap;src:url(../fonts/source-sans-3-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

/* ---------- Design-Tokens ---------- */
:root{
  /* Finanz-Palette: Schwarz + Gold (#C28338) auf Weiß */
  --fct-bg:#ffffff;
  --fct-alt:#f6f6f4;          /* abgesetzte Sektionen */
  --fct-surface:#ffffff;
  --fct-ink:#0b0b0c;          /* Schwarz */
  --fct-muted:#5b5e66;        /* Grafit */
  --fct-line:#e3e3e0;
  --fct-accent:#0b0b0c;       /* Hauptaktion: Schwarz */
  --fct-accent-2:#c28338;     /* Hover/Akzent: Gold */
  --fct-gold:#c28338;
  --fct-gold-text:#93611f;    /* Gold für kleine Schrift auf Weiß (Kontrast ≥ 4.5:1) */
  --fct-soft:#f8f1e7;         /* heller Goldton für Flächen */
  --fct-brass:#93611f;
  --fct-dark:#0b0b0c;
  --fct-navy:#1b2433;         /* Finanz-Blau für Details */

  --f-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --f-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  --bs-body-bg:var(--fct-bg);
  --bs-body-color:var(--fct-ink);
  --bs-body-font-family:var(--f-body);
  --bs-body-font-size:1.0625rem;
  --bs-body-line-height:1.65;
  --bs-link-color:var(--fct-ink);
  --bs-link-color-rgb:11,11,12;
  --bs-link-hover-color:var(--fct-gold-text);
  --bs-border-color:var(--fct-line);
  --bs-border-radius:.75rem;
  --bs-border-radius-lg:1.25rem;
  --bs-primary:var(--fct-ink);
  --bs-primary-rgb:11,11,12;
  --bs-secondary-color:var(--fct-muted);
}

body{background:var(--fct-bg);color:var(--fct-ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.display-font{font-family:var(--f-display);font-weight:700;letter-spacing:-.015em;line-height:1.08;text-wrap:balance}
.lead{color:var(--fct-muted);font-size:1.2rem}
.text-muted-fct{color:var(--fct-muted)!important}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.eyebrow{font:500 .76rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fct-brass);display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.eyebrow::before{content:"";width:1.6rem;height:1px;background:currentColor}
.section{padding-block:clamp(4rem,9vw,7rem)}
.section-title{font-size:clamp(2rem,4.2vw,3.1rem)}
.skip-link{position:absolute;left:1rem;top:-3rem;z-index:2000;background:var(--fct-accent);color:#fff;padding:.5rem 1rem;border-radius:.5rem}
.skip-link:focus{top:1rem}
:focus-visible{outline:3px solid var(--fct-accent-2)!important;outline-offset:3px}

/* ---------- Buttons ---------- */
.btn{--bs-btn-font-weight:600;--bs-btn-padding-x:1.35rem;--bs-btn-padding-y:.8rem;border-radius:999px;transition:transform .25s ease,background-color .25s ease,box-shadow .25s ease}
.btn-fct{--bs-btn-bg:var(--fct-ink);--bs-btn-border-color:var(--fct-ink);--bs-btn-color:#fff;--bs-btn-hover-bg:var(--fct-gold);--bs-btn-hover-border-color:var(--fct-gold);--bs-btn-hover-color:#0b0b0c;--bs-btn-active-bg:var(--fct-accent);--bs-btn-active-color:#fff}
.btn-fct-outline{--bs-btn-color:var(--fct-ink);--bs-btn-border-color:var(--fct-line);--bs-btn-hover-bg:var(--fct-surface);--bs-btn-hover-border-color:var(--fct-gold);--bs-btn-hover-color:var(--fct-ink)}
.btn:hover{transform:translateY(-2px)}
.btn .arrow{transition:transform .25s ease;display:inline-block}
.btn:hover .arrow{transform:translateX(4px)}

/* ---------- Navigation ---------- */
.navbar-fct{background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s ease,padding .3s ease;padding-block:1rem}
.navbar-fct.is-scrolled{border-bottom-color:var(--fct-line);padding-block:.55rem}
.navbar-brand{display:flex;align-items:center;gap:.7rem;font-family:var(--f-display);font-weight:700;color:var(--fct-ink)}
.navbar-brand img{width:42px;height:42px}
.navbar-brand small{display:block;font:400 .78rem/1.1 var(--f-body);color:var(--fct-muted)}
.navbar-fct .nav-link{color:var(--fct-ink);font-weight:600;position:relative;padding-inline:.9rem!important}
.navbar-fct .nav-link::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:.3rem;height:2px;background:var(--fct-gold);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.navbar-fct .nav-link:hover::after,.navbar-fct .nav-link.active::after{transform:scaleX(1)}

/* ---------- Bilder (quadratisch, Platzhalter austauschbar) ---------- */
.img-sq{aspect-ratio:1/1;width:100%;max-width:100%;height:auto;object-fit:cover;display:block}
.img-frame{overflow:hidden;border-radius:var(--bs-border-radius-lg);background:var(--fct-soft)}
.img-frame img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.img-frame:hover img{transform:scale(1.04)}

/* ---------- Hero ---------- */
.hero{padding-top:clamp(7.5rem,14vw,10rem);padding-bottom:clamp(3.5rem,7vw,6rem)}
.hero h1{font-size:clamp(2.6rem,6.4vw,5rem)}
.hero h1 .accent{color:var(--fct-gold)}
.hero-media{position:relative}
.hero-badge{position:absolute;left:-1rem;bottom:1.5rem;background:var(--fct-surface);border:1px solid var(--fct-line);border-radius:1rem;padding:.9rem 1.1rem;box-shadow:0 18px 40px -20px rgba(11,11,12,.35);display:flex;align-items:center;gap:.8rem;max-width:calc(100% - 1rem)}
.hero-badge .dot{width:.6rem;height:.6rem;border-radius:50%;background:#c28338;flex:none;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(194,131,56,.45)}50%{box-shadow:0 0 0 8px rgba(194,131,56,0)}}
@media (max-width:575.98px){.hero-badge{left:.75rem;bottom:.75rem}}

/* ---------- Auf einen Blick (AI-Overview-Box) ---------- */
.overview{background:var(--fct-surface);border:1px solid var(--fct-line);border-radius:var(--bs-border-radius-lg);padding:clamp(1.5rem,3vw,2.25rem)}
.overview dl{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
.overview dt{font:500 .74rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fct-brass);margin-bottom:.5rem}
.overview dd{margin:0;font-weight:600;min-width:0;overflow-wrap:anywhere}
@media (max-width:991.98px){.overview dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479.98px){.overview dl{grid-template-columns:1fr}}

/* ---------- Leistungen ---------- */
.service-card{background:var(--fct-surface);border:1px solid var(--fct-line);border-radius:var(--bs-border-radius-lg);overflow:hidden;height:100%;display:flex;flex-direction:column;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.service-card:hover{transform:translateY(-6px);box-shadow:0 28px 50px -30px rgba(11,11,12,.45);border-color:transparent}
.service-card .img-frame{border-radius:0}
.service-card .body{padding:1.5rem 1.5rem 1.75rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.service-card h3{font-size:1.35rem;margin:0}
.service-card p{color:var(--fct-muted);margin:0}
.tag{font:500 .72rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fct-gold-text)}

/* ---------- Über uns ---------- */
.person-card{background:var(--fct-soft);border-radius:var(--bs-border-radius-lg);padding:1.25rem;display:flex;gap:1.1rem;align-items:center}
.person-card img{width:96px;height:96px;border-radius:.9rem;object-fit:cover;flex:none}
.check-list{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.check-list li{display:flex;gap:.7rem;align-items:flex-start}
.check-list svg{flex:none;margin-top:.3rem;color:var(--fct-gold)}

/* ---------- Ablauf ---------- */
.step{border-top:2px solid var(--fct-line);padding-top:1.25rem;height:100%;position:relative}
.step::before{content:"";position:absolute;top:-2px;left:0;height:2px;width:0;background:var(--fct-gold);transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.step.is-visible::before{width:100%}
.step .num{font:500 .85rem/1 var(--f-mono);color:var(--fct-brass)}
.step h3{font-size:1.3rem;margin:.75rem 0 .5rem}
.step p{color:var(--fct-muted);margin:0}

/* ---------- Galerie ---------- */
.gallery figure{margin:0}
.gallery figcaption{font-size:.9rem;color:var(--fct-muted);margin-top:.6rem}

/* ---------- FAQ ---------- */
.accordion{--bs-accordion-bg:var(--fct-surface);--bs-accordion-border-color:var(--fct-line);--bs-accordion-btn-focus-box-shadow:0 0 0 .2rem rgba(194,131,56,.35);--bs-accordion-active-bg:var(--fct-soft);--bs-accordion-active-color:var(--fct-ink);--bs-accordion-border-radius:1rem;--bs-accordion-inner-border-radius:1rem}
.accordion-button{font-family:var(--f-display);font-weight:700;font-size:1.1rem}
.accordion-body{color:var(--fct-muted)}

/* ---------- Kontakt ---------- */
.contact-panel{background:var(--fct-dark);color:#ececec;border-radius:var(--bs-border-radius-lg);padding:clamp(1.75rem,4vw,3rem);height:100%}
.contact-panel h2{color:#fff}
.contact-panel .lead{color:#a7a9ae}
.contact-item{display:flex;gap:1rem;padding-block:1rem;border-top:1px solid rgba(255,255,255,.12)}
.contact-item .label{font:500 .72rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#c28338;margin-bottom:.4rem}
.contact-item a,.contact-item address{color:#fff;text-decoration:none;font-style:normal;margin:0}
.contact-item a:hover{color:#d9a566}
.btn-copy{background:transparent;border:1px solid rgba(255,255,255,.25);color:#d6d6d6;border-radius:999px;font-size:.78rem;padding:.25rem .7rem;margin-left:.5rem}
.btn-copy:hover{border-color:#d9a566;color:#d9a566}

/* ---------- Impressum ---------- */
.ledger{width:100%;border-collapse:collapse}
.ledger th,.ledger td{padding:.8rem 0;border-bottom:1px solid var(--fct-line);vertical-align:top;text-align:left}
.ledger th{width:36%;font-weight:600;color:var(--fct-muted);padding-right:1rem}
.ledger td{font-family:var(--f-mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--fct-line);padding-block:2.5rem;color:var(--fct-muted);font-size:.95rem}
.footer a{color:var(--fct-muted);text-decoration:none}
.footer a:hover{color:var(--fct-gold-text)}
.to-top{position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));width:46px;height:46px;border-radius:50%;border:0;background:var(--fct-ink);color:#fff;display:grid;place-items:center;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s ease,transform .3s ease;z-index:1030}
.to-top.show{opacity:1;transform:none;pointer-events:auto}

/* ---------- Minimalistische Scroll-Animationen ----------
   Inhalte sind ohne JS sichtbar; nur mit .js-Klasse wird animiert. */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .reveal.is-visible{opacity:1;transform:none}
.js .reveal-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .reveal-img.is-visible{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal,.js .reveal-img{opacity:1;transform:none;clip-path:none}
}

/* Kein horizontales Scrollen auf Mobilgeräten (große Bootstrap-Gutter) */
html,body{overflow-x:clip}
.container{padding-inline:max(1rem,calc(var(--bs-gutter-x) * .5))}
@media (max-width:575.98px){.row.g-5{--bs-gutter-x:1.5rem}}

/* ===== Logo-Bereiche ===== */
.hero-logo{width:100%;max-width:440px;aspect-ratio:1/1;margin-inline:auto;position:relative}
.hero-logo img{width:100%;height:100%;display:block;object-fit:contain}
.hero-logo::before{content:"";position:absolute;inset:-6%;border:1px solid var(--fct-gold);border-radius:1.5rem;opacity:.45;transform:rotate(-3deg);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.hero-logo:hover::before{transform:rotate(0)}
.hero .gold-rule{width:4rem;height:3px;background:var(--fct-gold);border:0;opacity:1;margin:1.5rem 0}
.footer-logo{width:56px;height:56px}
.footer .brand-name{font-family:var(--f-display);font-weight:700;color:var(--fct-ink)}
.section-alt{background:var(--fct-alt)}
.overview-photo{height:100%}
.overview-photo img{height:100%;min-height:100%}
@media (max-width:991.98px){.hero-logo{max-width:300px}}
.overview dl{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:479.98px){.overview dl{grid-template-columns:1fr}}

/* =========================================================
   v2.0 – PHP-Version: Unterseiten + stärker sichtbares Logo
   ========================================================= */

/* ---------- Header: größeres Logo ---------- */
.navbar-brand .brand-logo{width:64px;height:64px;transition:width .3s ease,height .3s ease}
.navbar-fct.is-scrolled .brand-logo{width:50px;height:50px}
.navbar-brand .brand-text{font-size:1.15rem;line-height:1.15}
.navbar-brand .brand-text small{font-size:.8rem;margin-top:.15rem}
@media (max-width:399.98px){.navbar-brand .brand-text{font-size:1rem}.navbar-brand .brand-logo{width:52px;height:52px}}
.dropdown-menu-fct{--bs-dropdown-border-color:var(--fct-line);--bs-dropdown-border-radius:1rem;--bs-dropdown-link-active-bg:var(--fct-soft);--bs-dropdown-link-active-color:var(--fct-ink);--bs-dropdown-link-hover-bg:var(--fct-soft);padding:.5rem;box-shadow:0 24px 48px -28px rgba(11,11,12,.35)}
.dropdown-menu-fct .dropdown-item{border-radius:.6rem;padding:.55rem .85rem}
.navbar-fct .dropdown-toggle::after{vertical-align:.2em}

/* ---------- Startseite: großes Logo ---------- */
.hero-logo-stage{position:relative;max-width:520px;margin-inline:auto;padding:6%}
.hero-logo-stage::before{content:"";position:absolute;inset:12% 0 0 12%;background:var(--fct-ink);border-radius:1.75rem}
.hero-logo-stage::after{content:"";position:absolute;inset:0 12% 12% 0;border:2px solid var(--fct-gold);border-radius:1.75rem}
.hero-logo{position:relative;z-index:1;aspect-ratio:1/1;max-width:100%;background:#fff;border-radius:1.25rem;padding:8%;box-shadow:0 40px 80px -40px rgba(11,11,12,.5);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hero-logo:hover{transform:translate(-6px,-6px)}
.hero-logo img{width:100%;height:100%;object-fit:contain;display:block}
@media (max-width:991.98px){.hero-logo-stage{max-width:340px}}
.hero-address{display:flex;align-items:center;gap:.6rem;color:var(--fct-muted);font-weight:600;margin:0}
.hero-address .dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--fct-gold);flex:none;animation:pulse 2.4s ease-in-out infinite}

/* ---------- Unterseiten-Kopf mit Logo ---------- */
.page-hero{padding-top:clamp(8rem,13vw,10rem);padding-bottom:clamp(2.5rem,5vw,4rem);background:linear-gradient(180deg,var(--fct-alt) 0%,var(--fct-bg) 100%);border-bottom:1px solid var(--fct-line)}
.page-title{font-size:clamp(2.3rem,5vw,3.8rem)}
.page-hero-logo{width:min(100%,260px);aspect-ratio:1/1;margin-left:auto;background:#fff;border-radius:1.25rem;padding:9%;border:2px solid var(--fct-gold);box-shadow:16px 16px 0 0 var(--fct-ink)}
.page-hero-logo img{width:100%;height:100%;object-fit:contain;display:block}
.breadcrumb-fct{--bs-breadcrumb-divider-color:var(--fct-muted);--bs-breadcrumb-item-active-color:var(--fct-muted);font-size:.92rem;margin-bottom:1.5rem}
.breadcrumb-fct a{color:var(--fct-ink);text-decoration:none;font-weight:600}
.breadcrumb-fct a:hover{color:var(--fct-gold-text);text-decoration:underline}

/* ---------- Karten / Inhalte ---------- */
.service-card{position:relative}
.service-card .more{margin-top:auto;padding-top:.75rem;font-weight:600;color:var(--fct-ink)}
.service-card:hover .more .arrow{transform:translateX(4px)}
.service-card .more .arrow{display:inline-block;transition:transform .25s ease;color:var(--fct-gold)}
.value-card{background:var(--fct-surface);border:1px solid var(--fct-line);border-top:3px solid var(--fct-gold);border-radius:1rem;padding:1.75rem;height:100%}
.value-card h3{font-size:1.35rem;margin-bottom:.6rem}
.value-card p{color:var(--fct-muted)}
.audience{background:var(--fct-soft);border-radius:1rem;padding:1.25rem 1.4rem}
.legal-text{max-width:48rem}
.legal-text h2{font-size:1.35rem;margin:2rem 0 .75rem}

/* ---------- CTA-Band ---------- */
.cta-band{background:var(--fct-ink);color:#d9d9d9;border-radius:1.5rem;padding:clamp(1.75rem,4vw,3rem);display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.cta-band h2{color:#fff;font-size:clamp(1.6rem,3vw,2.2rem)}
.cta-band a:not(.btn){color:#fff}
.cta-logo{width:120px;height:120px;flex:none;background:#fff;border-radius:1rem;padding:12px;border:2px solid var(--fct-gold)}
.cta-logo img{width:100%;height:100%;object-fit:contain;display:block}
.cta-text{flex:1 1 18rem;min-width:0}
.btn-gold{--bs-btn-bg:var(--fct-gold);--bs-btn-border-color:var(--fct-gold);--bs-btn-color:#0b0b0c;--bs-btn-hover-bg:#fff;--bs-btn-hover-border-color:#fff;--bs-btn-hover-color:#0b0b0c;--bs-btn-active-bg:var(--fct-gold);--bs-btn-active-color:#0b0b0c}

/* ---------- Kontakt ---------- */
.contact-panel-logo{width:96px;height:96px;background:#fff;border-radius:1rem;padding:10px;margin-bottom:1.5rem;border:2px solid var(--fct-gold)}
.contact-panel-logo img{width:100%;height:100%;object-fit:contain;display:block}
.contact-panel h2{color:#fff}
.form-card{background:var(--fct-surface);border:1px solid var(--fct-line);border-radius:var(--bs-border-radius-lg);padding:clamp(1.5rem,3.5vw,2.5rem);height:100%}
.form-control,.form-select{border-radius:.7rem;padding:.75rem .9rem;border-color:#cfcfcb}
.form-control:focus,.form-select:focus,.form-check-input:focus{border-color:var(--fct-gold);box-shadow:0 0 0 .2rem rgba(194,131,56,.25)}
.form-check-input:checked{background-color:var(--fct-ink);border-color:var(--fct-ink)}
.form-label{font-weight:600}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Footer (schwarz, großes Logo) ---------- */
.site-footer{background:var(--fct-ink);color:#b9bbc0;padding-top:clamp(3.5rem,7vw,5.5rem);margin-top:clamp(3rem,6vw,5rem)}
.site-footer a{color:#e8e8e8;text-decoration:none}
.site-footer a:hover{color:var(--fct-gold)}
.footer-logo-tile{display:inline-block;width:132px;height:132px;background:#fff;border-radius:1.25rem;padding:12px;border:2px solid var(--fct-gold);transition:transform .4s ease}
.footer-brand:hover .footer-logo-tile{transform:translateY(-4px)}
.footer-logo-tile img{width:100%;height:100%;object-fit:contain;display:block}
.footer-name{font-family:var(--f-display);font-weight:700;color:#fff;font-size:1.15rem}
.footer-head{font:500 .76rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fct-gold);margin-bottom:1.1rem}
.footer-list{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.site-footer address{font-style:normal;color:#e8e8e8}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-block:1.5rem calc(1.5rem + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.9rem}

/* Fixes v2.0: lange deutsche Wörter */
h1,h2,h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.hero h1{font-size:clamp(2.4rem,4.6vw,4.3rem)}
.hero-logo::before{content:none}
@media (max-width:991.98px){.page-hero-logo{width:150px;margin-left:0;box-shadow:10px 10px 0 0 var(--fct-ink)}}