/* =============================================================
   Fidesa Finanz — Site-Konfiguration
   Projekt-spezifische Tokens, die NACH den Mockup-Stylesheets
   greifen und kundenspezifische Entscheidungen abbilden.
   ============================================================= */

/* ---------- Akzentfarbe ----------
   Vom Kunden gewaehlt: Orange (#e07b3a) — der V1-Default aus dem
   Claude-Design-Tweak-Panel. Mappt auf die im CSS verwendeten
   --ff-gold-*-Tokens; der Bezeichner "gold" bleibt im Mockup-CSS
   verbatim, der tatsaechliche Farbwert ist orange. */
:root {
  --ff-gold-300: #f0b48a;
  --ff-gold-500: #e07b3a;
  --ff-gold-600: #c4682c;
  --ff-gold-700: #a05420;
}

/* ---------- Section-Head: h1-Variante ----------
   Das Mockup-CSS stylet nur `.ff-section-head h2`. Unterseiten verwenden
   denselben Section-Head als Seiten-Intro mit `<h1>`. Hier spiegeln wir
   die Mockup-Regeln auf h1, damit die SectionHead-Komponente mit
   `level={1}` ohne Markup-Hack funktioniert. */
.ff-section-head h1 {
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ff-navy-900);
  text-wrap: balance;
  margin: 0;
}
.ff-section-head h1 em {
  font-family: inherit;
  font-style: normal;
  font-weight: 800;
  color: inherit;
  font-size: inherit;
}

/* ---------- Säulen: Stat am unteren Rand ausrichten ----------
   Mockup-CSS hat .ff-pillars als Grid (beide Säulen gleich hoch), aber
   .ff-pillar selbst war Block — bei unterschiedlich langen Absatztexten
   sitzen die zwei Stat-Blöcke auf verschiedenen Y-Positionen. Mit
   flex-column + margin-top:auto landet der Stat in jeder Säule am Fuß. */
.ff-pillar {
  display: flex;
  flex-direction: column;
}
.ff-pillar-stat {
  margin-top: auto;
}

/* ---------- Mobile-Sicherheitsnetz ----------
   Verhindert, dass ein einzelnes überlaufendes Element den ganzen
   Viewport horizontal scrollbar macht — iOS Safari schaltet sonst
   automatisch in Auto-Zoom-Out, damit der Overflow „passt", und das
   lässt alle eigentlich korrekt dimensionierten Elemente plötzlich
   viel zu groß wirken. `text-size-adjust: 100%` unterbindet zusätzlich
   die iOS-Auto-Font-Skalierung in bestimmten Szenarien.

   WICHTIG: `overflow-x: clip` statt `hidden` — `hidden` würde aus html/
   body einen Scroll-Container machen und damit `position: sticky` auf
   dem Header (.ff-header) brechen. `clip` schneidet den Overflow visuell
   gleich ab, etabliert aber keinen Scroll-Kontext — Sticky-Header
   funktioniert weiter. Browser-Support für `clip`: Chrome 90+, Firefox
   81+, Safari 15.4+ (universell ab 2022). */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body {
  overflow-x: clip;
}

/* ---------- Mobile-Overflow-Quellen aus dem Mockup-CSS gestopft ----------
   Drei Stellen aus styles.css haben kein Mobile-Sizing und reißen auf
   schmalen Viewports den Viewport (= Auto-Zoom-Out-Trigger): */

/* (1) .ff-hero-meta ist eine Flex-Row OHNE Wrap. Die lange Meta-Zeile
   („Fidesa Finanz GmbH · BRANDENBURG/HAVEL · POTSDAM · BERLIN · …") wird
   damit auf 600+ px Breite gestreckt. Auf Mobile umbrechen lassen. */
@media (max-width: 720px) {
  .ff-hero-meta {
    flex-wrap: wrap;
    gap: 8px 14px;
  }
}

/* (2a) .ff-hero-parallax hat im Mockup `height: clamp(640px, 92vh, 880px)`,
   im Refinement-Layer (styles-refined.css:60) zusätzlich
   `height: clamp(580px, 80vh, 760px) !important`. Die feste Mindest-
   höhe (580 px) ist für Mobile-Phones zu groß — Hero-Inhalt (Meta +
   Titel + Quote + 2 CTAs) ist mit Mockup-Padding > Viewport-Höhe.
   Auf Mobile löst sich die feste Höhe: der Hero wird genau so hoch
   wie sein Inhalt, Parallax-Background skaliert mit, Thread-Label
   bleibt absolut am Boden. `!important` hier nötig, weil der
   Refinement-Layer dieselbe Spezifität mit `!important` setzt — der
   einzige saubere Weg, das aufzuheben, ist `!important` + späterer
   Cascade-Eintrag (site-config.css läuft nach styles-refined.css). */
@media (max-width: 720px) {
  .ff-hero-parallax {
    height: auto !important;
  }
}

/* (2b) .ff-hero-parallax-inner hat `padding: 120px 40px 100px` ohne
   Mobile-Override — 80 px Side-Padding ist auf 390-px-Viewport zu viel. */
@media (max-width: 720px) {
  .ff-hero-parallax-inner {
    padding: 80px 24px 60px;
  }
}

/* (3) .ff-visualizer (Provisions-zu-Spende-Rechner in der Engagement-
   Sektion) hat `padding: 48px 56px` ohne Mobile-Override — 112 px Side-
   Padding schluckt auf Mobile praktisch den gesamten Inhalt. */
@media (max-width: 720px) {
  .ff-visualizer {
    padding: 32px 20px;
    gap: 32px;
  }
}

/* (4) .ff-header-inner hat `padding: 16px 40px` — auf Mobile 24 px reicht
   und passt zur restlichen .ff-section-Konvention. */
@media (max-width: 720px) {
  .ff-header-inner {
    padding: 16px 24px;
  }
}

/* (5) About-Sektion (Sektion 5 der Homepage): drei Probleme auf Mobile.
   - .ff-about-cred ist Flex-Row ohne Wrap mit 3 Items je 140 px Lbl-
     Breite → reißt auf < 500 px den Viewport. Auf ein selbst-
     organisierendes Grid umstellen (auto-fit minmax), passt sich
     automatisch an die Viewport-Breite an — kein zusätzlicher
     Breakpoint nötig (Konvention: nur 1080/720).
   - .ff-about-quote hat `clamp(28px, 2.8vw, 38px)` — 28 px Min ist auf
     390-px-Viewport in italic-Serif zu groß, drückt die Quote über den
     Rand. Min auf 20 px senken.
   - .ff-about-quote-mark mit 80 px Anführungszeichen ist auf Mobile
     unproportional. Auf 56 px reduzieren. */
@media (max-width: 720px) {
  .ff-about-quote {
    font-size: clamp(20px, 5vw, 28px);
  }
  .ff-about-quote-mark {
    font-size: 56px;
  }
  .ff-about-cred {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px 16px;
  }
  .ff-about-cred-item .lbl {
    max-width: none;
  }
}

/* (6) .ff-section.tight hat im Mockup `padding: 56px 40px` ohne Mobile-
   Override — bleibt damit bei 40 px Side-Padding auf 720-px-Phone (während
   die normale .ff-section per Mockup-Regel auf 24 px reduziert wird). */
@media (max-width: 720px) {
  .ff-section.tight {
    padding: 40px 24px;
  }
}

/* (7) Sektion 2 (Positioning + Pillars) — drei Mockup-Stellen ohne Mobile-
   Sizing:
   - .ff-positioning-copy h2 hat `clamp(34px, 3.6vw, 52px)` — Min 34 px ist
     für italic-bold-Headline auf 390-px-Viewport zu groß.
   - .ff-pillar hat `padding: 56px 48px 52px` — 96 px Side-Padding schluckt
     mehr als ¼ der Mobile-Breite.
   - .ff-pillar h3 ist `font-size: 30px` fix. */
@media (max-width: 720px) {
  .ff-positioning-copy h2 {
    font-size: clamp(24px, 6.5vw, 34px);
  }
  .ff-pillar {
    padding: 36px 24px 32px;
  }
  .ff-pillar h3 {
    font-size: 24px;
  }
}

/* (8) Sektion 3 (Services): .ff-service hat `padding: 36px 32px 32px` —
   in Kombination mit dem .ff-section-Mobile-Padding (24 px) sind das
   knapp 110 px Side-Verlust pro Card-Inhalt. */
@media (max-width: 720px) {
  .ff-service {
    padding: 28px 22px 26px;
  }
}

/* (9) Sektion 4 (Engagement-Visualizer-Result):
   - .ff-vis-result hat `padding: 40px 36px` ohne Mobile-Override.
   - .ff-vis-result-row ist Flex mit langem Name links und großer
     Tabular-Num rechts (28 px) — auf < 360 px wird die Zeile so eng,
     dass entweder die Num oder der Name den Container reißt. flex-wrap
     erlaubt sauberen Umbruch.
   - Num 28 px ist auf Mobile zu groß für die 2-spaltige Result-Row. */
@media (max-width: 720px) {
  .ff-vis-result {
    padding: 28px 22px;
  }
  .ff-vis-result-row {
    flex-wrap: wrap;
    gap: 4px;
    padding: 14px 0;
  }
  .ff-vis-result-row .num {
    font-size: 22px;
  }
}

/* (10) Sektion 8 (Kontakt-Form): .ff-form-stepbar hat 4 Steps in einer
   Reihe (`repeat(4, 1fr)`) ohne Mobile-Anpassung — auf Phone wird jeder
   Step ~70 px breit, Mono-Label „BESTÄTIGUNG" + Num kollidiert.
   2×2-Grid macht die Bar lesbar. */
@media (max-width: 720px) {
  .ff-form-stepbar {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 4px;
    margin-bottom: 24px;
  }
  .ff-form-step {
    padding: 10px 0 8px;
  }
}

/* (11) Sektion 8 (Kontakt-Aside): .ff-contact-aside hat `position: sticky;
   top: 100px` — sinnvoll auf Desktop-2-Spalten, sinnlos auf Mobile-Single-
   Column (Aside steht ohnehin in eigener Section unter dem Form). Sticky
   kann dort unter dem Header klemmen. */
@media (max-width: 1080px) {
  .ff-contact-aside {
    position: static;
    top: auto;
    padding: 32px 24px;
  }
}

/* (12) Card-Grid-Overflow durch lange Komposita (alle Breiten, nicht nur Mobile) ----------
   Mehrspaltige Mockup-Card-Grids (.ff-services-grid, .ff-usp, .ff-process,
   .ff-pillars) sind `repeat(N, 1fr)`. Ein 1fr-Track ist `minmax(auto, 1fr)`
   und kann nicht unter die min-content-Breite seines Inhalts schrumpfen. Lange
   deutsche Komposita (Finanzierungsvermittlung, Investorenvermittlung) setzen
   diese Untergrenze über den 1fr-Anteil, der Track weitet sich auf und die
   Card läuft über den Container hinaus, sichtbar vor allem im Fenster
   1080-1320 px, bevor der Grid auf eine Spalte bricht. `min-width: 0` erlaubt
   dem Track das Schrumpfen, `hyphens: auto` (Site ist lang="de") + overflow-wrap
   trennen das Wort sauber im jetzt schmaleren Card statt es überlaufen zu
   lassen. styles.css bleibt als Mockup-Foundation unangetastet, der Fix sitzt
   hier in der Override-Schicht. Page-scoped Card-Grids (z. B. .ff-fin-card,
   .ff-leistungen-tile) tragen denselben Guard in ihrem eigenen <style>-Block. */
.ff-service,
.ff-pillar,
.ff-process-step,
.ff-usp-item {
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ---------- Footer-Erweiterungen (Slice 2 Michael-Feedback) ----------
   Die Mockup-Foundation styled `.ff-footer*` in styles.css. Hier setzen wir
   die kundenspezifischen Ergänzungen oben drauf:
   - Brand-Mark-Reihe (Fidesa-Logo + LinkedIn-Pille nebeneinander)
   - Zentrierte Claim-Zeile zwischen Top und Bottom
   - Reg.-Block als gestyltes <dl> mit Eyebrow-Labels */

.ff-footer-brand-mark {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}
.ff-footer-brand .ff-footer-brand-mark img {
  height: 53px;
  margin-bottom: 0;
}

.ff-footer-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.06);
  transition: color 0.15s ease, background 0.15s ease;
}
.ff-footer-linkedin:hover,
.ff-footer-linkedin:focus-visible {
  color: var(--ff-gold-500);
  background: rgba(255, 255, 255, 0.1);
}
.ff-footer-linkedin svg {
  display: block;
}

.ff-footer-brand .legal-id {
  margin-top: 28px;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: normal;
  line-height: inherit;
  color: inherit;
  text-transform: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ff-footer-brand .legal-id-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ff-footer-brand .legal-id dt {
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
}
.ff-footer-brand .legal-id dd {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

/* Pos. 9 (2026-05-24): das §-Zeichen im Footer-Bottom-Link „Impressum (§ 5 DDG)"
   wirkt auf 12 px Schriftgröße tiefergestellt — die §-Glyphe sitzt in vielen
   Sans-Serif-Schnitten unterhalb der Cap-Höhe und liest sich daneben wie ein
   Subscript. `vertical-align: 1px` hebt das Zeichen auf optische Mittelhöhe
   neben der Versalziffer „5". Klasse nur an dieser einen Stelle gesetzt
   (kein globaler Selektor), damit Impressum/Aufsicht im Footer-Top und
   §-Zeichen auf anderen Seiten ihre bestehende Renderung behalten. */
.ff-paragraph-sign {
  vertical-align: 1px;
}

.ff-footer-claim {
  max-width: 1320px;
  margin: 0 auto;
  padding: 22px 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.ff-footer-claim span {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ff-gold-500);
  letter-spacing: 0.005em;
}
@media (max-width: 720px) {
  .ff-footer-claim {
    padding: 18px 24px;
  }
  .ff-footer-claim span {
    font-size: 16px;
  }
}

/* Footer-Credit: Hinweis auf den Ersteller der Website (Backlink mit
   Matomo-Kampagnen-Tracking). Eigenes Span, damit der Vermerk auf schmalen
   Screens umbrechen kann, ohne die Rechtslinks zu verdraengen. */
.ff-footer-credit a {
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.15s ease;
}
.ff-footer-credit a:hover {
  color: var(--ff-gold-300);
}
.ff-heart {
  color: var(--ff-gold-500);
  font-weight: 700;
}