/*
Theme Name:   FP-LIMS Child
Theme URI:    https://fp-lims.com
Description:  Child Theme für fp-lims.com — basierend auf Kadence Theme
Author:       Fink & Partner GmbH
Author URI:   https://fp-lims.com
Template:     kadence
Version:      1.8.8
Text Domain:  fp-lims-child
*/

/* ==========================================================================
   1. DESIGN TOKENS — alle Werte zentral hier ändern
   ========================================================================== */

:root {

  /* --- Primärfarben --- */
  --fp-navy:        #0A1F44;   /* Haupthintergrund, Header, dunkle Flächen   */
  --fp-blue:        #1A3A6B;   /* Sekundäre Flächen, Karten, Menübg          */
  --fp-red:         #E30613;   /* Akzent, CTA-Buttons, [FP] im Logo          */
  --fp-teal:        #0E7490;   /* Links, interaktive Elemente, Infografiken  */
  --fp-white:       #FFFFFF;

  /* --- Sekundärfarben --- */
  --fp-gray-light:  #F4F6F9;   /* Helle Sektionshintergründe, Karten         */
  --fp-gray-text:   #333333;   /* Fließtext auf hellem Grund                 */
  --fp-gray-mid:    #6B7280;   /* Subtexte, Metainfos                        */
  --fp-gray-border: #E2E8F0;   /* Trennlinien, Kartenborders                 */

  /* --- Status-Farben --- */
  --fp-green:       #16A34A;
  --fp-yellow:      #CA8A04;
  --fp-danger:      #DC2626;

  /* --- Typografie --- */
  --fp-font-primary:   'Inter', system-ui, -apple-system, sans-serif;
  --fp-font-display:   'Inter', system-ui, -apple-system, sans-serif;

  --fp-text-xs:    0.75rem;    /* 12px */
  --fp-text-sm:    0.875rem;   /* 14px */
  --fp-text-base:  1rem;       /* 16px */
  --fp-text-lg:    1.125rem;   /* 18px */
  --fp-text-xl:    1.25rem;    /* 20px */
  --fp-text-2xl:   1.5rem;     /* 24px */
  --fp-text-3xl:   1.875rem;   /* 30px */
  --fp-text-4xl:   2.25rem;    /* 36px */
  --fp-text-5xl:   3rem;       /* 48px */
  --fp-text-6xl:   3.75rem;    /* 60px */

  --fp-weight-normal:  400;
  --fp-weight-medium:  500;
  --fp-weight-semibold: 600;
  --fp-weight-bold:    700;

  --fp-leading-tight:  1.2;
  --fp-leading-normal: 1.6;
  --fp-leading-loose:  1.8;

  /* --- Spacing --- */
  --fp-space-1:   0.25rem;
  --fp-space-2:   0.5rem;
  --fp-space-3:   0.75rem;
  --fp-space-4:   1rem;
  --fp-space-5:   1.25rem;
  --fp-space-6:   1.5rem;
  --fp-space-8:   2rem;
  --fp-space-10:  2.5rem;
  --fp-space-12:  3rem;
  --fp-space-16:  4rem;
  --fp-space-20:  5rem;
  --fp-space-24:  6rem;
  --fp-space-32:  8rem;

  /* --- Layout --- */
  --fp-max-width:        1200px;
  --fp-max-width-narrow: 800px;
  --fp-max-width-wide:   1400px;

  /* --- Border Radius --- */
  --fp-radius-sm:   4px;
  --fp-radius-md:   8px;
  --fp-radius-lg:   12px;
  --fp-radius-xl:   16px;
  --fp-radius-full: 9999px;

  /* --- Shadows --- */
  --fp-shadow-sm:  0 1px 3px rgba(10, 31, 68, 0.08);
  --fp-shadow-md:  0 4px 12px rgba(10, 31, 68, 0.12);
  --fp-shadow-lg:  0 8px 24px rgba(10, 31, 68, 0.16);
  --fp-shadow-xl:  0 16px 48px rgba(10, 31, 68, 0.20);

  /* --- Transitions --- */
  --fp-transition-fast:   150ms ease;
  --fp-transition-normal: 250ms ease;
  --fp-transition-slow:   400ms ease;
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--fp-font-primary);
  font-size: var(--fp-text-base);
  font-weight: var(--fp-weight-normal);
  line-height: var(--fp-leading-normal);
  color: var(--fp-gray-text);
  background-color: var(--fp-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--fp-teal);
  text-decoration: none;
  transition: color var(--fp-transition-fast);
}

a:hover {
  color: var(--fp-navy);
}


/* ==========================================================================
   3. TYPOGRAFIE
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fp-font-display);
  font-weight: var(--fp-weight-bold);
  line-height: var(--fp-leading-tight);
  color: var(--fp-navy);
  margin-top: 0;
  margin-bottom: var(--fp-space-4);
}

h1 { font-size: clamp(var(--fp-text-3xl), 5vw, var(--fp-text-5xl)); }
h2 { font-size: clamp(var(--fp-text-2xl), 4vw, var(--fp-text-4xl)); }
h3 { font-size: clamp(var(--fp-text-xl),  3vw, var(--fp-text-3xl)); }
h4 { font-size: var(--fp-text-xl); }
h5 { font-size: var(--fp-text-lg); }
h6 { font-size: var(--fp-text-base); }

p {
  margin-top: 0;
  margin-bottom: var(--fp-space-4);
  line-height: var(--fp-leading-normal);
}

/* Überschriften auf dunklem Hintergrund */
.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.wp-block-kadence-rowlayout.is-dark h1,
.wp-block-kadence-rowlayout.is-dark h2,
.wp-block-kadence-rowlayout.is-dark h3 {
  color: var(--fp-white);
}

/* Label / Eyebrow Text */
.fp-eyebrow {
  font-size: var(--fp-text-sm);
  font-weight: var(--fp-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fp-red);
  display: block;
  margin-bottom: var(--fp-space-3);
}

/* Lead Text */
.fp-lead {
  font-size: var(--fp-text-lg);
  line-height: var(--fp-leading-loose);
  color: var(--fp-gray-mid);
}


/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

/* Primär Button (Rot / CTA) */
.fp-btn,
.wp-block-button__link,
.button,
a.button {
  display: inline-flex;
  align-items: center;
  gap: var(--fp-space-2);
  padding: var(--fp-space-3) var(--fp-space-6);
  font-family: var(--fp-font-primary);
  font-size: var(--fp-text-sm);
  font-weight: var(--fp-weight-semibold);
  letter-spacing: 0.02em;
  border-radius: var(--fp-radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--fp-transition-normal);
  text-decoration: none;
  white-space: nowrap;
}

/* Primär: Rot */
.fp-btn-primary,
.wp-block-button.is-style-fill .wp-block-button__link {
  background-color: var(--fp-red);
  color: var(--fp-white) !important;
  border-color: var(--fp-red);
}

.fp-btn-primary:hover,
.wp-block-button.is-style-fill .wp-block-button__link:hover {
  background-color: #c60511;
  border-color: #c60511;
  transform: translateY(-1px);
  box-shadow: var(--fp-shadow-md);
}

/* Sekundär: Outline auf dunklem Bg */
.fp-btn-outline,
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--fp-white) !important;
  border-color: rgba(255, 255, 255, 0.5);
}

.fp-btn-outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--fp-white);
  background-color: rgba(255, 255, 255, 0.1);
}

/* Ghost Button auf hellem Bg */
.fp-btn-ghost {
  background-color: transparent;
  color: var(--fp-navy) !important;
  border-color: var(--fp-gray-border);
}

.fp-btn-ghost:hover {
  border-color: var(--fp-navy);
  background-color: var(--fp-gray-light);
}

/* Button Größen */
.fp-btn-sm { padding: var(--fp-space-2) var(--fp-space-4); font-size: var(--fp-text-xs); }
.fp-btn-lg { padding: var(--fp-space-4) var(--fp-space-8); font-size: var(--fp-text-base); }


/* ==========================================================================
   5. HEADER & NAVIGATION
   ========================================================================== */

/* Hauptheader */
#masthead,
.site-header,
.kadence-header {
  background-color: var(--fp-navy) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: box-shadow var(--fp-transition-normal);
}

#masthead.scrolled,
.site-header.scrolled {
  box-shadow: 0 2px 20px rgba(10, 31, 68, 0.4);
}

/* Logo */
.site-branding a,
.header-logo-wrap a {
  display: flex;
  align-items: center;
}

/* Logo auf dunklem Hintergrund: Schwarz → Weiß invertieren
   Das Rot bleibt durch hue-rotate(0deg) erhalten */
.site-branding img,
.header-logo-wrap img,
.custom-logo {
  height: 36px;
  width: auto;
  filter: invert(1) hue-rotate(180deg);
}

/* Site-Title Text ausblenden wenn Logo-Bild vorhanden */
.site-branding .site-title {
  display: none;
}

/* Footer Logo */
.footer-logo img {
  height: 32px;
  width: auto;
  filter: invert(1) hue-rotate(180deg);
  margin-bottom: 12px;
}

/* Primäres Menü */
.main-navigation ul,
.kadence-navigation ul,
#primary-menu {
  display: flex;
  align-items: center;
  gap: var(--fp-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-navigation ul li a,
.kadence-navigation ul li a,
#primary-menu li a {
  display: block;
  padding: var(--fp-space-2) var(--fp-space-3);
  font-size: var(--fp-text-sm);
  font-weight: var(--fp-weight-medium);
  color: rgba(255, 255, 255, 0.85) !important;
  border-radius: var(--fp-radius-sm);
  transition: all var(--fp-transition-fast);
  white-space: nowrap;
}

.main-navigation ul li a:hover,
.kadence-navigation ul li a:hover,
#primary-menu li a:hover,
.main-navigation ul li.current-menu-item > a,
#primary-menu li.current-menu-item > a {
  color: var(--fp-white) !important;
  background-color: rgba(255, 255, 255, 0.08);
}

/* CTA im Menü */
.menu-item-cta > a,
.nav-cta > a {
  background-color: var(--fp-red) !important;
  color: var(--fp-white) !important;
  padding: var(--fp-space-2) var(--fp-space-4) !important;
  border-radius: var(--fp-radius-md) !important;
  font-weight: var(--fp-weight-semibold) !important;
}

.menu-item-cta > a:hover,
.nav-cta > a:hover {
  background-color: #c60511 !important;
  background-color: transparent !important;
}

/* Dropdown Menü */
.main-navigation ul .sub-menu,
.kadence-navigation ul .sub-menu {
  position: absolute;
  top: calc(100% + var(--fp-space-2));
  left: 0;
  min-width: 220px;
  background-color: var(--fp-white);
  border: 1px solid var(--fp-gray-border);
  border-radius: var(--fp-radius-lg);
  box-shadow: var(--fp-shadow-xl);
  padding: var(--fp-space-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--fp-transition-normal);
  z-index: 100;
}

.main-navigation ul li:hover > .sub-menu,
.kadence-navigation ul li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.main-navigation ul .sub-menu li a,
.kadence-navigation ul .sub-menu li a {
  color: var(--fp-gray-text) !important;
  font-size: var(--fp-text-sm);
  padding: var(--fp-space-2) var(--fp-space-3);
  border-radius: var(--fp-radius-sm);
}

.main-navigation ul .sub-menu li a:hover,
.kadence-navigation ul .sub-menu li a:hover {
  color: var(--fp-navy) !important;
  background-color: var(--fp-gray-light);
}

/* Sprachswitcher im Header */
.lang-switcher,
.polylang-switcher,
.pll-switcher {
  display: flex;
  align-items: center;
  gap: var(--fp-space-1);
  margin-left: var(--fp-space-4);
  padding-left: var(--fp-space-4);
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.lang-switcher a,
.polylang-switcher a {
  font-size: var(--fp-text-xs);
  font-weight: var(--fp-weight-semibold);
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6) !important;
  text-transform: uppercase;
  padding: var(--fp-space-1) var(--fp-space-2);
  border-radius: var(--fp-radius-sm);
  transition: all var(--fp-transition-fast);
}

.lang-switcher a:hover,
.lang-switcher a.current-lang,
.polylang-switcher a:hover,
.polylang-switcher a[aria-current] {
  color: var(--fp-white) !important;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Mobile Menu Toggle */
.menu-toggle,
.kadence-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--fp-space-2);
  color: var(--fp-white);
}

@media (max-width: 768px) {
  .menu-toggle,
  .kadence-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .main-navigation ul,
  .kadence-navigation ul {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    width: min(320px, 85vw);
    height: 100vh;
    background-color: var(--fp-navy);
    padding: var(--fp-space-16) var(--fp-space-6) var(--fp-space-6);
    gap: 0;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
    z-index: 1001;
  }

  .main-navigation.is-open ul,
  .kadence-navigation.is-open ul {
    display: flex;
  }

  .main-navigation ul li,
  .kadence-navigation ul li {
    width: 100%;
  }

  .main-navigation ul li a,
  .kadence-navigation ul li a {
    padding: var(--fp-space-3) var(--fp-space-4);
    font-size: var(--fp-text-base);
    border-radius: var(--fp-radius-md);
    color: rgba(255, 255, 255, 0.85) !important;
  }

  .main-navigation ul .sub-menu,
  .kadence-navigation ul .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background-color: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: var(--fp-radius-md);
    margin-top: var(--fp-space-1);
    margin-left: var(--fp-space-4);
  }

  .main-navigation ul .sub-menu li a,
  .kadence-navigation ul .sub-menu li a {
    color: rgba(255, 255, 255, 0.7) !important;
  }
}


/* ==========================================================================
   6. FOOTER
   ========================================================================== */

#colophon,
.site-footer,
.kadence-footer {
  background-color: var(--fp-navy);
  color: rgba(255, 255, 255, 0.75);
}

/* Footer oberer Bereich */
.footer-main {
  padding: var(--fp-space-16) 0 var(--fp-space-12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Footer Spalten */
.footer-widget-area,
.footer-columns {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--fp-space-12);
  max-width: var(--fp-max-width);
  margin: 0 auto;
  padding: 0 var(--fp-space-6);
}

@media (max-width: 1024px) {
  .footer-widget-area,
  .footer-columns {
    grid-template-columns: 1fr 1fr;
    gap: var(--fp-space-8);
  }
}

@media (max-width: 600px) {
  .footer-widget-area,
  .footer-columns {
    grid-template-columns: 1fr;
    gap: var(--fp-space-6);
  }
}

/* Footer Überschriften */
.footer-widget-area h3,
.footer-widget-area h4,
.widget-title,
.footer-heading {
  font-size: var(--fp-text-sm);
  font-weight: var(--fp-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fp-white) !important;
  margin-bottom: var(--fp-space-4);
}

/* Footer Logo Spalte */
.footer-brand p {
  font-size: var(--fp-text-sm);
  line-height: var(--fp-leading-loose);
  color: rgba(255, 255, 255, 0.6);
  max-width: 280px;
  margin-bottom: var(--fp-space-6);
}

/* Footer Badges (Zertifizierungen) */
.footer-badges {
  display: flex;
  gap: var(--fp-space-3);
  flex-wrap: wrap;
  margin-top: var(--fp-space-4);
}

.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--fp-space-2);
  padding: var(--fp-space-2) var(--fp-space-3);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--fp-radius-md);
  font-size: var(--fp-text-xs);
  font-weight: var(--fp-weight-medium);
  color: rgba(255, 255, 255, 0.7);
}

/* Footer Navigation Links */
.footer-widget-area ul,
.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fp-space-2);
}

.footer-widget-area ul li a,
.footer-nav ul li a {
  font-size: var(--fp-text-sm);
  color: rgba(255, 255, 255, 0.6) !important;
  transition: color var(--fp-transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--fp-space-2);
}

.footer-widget-area ul li a:hover,
.footer-nav ul li a:hover {
  color: var(--fp-white) !important;
}

/* Kontaktinfos im Footer */
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--fp-space-3);
  margin-bottom: var(--fp-space-3);
  font-size: var(--fp-text-sm);
  color: rgba(255, 255, 255, 0.6);
}

.footer-contact-item a {
  color: rgba(255, 255, 255, 0.6) !important;
}

.footer-contact-item a:hover {
  color: var(--fp-white) !important;
}

/* Footer Unterzeile */
.footer-bottom {
  padding: var(--fp-space-6) 0;
}

.footer-bottom-inner {
  max-width: var(--fp-max-width);
  margin: 0 auto;
  padding: 0 var(--fp-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--fp-space-4);
}

.footer-copyright {
  font-size: var(--fp-text-xs);
  color: rgba(255, 255, 255, 0.4);
}

.footer-legal-links {
  display: flex;
  gap: var(--fp-space-4);
}

.footer-legal-links a {
  font-size: var(--fp-text-xs);
  color: rgba(255, 255, 255, 0.4) !important;
  transition: color var(--fp-transition-fast);
}

.footer-legal-links a:hover {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Sprachswitcher im Footer */
.footer-lang-switcher {
  display: flex;
  gap: var(--fp-space-3);
}

.footer-lang-switcher a {
  font-size: var(--fp-text-xs);
  font-weight: var(--fp-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4) !important;
  transition: color var(--fp-transition-fast);
}

.footer-lang-switcher a:hover,
.footer-lang-switcher a.current-lang {
  color: var(--fp-white) !important;
}


/* ==========================================================================
   7. LAYOUT HILFSKLASSEN
   ========================================================================== */

/* Container */
.fp-container {
  max-width: var(--fp-max-width);
  margin: 0 auto;
  padding: 0 var(--fp-space-6);
}

.fp-container-narrow {
  max-width: var(--fp-max-width-narrow);
  margin: 0 auto;
  padding: 0 var(--fp-space-6);
}

/* Sektionen */
.fp-section {
  padding: var(--fp-space-20) 0;
}

.fp-section-sm {
  padding: var(--fp-space-12) 0;
}

.fp-section-lg {
  padding: var(--fp-space-32) 0;
}

/* Dark Section */
.fp-section-dark {
  background-color: var(--fp-navy);
  color: var(--fp-white);
}

.fp-section-dark h1,
.fp-section-dark h2,
.fp-section-dark h3,
.fp-section-dark h4 {
  color: var(--fp-white);
}

.fp-section-dark p {
  color: rgba(255, 255, 255, 0.75);
}

/* Mittelblaue Sektion */
.fp-section-blue {
  background-color: var(--fp-blue);
}

/* Hellgraue Sektion */
.fp-section-light {
  background-color: var(--fp-gray-light);
}

/* Grid Layouts */
.fp-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--fp-space-8); }
.fp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fp-space-6); }
.fp-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--fp-space-6); }

@media (max-width: 1024px) {
  .fp-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .fp-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .fp-grid-2,
  .fp-grid-3,
  .fp-grid-4 { grid-template-columns: 1fr; }
}


/* ==========================================================================
   8. KARTEN & CONTENT-KOMPONENTEN
   ========================================================================== */

/* Standard Karte */
.fp-card {
  background-color: var(--fp-white);
  border: 1px solid var(--fp-gray-border);
  border-radius: var(--fp-radius-xl);
  padding: var(--fp-space-8);
  transition: all var(--fp-transition-normal);
}

.fp-card:hover {
  box-shadow: var(--fp-shadow-lg);
  transform: translateY(-2px);
  border-color: rgba(10, 31, 68, 0.15);
}

/* Feature Card mit Icon */
.fp-feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--fp-space-4);
}

.fp-feature-icon {
  width: 48px;
  height: 48px;
  background-color: rgba(14, 116, 144, 0.1);
  border-radius: var(--fp-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fp-teal);
  flex-shrink: 0;
}

.fp-feature-card h3 {
  font-size: var(--fp-text-lg);
  margin-bottom: var(--fp-space-2);
}

.fp-feature-card p {
  font-size: var(--fp-text-sm);
  color: var(--fp-gray-mid);
  margin: 0;
}

/* Statistik / Zahl Karte */
.fp-stat-card {
  text-align: center;
  padding: var(--fp-space-8) var(--fp-space-6);
}

.fp-stat-number {
  font-size: var(--fp-text-5xl);
  font-weight: var(--fp-weight-bold);
  color: var(--fp-red);
  line-height: 1;
  display: block;
  margin-bottom: var(--fp-space-2);
}

.fp-stat-label {
  font-size: var(--fp-text-sm);
  color: rgba(255, 255, 255, 0.7);
}

/* Testimonial / Zitat */
.fp-testimonial {
  border-left: 3px solid var(--fp-red);
  padding-left: var(--fp-space-6);
}

.fp-testimonial blockquote {
  font-size: var(--fp-text-lg);
  font-style: italic;
  color: var(--fp-gray-text);
  line-height: var(--fp-leading-loose);
  margin: 0 0 var(--fp-space-4) 0;
}

.fp-testimonial cite {
  font-size: var(--fp-text-sm);
  font-weight: var(--fp-weight-semibold);
  font-style: normal;
  color: var(--fp-navy);
}

/* Prozessschritte */
.fp-process-step {
  position: relative;
  padding-left: var(--fp-space-16);
}

.fp-process-number {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background-color: var(--fp-red);
  color: var(--fp-white);
  font-weight: var(--fp-weight-bold);
  font-size: var(--fp-text-sm);
  border-radius: var(--fp-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ==========================================================================
   9. FORMULARE & INPUTS
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: var(--fp-space-3) var(--fp-space-4);
  font-family: var(--fp-font-primary);
  font-size: var(--fp-text-base);
  color: var(--fp-gray-text);
  background-color: var(--fp-white);
  border: 1.5px solid var(--fp-gray-border);
  border-radius: var(--fp-radius-md);
  transition: border-color var(--fp-transition-fast), box-shadow var(--fp-transition-fast);
  outline: none;
  -webkit-appearance: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--fp-teal);
  box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.15);
}

label {
  display: block;
  font-size: var(--fp-text-sm);
  font-weight: var(--fp-weight-medium);
  color: var(--fp-navy);
  margin-bottom: var(--fp-space-2);
}

/* Wpcf7 / Contact Form 7 Kompatibilität */
.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-email,
.wpcf7-form .wpcf7-tel,
.wpcf7-form .wpcf7-textarea {
  width: 100%;
  padding: var(--fp-space-3) var(--fp-space-4);
  border: 1.5px solid var(--fp-gray-border);
  border-radius: var(--fp-radius-md);
  font-family: var(--fp-font-primary);
  font-size: var(--fp-text-base);
  transition: border-color var(--fp-transition-fast);
}

.wpcf7-form .wpcf7-text:focus,
.wpcf7-form .wpcf7-email:focus {
  border-color: var(--fp-teal);
  outline: none;
}

.wpcf7-form input[type="submit"] {
  background-color: var(--fp-red);
  color: var(--fp-white);
  border: none;
  padding: var(--fp-space-3) var(--fp-space-6);
  font-family: var(--fp-font-primary);
  font-size: var(--fp-text-sm);
  font-weight: var(--fp-weight-semibold);
  border-radius: var(--fp-radius-md);
  cursor: pointer;
  transition: background-color var(--fp-transition-fast);
}

.wpcf7-form input[type="submit"]:hover {
  background-color: #c60511;
}


/* ==========================================================================
   10. KADENCE SPEZIFISCH — Block-Overrides
   ========================================================================== */

/* Kadence Row Layout */
.wp-block-kadence-rowlayout {
  margin: 0 !important;
}

/* Kadence Buttons */
.wp-block-kadence-advancedbtn .kt-btn-wrap a {
  font-family: var(--fp-font-primary) !important;
  font-weight: var(--fp-weight-semibold) !important;
  border-radius: var(--fp-radius-md) !important;
  transition: all var(--fp-transition-normal) !important;
}

/* Kadence Info Box */
.wp-block-kadence-infobox .kt-infobox-link-wrap {
  border-radius: var(--fp-radius-xl) !important;
  transition: all var(--fp-transition-normal) !important;
}

/* Kadence Tabs */
.wp-block-kadence-tabs .kt-tabs-title-list .kt-tab-title.kt-tab-title-active {
  color: var(--fp-navy) !important;
  border-bottom-color: var(--fp-red) !important;
}

/* Kadence Accordion */
.wp-block-kadence-accordion .kt-accordion-title {
  font-weight: var(--fp-weight-semibold) !important;
  color: var(--fp-navy) !important;
}


/* ==========================================================================
   11. POLYLANG — Sprachswitcher Styles
   ========================================================================== */

.pll-parent-menu-item > a,
.lang-item > a,
ul.pll-switcher li a {
  font-size: var(--fp-text-xs) !important;
  font-weight: var(--fp-weight-semibold) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.6) !important;
  padding: var(--fp-space-1) var(--fp-space-2) !important;
  border-radius: var(--fp-radius-sm) !important;
}

.pll-parent-menu-item > a:hover,
.lang-item > a:hover,
.lang-item-current > a,
ul.pll-switcher li.current-lang a {
  color: var(--fp-white) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Flag-Icons ausblenden falls nur Text-Switcher gewünscht */
/* .pll-parent-menu-item img { display: none; } */


/* ==========================================================================
   12. HILFREICH: BADGE, TAG, CHIP
   ========================================================================== */

.fp-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--fp-space-1) var(--fp-space-3);
  font-size: var(--fp-text-xs);
  font-weight: var(--fp-weight-semibold);
  border-radius: var(--fp-radius-full);
}

.fp-badge-red    { background-color: rgba(227, 6, 19, 0.1);  color: var(--fp-red);   }
.fp-badge-teal   { background-color: rgba(14, 116, 144, 0.1); color: var(--fp-teal);  }
.fp-badge-navy   { background-color: rgba(10, 31, 68, 0.08);  color: var(--fp-navy);  }
.fp-badge-green  { background-color: rgba(22, 163, 74, 0.1);  color: var(--fp-green); }


/* ==========================================================================
   13. SCROLL-ANIMATIONEN (Intersection Observer via JS aktiviert)
   ========================================================================== */

.fp-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fp-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fp-fade-in-delay-1 { transition-delay: 0.1s; }
.fp-fade-in-delay-2 { transition-delay: 0.2s; }
.fp-fade-in-delay-3 { transition-delay: 0.3s; }
.fp-fade-in-delay-4 { transition-delay: 0.4s; }


/* ==========================================================================
   14. UTILITY — Screenreader, Print, etc.
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media print {
  #masthead, #colophon { display: none; }
  body { font-size: 12pt; color: #000; }
}


/* ==========================================================================
   15. KADENCE FULL-WIDTH BREAKOUT — Lösung auf Basis echter DOM-Struktur
   
   Kadence DOM-Struktur:
   #wrapper → main.inner-wrap.wrap.kt-clear → #primary.content-area →
   .content-container.site-container → .content-wrap → article#post-X →
   .entry-content-wrap → .entry-content → .hero
   
   Der main.inner-wrap.wrap hat die max-width die alles begrenzt.
   ========================================================================== */

/* Body: overflow-x hidden damit 100vw nicht scrollt */
html, body {
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* HAUPT-CONTAINER: main.inner-wrap.wrap komplett aufheben auf Startseite */
body.is-homepage main.inner-wrap,
body.is-homepage main.wrap,
body.is-homepage .inner-wrap.wrap,
body.is-homepage main.kt-clear,
/* Gilt auch für alle FP-Custom-Pages (Branchen, Free-LIMS, Referenzen, usw.) */
body:has(.fp-page) main.inner-wrap,
body:has(.fp-page) main.wrap,
body:has(.fp-page) .inner-wrap.wrap,
body:has(.fp-page) main.kt-clear,
/* Greift auch wenn nur .fp-hero da ist (Startseite ohne is-homepage-Klasse) */
body:has(.fp-hero) main.inner-wrap,
body:has(.fp-hero) main.wrap,
body:has(.fp-hero) .inner-wrap.wrap,
body:has(.fp-hero) main.kt-clear,
/* SAFETY NET: greift auch bei Blog-Artikeln, deren äußerer <article>-Wrapper
   durch den Editor verschluckt wurde — solange .fp-post-hero im DOM ist. */
body:has(.fp-post-hero) main.inner-wrap,
body:has(.fp-post-hero) main.wrap,
body:has(.fp-post-hero) .inner-wrap.wrap,
body:has(.fp-post-hero) main.kt-clear,
/* SAFETY NET: gilt auf JEDER Seite die NICHT die Startseite ist */
body:not(.is-homepage) main.inner-wrap,
body:not(.is-homepage) main.wrap,
body:not(.is-homepage) .inner-wrap.wrap,
body:not(.is-homepage) main.kt-clear {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Alle Zwischen-Wrapper auf Startseite auflösen */
body.is-homepage #primary,
body.is-homepage .content-area,
body.is-homepage .content-container,
body.is-homepage .site-container,
body.is-homepage .content-wrap,
body.is-homepage article.post,
body.is-homepage article.page,
body.is-homepage .entry-content-wrap,
body.is-homepage .entry-content,
body.is-homepage .entry-content.single-content,
/* Gilt auch für alle FP-Custom-Pages */
body:has(.fp-page) #primary,
body:has(.fp-page) .content-area,
body:has(.fp-page) .content-container,
body:has(.fp-page) .site-container,
body:has(.fp-page) .content-wrap,
body:has(.fp-page) article.post,
body:has(.fp-page) article.page,
body:has(.fp-page) .entry-content-wrap,
body:has(.fp-page) .entry-content,
body:has(.fp-page) .entry-content.single-content,
/* Greift auch wenn nur .fp-hero da ist */
body:has(.fp-hero) #primary,
body:has(.fp-hero) .content-area,
body:has(.fp-hero) .content-container,
body:has(.fp-hero) .site-container,
body:has(.fp-hero) .content-wrap,
body:has(.fp-hero) article.post,
body:has(.fp-hero) article.page,
body:has(.fp-hero) .entry-content-wrap,
body:has(.fp-hero) .entry-content,
body:has(.fp-hero) .entry-content.single-content,
/* SAFETY NET: alle Nicht-Startseiten */
body:not(.is-homepage) #primary,
body:not(.is-homepage) .content-area,
body:not(.is-homepage) .content-container,
body:not(.is-homepage) .site-container,
body:not(.is-homepage) .content-wrap,
body:not(.is-homepage) article.post,
body:not(.is-homepage) article.page,
body:not(.is-homepage) .entry-content-wrap,
body:not(.is-homepage) .entry-content,
body:not(.is-homepage) .entry-content.single-content {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* WICHTIG: Auch vertikales Padding/Margin auf ALLEN Unterseiten auflösen,
   damit Page-Hero direkt unter dem Header klebt und Demo-CTA direkt
   am Footer endet. Greift sowohl für FP-Custom-Pages als auch für
   alle anderen Unterseiten. */
body:has(.fp-page) main.inner-wrap,
body:has(.fp-page) main.wrap,
body:has(.fp-page) main.kt-clear,
body:has(.fp-page) #primary,
body:has(.fp-page) .content-area,
body:has(.fp-page) .content-container,
body:has(.fp-page) .site-container,
body:has(.fp-page) .content-wrap,
body:has(.fp-page) article.post,
body:has(.fp-page) article.page,
body:has(.fp-page) .entry-content-wrap,
body:has(.fp-page) .entry-content,
body:has(.fp-page) .entry-header,
body:has(.fp-page) .entry-content.single-content,
/* Auch für Startseite mit .fp-hero */
body:has(.fp-hero) main.inner-wrap,
body:has(.fp-hero) main.wrap,
body:has(.fp-hero) main.kt-clear,
body:has(.fp-hero) #primary,
body:has(.fp-hero) .content-area,
body:has(.fp-hero) .content-container,
body:has(.fp-hero) .site-container,
body:has(.fp-hero) .content-wrap,
body:has(.fp-hero) article.post,
body:has(.fp-hero) article.page,
body:has(.fp-hero) .entry-content-wrap,
body:has(.fp-hero) .entry-content,
body:has(.fp-hero) .entry-header,
body:has(.fp-hero) .entry-content.single-content,
/* SAFETY NET für alle Unterseiten */
body:not(.is-homepage) main.inner-wrap,
body:not(.is-homepage) main.wrap,
body:not(.is-homepage) main.kt-clear,
body:not(.is-homepage) #primary,
body:not(.is-homepage) .content-area,
body:not(.is-homepage) .content-container,
body:not(.is-homepage) .site-container,
body:not(.is-homepage) .content-wrap,
body:not(.is-homepage) article.post,
body:not(.is-homepage) article.page,
body:not(.is-homepage) .entry-content-wrap,
body:not(.is-homepage) .entry-content,
body:not(.is-homepage) .entry-header,
body:not(.is-homepage) .entry-content.single-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Kadence-spezifische Element-Reset auf allen Unterseiten */
body:has(.fp-page) .entry-header,
body:has(.fp-page) .single-featured,
body:has(.fp-page) .above-entry-meta,
body:has(.fp-page) .below-entry-meta,
body:has(.fp-hero) .entry-header,
body:has(.fp-hero) .single-featured,
body:has(.fp-hero) .above-entry-meta,
body:has(.fp-hero) .below-entry-meta,
body:not(.is-homepage) .entry-header,
body:not(.is-homepage) .single-featured,
body:not(.is-homepage) .above-entry-meta,
body:not(.is-homepage) .below-entry-meta {
  display: none !important;
}

/* fp-main (unser eigener Main-Wrapper aus header.php) – kein Padding */
body:has(.fp-page) #fp-main,
body:has(.fp-page) .fp-main,
body:has(.fp-hero) #fp-main,
body:has(.fp-hero) .fp-main,
body:not(.is-homepage) #fp-main,
body:not(.is-homepage) .fp-main {
  padding: 0 !important;
  margin: 0 !important;
}

/* HERO und andere Full-Width-Sektionen erzwingen 100vw */
body.is-homepage .hero,
body.is-homepage .fp-fullwidth,
body.is-homepage .fp-section-dark,
body.is-homepage .fp-section-navy,
body.is-homepage .logos,
body.is-homepage .bento,
body.is-homepage .features,
body.is-homepage .process,
body.is-homepage .testimonials,
body.is-homepage .editions,
body.is-homepage .industries,
body.is-homepage .certs,
body.is-homepage .demo-cta {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Entry-content MUSS 100% width haben, sonst bricht der 100vw Trick */
body.is-homepage .entry-content,
body:has(.fp-page) .entry-content {
  overflow: visible !important;
}

/* ABSCHLUSS-FIX: fp-page-hero klebt direkt unter Header,
   Demo-CTA endet direkt am Footer – keine weißen Streifen mehr. */
body:has(.fp-page) .fp-page-hero {
  margin-top: 0 !important;
}

body:has(.fp-page) .fp-demo-cta {
  margin-bottom: 0 !important;
}

/* Falls Kadence dem .fp-page einen Wrapper-Border setzt: weg damit */
body:has(.fp-page) .entry-content > *:first-child,
body:has(.fp-page) article.page > *:first-child {
  margin-top: 0 !important;
}

body:has(.fp-page) .entry-content > *:last-child,
body:has(.fp-page) article.page > *:last-child {
  margin-bottom: 0 !important;
}

/* Kadence Content-Width-Fullwidth Modus unterstützen */
body.content-width-fullwidth main.inner-wrap,
body.content-width-fullwidth .content-container,
body.content-width-fullwidth .content-wrap,
body.content-width-fullwidth article,
body.content-width-fullwidth .entry-content-wrap,
body.content-width-fullwidth .entry-content {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Header: immer full width */
#masthead,
.site-header,
.site-header-wrap,
.site-header-inner-wrap {
  width: 100% !important;
  max-width: 100% !important;
}

/* Footer: immer full width */
#colophon,
.site-footer,
.site-footer-wrap {
  width: 100% !important;
  max-width: 100% !important;
}


/* ==========================================================================
   16. STARTSEITE — HERO SECTION
   Eingebettet als Custom HTML Block in Kadence
   ========================================================================== */

.fp-hero {
  width: 100%;
  min-height: calc(100svh - 72px); /* Header-Höhe abziehen */
  background: var(--fp-navy);
  display: grid;
  grid-template-columns: 1fr 420px;
  grid-template-rows: 3px 1fr auto;
  position: relative;
  overflow: hidden;
  color: #fff;
}

/* Auf kleineren Screens, wo Header schmaler ist */
@media (max-width: 860px) {
  .fp-hero {
    min-height: calc(100svh - 64px);
  }
}

/* Gitternetz-Textur im Hintergrund */
.fp-hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 72px 72px;
}

.fp-hero-topbar {
  grid-column: 1 / 3; grid-row: 1;
  background: linear-gradient(90deg, var(--fp-red) 0%, rgba(14,116,144,.8) 55%, transparent 100%);
}

.fp-hero-left {
  grid-column: 1; grid-row: 2;
  padding: 40px 64px 48px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; z-index: 1;
}

.fp-hero-context {
  display: flex; align-items: center; gap: 12px; margin-bottom: 24px;
}
.fp-hero-context-bar { width: 28px; height: 2px; background: var(--fp-red); }
.fp-hero-context span {
  font-size: 15px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}

.fp-hero-h1 {
  font-size: clamp(4rem, 7vw, 7.5rem);
  font-weight: 900; line-height: 1.0;
  letter-spacing: -.03em; color: #fff; margin: 0 0 32px;
}
.fp-hero-h1 .red { color: var(--fp-red); }
.fp-hero-h1 .dim { color: rgba(255,255,255,.28); -webkit-text-stroke: 1px rgba(255,255,255,.22); }

.fp-hero-sub {
  font-size: 20px; color: rgba(255,255,255,.7);
  line-height: 1.65; max-width: 620px; margin: 0 0 32px;
  border-left: 3px solid rgba(255,255,255,.15); padding-left: 22px;
}
.fp-hero-sub strong { color: rgba(255,255,255,.82); font-weight: 600; }

.fp-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }

.fp-btn-red {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--fp-red); color: #fff;
  font-size: 16px; font-weight: 700; letter-spacing: .01em;
  padding: 18px 38px; border-radius: 6px; border: 1px solid var(--fp-red);
  transition: all .22s cubic-bezier(.16,1,.3,1);
  text-decoration: none;
}
.fp-btn-red:hover {
  background: #c60511; border-color: #c60511;
  transform: translateY(-2px); box-shadow: 0 10px 28px rgba(227,6,19,.28);
  color: #fff;
}

.fp-btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--fp-navy);
  font-size: 16px; font-weight: 700;
  padding: 18px 38px; border-radius: 6px;
  border: 2px solid #fff;
  transition: all .22s cubic-bezier(.16,1,.3,1);
  text-decoration: none;
}
.fp-btn-ghost:hover {
  color: var(--fp-navy);
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}

.fp-hero-trust { display: flex; gap: 28px; flex-wrap: wrap; }
.fp-trust-pill {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 500; color: rgba(255,255,255,.6);
}
.fp-trust-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #16A34A; flex-shrink: 0; display: inline-block;
}

.fp-hero-right {
  grid-column: 2; grid-row: 1 / 4;
  background: rgba(0,0,0,.3);
  border-left: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column;
  position: relative; z-index: 1;
}

.fp-hero-right-inner {
  padding: 40px 36px 36px;
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.fp-hero-right-brand {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #fff;
  line-height: 1;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.fp-hero-right-label {
  font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.45); margin: 0 0 32px;
}

.fp-kpi {
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.fp-kpi:last-child { border-bottom: none; }

.fp-kpi-n {
  font-size: clamp(3rem, 3.6vw, 4rem); font-weight: 900;
  color: #fff; letter-spacing: -.03em; line-height: 1; display: block;
}
.fp-kpi-n em { color: var(--fp-red); font-style: normal; font-size: 70%; }
.fp-kpi-l {
  font-size: 16px; color: rgba(255,255,255,.6);
  margin-top: 8px; display: block; font-weight: 500;
  line-height: 1.4;
}

.fp-hero-demo-box { padding: 28px 36px; background: var(--fp-red); }
.fp-hero-demo-box strong {
  font-size: 19px; color: #fff; display: block;
  margin-bottom: 10px; font-weight: 700;
}
.fp-hero-demo-box p {
  font-size: 15px; color: rgba(255,255,255,.85);
  line-height: 1.55; margin: 0 0 20px;
}

.fp-hero-demo-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 3px;
  transition: border-color .2s;
  text-decoration: none;
}
.fp-hero-demo-link:hover { border-color: #fff; color: #fff; }

.fp-hero-bottom {
  grid-column: 1; grid-row: 3;
  padding: 24px 64px;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; gap: 32px;
  position: relative; z-index: 1; flex-wrap: wrap;
}
.fp-hero-bottom-label {
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.4); white-space: nowrap; flex-shrink: 0;
}
.fp-hero-bottom-sep {
  width: 1px; height: 18px; background: rgba(255,255,255,.12); flex-shrink: 0;
}
.fp-hero-cust {
  font-size: 15px; font-weight: 700; color: rgba(255,255,255,.5);
  letter-spacing: .02em; transition: color .2s;
}
.fp-hero-cust:hover { color: rgba(255,255,255,.65); }

/* Hero responsive */
@media (max-width: 1200px) {
  .fp-hero { grid-template-columns: 1fr 360px; }
  .fp-hero-left { padding: 80px 48px 60px; }
  .fp-hero-bottom { padding: 24px 48px; }
}

@media (max-width: 900px) {
  .fp-hero {
    grid-template-columns: 1fr;
    grid-template-rows: 3px 1fr auto auto;
  }
  .fp-hero-left { padding: 64px 20px 40px; grid-column: 1; }
  .fp-hero-h1 { font-size: 2.8rem; }
  .fp-hero-right {
    grid-column: 1; grid-row: 3;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,.07);
  }
  .fp-hero-right-inner { padding: 28px 20px; }
  .fp-hero-demo-box { padding: 24px 20px; }
  .fp-hero-bottom { grid-row: 4; padding: 16px 20px; gap: 16px; }
}


/* ==========================================================================
   17. STARTSEITE — BENTO (LIMS DEFINITION)
   Asymmetrisches Grid mit Navy/Rot/Teal Kacheln + 4 weiße Säulen
   ========================================================================== */

.fp-bento {
  padding: 120px 64px;
  background: var(--fp-gray-light);
}

.fp-bento-grid {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 16px;
}

.fp-tile {
  background: #fff;
  border-radius: 20px;
  padding: 36px;
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
  position: relative;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1);
}
.fp-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 56px rgba(10,31,68,.12);
}

/* Definitionskachel (groß, links) */
.fp-tile-def {
  grid-column: 1 / 8;
  grid-row: 1;
  background: var(--fp-navy);
  padding: 56px;
  border-color: var(--fp-navy);
}
.fp-tile-def .fp-def-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fp-red);
  margin-bottom: 20px;
  display: block;
}
.fp-tile-def h2 {
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 24px;
  letter-spacing: -.02em;
}
.fp-tile-def p {
  font-size: 17px;
  color: rgba(255,255,255,.65);
  line-height: 1.7;
  margin: 0;
}
.fp-tile-def p strong {
  color: rgba(255,255,255,.95);
  font-weight: 600;
}

/* Stat-Kachel (Mitte) */
.fp-tile-stat {
  grid-column: 8 / 12;
  grid-row: 1;
  background: var(--fp-red);
  border-color: var(--fp-red);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.fp-big-num {
  font-size: clamp(4rem, 5.5vw, 6.5rem);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -.04em;
  margin-bottom: 12px;
}
.fp-big-num em {
  font-style: normal;
  opacity: .6;
  font-size: 60%;
}
.fp-big-label {
  font-size: 15px;
  color: rgba(255,255,255,.8);
  font-weight: 500;
  line-height: 1.4;
}

/* Zitat-Kachel (rechts) — Off-White mit rotem Namen und Navy-Rahmen */
.fp-tile-quote {
  grid-column: 12 / 17;
  grid-row: 1;
  background: var(--fp-gray-light);
  border: 2px solid var(--fp-navy);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fp-tile-quote blockquote {
  font-size: 18px;
  font-style: italic;
  color: var(--fp-gray-text);
  line-height: 1.55;
  margin: 0 0 20px;
  font-weight: 500;
}
.fp-tile-quote cite {
  font-size: 14px;
  font-style: normal;
  color: var(--fp-red);
  display: block;
  font-weight: 700;
  letter-spacing: .01em;
}

/* 4 Säulen-Kacheln */
.fp-tile-pillar {
  grid-column: span 4;
  grid-row: 2;
  padding: 36px;
}
.fp-pillar-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--fp-gray-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  color: var(--fp-teal);
}
.fp-p-num {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--fp-red);
  margin-bottom: 12px;
  display: block;
}
.fp-tile-pillar h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--fp-navy);
  margin: 0 0 10px;
  letter-spacing: -.01em;
}
.fp-tile-pillar p {
  font-size: 15px;
  color: var(--fp-gray-mid);
  line-height: 1.6;
  margin: 0;
}

/* Responsive */
@media (max-width: 1200px) {
  .fp-bento { padding: 100px 48px; }
  .fp-bento-grid { grid-template-columns: repeat(8, 1fr); }
  .fp-tile-def { grid-column: 1 / 9; }
  .fp-tile-stat { grid-column: 1 / 5; grid-row: 2; }
  .fp-tile-quote { grid-column: 5 / 9; grid-row: 2; }
  .fp-tile-pillar { grid-column: span 4; grid-row: auto; }
}

@media (max-width: 768px) {
  .fp-bento { padding: 80px 20px; }
  .fp-bento-grid { grid-template-columns: 1fr; }
  .fp-tile-def,
  .fp-tile-stat,
  .fp-tile-quote,
  .fp-tile-pillar {
    grid-column: 1;
    grid-row: auto;
  }
  .fp-tile-def { padding: 40px 28px; }
  .fp-tile { padding: 28px; }
}


/* ==========================================================================
   18. STARTSEITE — VORTEILE / FEATURES
   3-spaltiges Grid mit 6 Feature-Cards, roter Hover-Balken oben
   ========================================================================== */

.fp-features {
  padding: 120px 64px;
  background: #fff;
}

.fp-features-inner {
  max-width: 1600px;
  margin: 0 auto;
}

.fp-features-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 64px;
  flex-wrap: wrap;
  gap: 24px;
}

.fp-features-header h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--fp-navy);
  max-width: 720px;
  line-height: 1.15;
  margin: 0;
}

.fp-features-header p {
  font-size: 17px;
  color: var(--fp-gray-mid);
  max-width: 360px;
  line-height: 1.6;
  text-align: right;
  margin: 0;
}

.fp-features-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.fp-f-card {
  border: 1px solid var(--fp-gray-border);
  border-radius: 20px;
  padding: 40px 32px;
  position: relative;
  overflow: hidden;
  transition: all .3s cubic-bezier(.16,1,.3,1);
  background: #fff;
}

.fp-f-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--fp-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}

.fp-f-card:hover {
  border-color: transparent;
  box-shadow: 0 20px 60px rgba(10,31,68,.12);
  transform: translateY(-4px);
}

.fp-f-card:hover::before {
  transform: scaleX(1);
}

.fp-f-num {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--fp-gray-border);
  margin-bottom: 24px;
  display: block;
}

.fp-f-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--fp-navy);
  margin: 0 0 12px;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.fp-f-card p {
  font-size: 15px;
  color: var(--fp-gray-mid);
  line-height: 1.65;
  margin: 0 0 24px;
}

.fp-f-tag {
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  color: var(--fp-teal);
  background: rgba(14,116,144,.08);
  padding: 5px 12px;
  border-radius: 20px;
}

/* Responsive */
@media (max-width: 1200px) {
  .fp-features { padding: 100px 48px; }
  .fp-features-cards { grid-template-columns: repeat(2, 1fr); }
  .fp-features-header p { text-align: left; max-width: 100%; }
}

@media (max-width: 768px) {
  .fp-features { padding: 80px 20px; }
  .fp-features-cards { grid-template-columns: 1fr; gap: 16px; }
  .fp-features-header { margin-bottom: 40px; }
  .fp-f-card { padding: 32px 28px; }
}


/* ==========================================================================
   19. MARKENZEICHEN — Eckige Klammern [ ] IMMER in Corporate-Rot
   Verwendung: <span class="fp-br">[</span>FP<span class="fp-br">]</span>

   ⚠️ DAUERHAFTE REGEL: Diese Selektoren erzwingen Rot in JEDEM Kontext.
   Lösungsansatz: Attribut-Selektoren erhöhen die Spezifität, sodass keine
   Eltern-Regel mit color:#fff oder color:navy auf h1/h2/h3 die fp-br
   überschreiben kann.
   ========================================================================== */

/* Basis-Regel + Attribut-Verstärkung (Spezifität-Boost ohne lange Liste) */
.fp-br,
.fp-br *,
[class] .fp-br,
[class] [class] .fp-br,
[class] [class] [class] .fp-br,
[class] h1 .fp-br,
[class] h2 .fp-br,
[class] h3 .fp-br,
[class] h4 .fp-br,
[class] p .fp-br,
[class] span .fp-br,
[class] [class] h1 .fp-br,
[class] [class] h2 .fp-br,
[class] [class] h3 .fp-br,
[class] [class] p .fp-br,
[class] [class] span .fp-br,
body .fp-br,
body h1 .fp-br,
body h2 .fp-br,
body h3 .fp-br,
html body .fp-br,
html body h1 .fp-br,
html body h2 .fp-br,
html body h3 .fp-br,
html body p .fp-br,
html body span .fp-br {
  color: var(--fp-red) !important;
  font-weight: inherit !important;
}



/* ==========================================================================
   20. STARTSEITE — PROZESS TIMELINE
   6 Schritte horizontal auf Navy, Gradient-Linie verbindet die Kreise
   ========================================================================== */

.fp-process {
  padding: 120px 64px;
  background: var(--fp-navy);
  overflow: hidden;
}

.fp-process-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.fp-process-header {
  margin-bottom: 72px;
}

.fp-kicker {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fp-gray-mid, #6B7280);
  margin-bottom: 18px;
  display: inline-block;
}

/* Auf dunklen Sektionen (Navy-Hintergrund) → Kicker hell */
.fp-hero .fp-kicker,
.fp-process .fp-kicker,
.fp-modules .fp-kicker,
.fp-case-hero .fp-kicker,
.fp-page-hero .fp-kicker,
.fp-demo-cta .fp-kicker,
.fp-branche-refs .fp-kicker,
.fp-career .fp-kicker,
.fp-history .fp-kicker {
  color: rgba(255,255,255,.55);
}

.fp-kicker .fp-br {
  margin: 0 6px;
}

.fp-process-header h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  max-width: 700px;
  line-height: 1.2;
  margin: 0;
}

/* ==========================================================================
   FP-PROCESS-ITEM - Custom-HTML-Blocks innerhalb von .fp-process (Navy)
   Verwendet auf Branchen-Seiten und Academy für 3-Spalten-Listen
   ========================================================================== */

.fp-process .fp-kicker .fp-br,
.fp-process .fp-process-item .fp-br,
.fp-process .fp-process-lead .fp-br {
  color: var(--fp-red) !important;
}

.fp-process-inner h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 12px 0 16px;
  max-width: 900px;
}

.fp-process-lead {
  font-size: 17px;
  color: rgba(255,255,255,.7);
  line-height: 1.6;
  margin: 0 0 40px;
  max-width: 820px;
}

.fp-process-lead strong { color: #fff; font-weight: 700; }
.fp-process-lead em { color: rgba(255,255,255,.85); font-style: italic; }

.fp-process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 16px;
}

.fp-process-item {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 32px 28px 28px;
  transition: all .3s;
}

.fp-process-item:hover {
  background: rgba(255,255,255,.06);
  border-color: var(--fp-red);
  transform: translateY(-4px);
}

.fp-process-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--fp-red);
  color: #fff;
  border-radius: 50%;
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 16px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.fp-process-item h3 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -.01em;
  line-height: 1.3;
  font-family: 'Inter', sans-serif;
}

.fp-process-item p {
  font-size: 14px;
  color: rgba(255,255,255,.7) !important;
  line-height: 1.6;
  margin: 8px 0;
}

.fp-process-item strong { color: #fff; font-weight: 600; }

.fp-process-item a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--fp-red);
  text-underline-offset: 3px;
  font-weight: 600;
}

@media (max-width: 1200px) {
  .fp-process-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .fp-process-grid { grid-template-columns: 1fr; }
}

/* Video-Wrap für eingebettete Videos in dunklen Sektionen */
.fp-video-wrap {
  margin: 32px auto 0;
  max-width: 1000px;
}

.fp-video-wrap video {
  display: block;
}

/* ==========================================================================
   ORIGINAL TIMELINE - Startseite Prozess
   ========================================================================== */

.fp-timeline {
  display: flex;
  gap: 0;
  position: relative;
}

/* Verbindungslinie durch alle Schritte */
.fp-timeline::before {
  content: '';
  position: absolute;
  top: 30px;
  left: 32px;
  right: 32px;
  height: 1px;
  background: linear-gradient(90deg,
    var(--fp-red) 0%,
    rgba(14,116,144,.6) 50%,
    rgba(255,255,255,.1) 100%);
}

.fp-tl-step {
  flex: 1;
  padding: 0 20px;
  position: relative;
}

.fp-tl-dot {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15);
  background: var(--fp-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
  transition: all .3s cubic-bezier(.16,1,.3,1);
  color: rgba(255,255,255,.5);
  font-size: 14px;
  font-weight: 700;
}

.fp-tl-step:hover .fp-tl-dot {
  border-color: var(--fp-red);
  background: var(--fp-red);
  color: #fff;
  transform: scale(1.08);
}

.fp-tl-step h4 {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
}

.fp-tl-step p {
  font-size: 14px;
  color: rgba(255,255,255,.55);
  line-height: 1.55;
  margin: 0 0 16px;
}

.fp-tl-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  transition: gap .2s, color .2s;
  text-decoration: none;
}

.fp-tl-link:hover {
  gap: 8px;
  color: #fff;
}

.fp-tl-link span {
  font-size: 16px;
  line-height: 1;
}

/* Responsive */
@media (max-width: 1200px) {
  .fp-process { padding: 100px 48px; }
  .fp-timeline { flex-wrap: wrap; gap: 32px 0; }
  .fp-tl-step { flex: 0 0 33.333%; padding: 0 16px; }
  .fp-timeline::before { display: none; }
}

@media (max-width: 768px) {
  .fp-process { padding: 80px 20px; }
  .fp-timeline { flex-direction: column; gap: 28px; }
  .fp-tl-step { flex: 1; padding: 0; }
}


/* ==========================================================================
   21. STARTSEITE — TESTIMONIALS
   Großes Hauptzitat links + kleine Zitate + Kunden-Chips rechts
   Alle Zitate: Off-White + schwarzer Text + roter Name + 2px Navy-Rahmen
   ========================================================================== */

.fp-testimonials {
  padding: 120px 64px;
  background: #fff;
}

.fp-testimonials-inner {
  max-width: 1600px;
  margin: 0 auto;
}

.fp-testimonials-header {
  margin-bottom: 56px;
}

.fp-kicker-dark {
  color: var(--fp-gray-mid);
}

.fp-testimonials-header h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  max-width: 820px;
  line-height: 1.15;
  margin: 0;
}

.fp-t-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 20px;
}

/* Großes Hauptzitat links */
.fp-t-hero {
  background: var(--fp-gray-light);
  border: 2px solid var(--fp-navy);
  border-radius: 20px;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.fp-t-hero blockquote {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-style: italic;
  color: var(--fp-gray-text);
  line-height: 1.45;
  font-weight: 500;
  border-left: 3px solid var(--fp-red);
  padding-left: 24px;
  margin: 0 0 32px;
  flex: 1;
}

.fp-t-hero-meta strong {
  display: block;
  font-size: 16px;
  color: var(--fp-navy);
  font-weight: 700;
  margin-bottom: 2px;
}

.fp-t-hero-meta span {
  display: block;
  font-size: 14px;
  color: var(--fp-red);
  font-weight: 600;
}

.fp-t-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  background: var(--fp-navy);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .01em;
}

.fp-t-stat svg {
  color: #16A34A;
}

/* Rechte Spalte */
.fp-t-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fp-t-small {
  background: var(--fp-gray-light);
  border: 2px solid var(--fp-navy);
  border-radius: 20px;
  padding: 28px 32px;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}

.fp-t-small:hover {
  transform: translateY(-2px);
}

.fp-t-small blockquote {
  font-size: 15px;
  font-style: italic;
  color: var(--fp-gray-text);
  line-height: 1.6;
  margin: 0 0 14px;
  font-weight: 500;
}

.fp-t-small cite {
  font-size: 13px;
  font-style: normal;
  color: var(--fp-red);
  font-weight: 700;
}

/* Kunden-Chips-Kachel */
.fp-t-logos {
  background: #fff;
  border: 1px dashed var(--fp-gray-border);
  border-radius: 20px;
  padding: 24px 28px;
}

.fp-t-logos-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fp-gray-mid);
  margin: 0 0 16px;
}

.fp-t-logos-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fp-t-chip {
  font-size: 13px;
  font-weight: 700;
  color: var(--fp-navy);
  background: var(--fp-gray-light);
  border: 1px solid var(--fp-gray-border);
  padding: 7px 14px;
  border-radius: 20px;
  transition: all .2s;
}

.fp-t-chip:hover {
  background: var(--fp-navy);
  color: #fff;
  border-color: var(--fp-navy);
}

/* Responsive */
@media (max-width: 1200px) {
  .fp-testimonials { padding: 100px 48px; }
  .fp-t-grid { grid-template-columns: 1fr; }
  .fp-t-hero { padding: 44px 36px; }
}

@media (max-width: 768px) {
  .fp-testimonials { padding: 80px 20px; }
  .fp-t-hero { padding: 36px 28px; }
  .fp-t-small { padding: 24px 24px; }
}


/* ==========================================================================
   22. STARTSEITE — EDITIONEN
   3 Preisklassen-Karten, mittlere Karte in Navy hervorgehoben
   ========================================================================== */

.fp-editions {
  padding: 120px 64px;
  background: var(--fp-gray-light);
}

.fp-editions-inner {
  max-width: 1600px;
  margin: 0 auto;
}

.fp-editions-header {
  text-align: center;
  margin-bottom: 64px;
}

.fp-editions-header h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  margin: 0 0 14px;
  line-height: 1.15;
}

.fp-editions-header p {
  font-size: 17px;
  color: var(--fp-gray-mid);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}

.fp-ed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.fp-ed-card {
  background: #fff;
  border-radius: 24px;
  padding: 44px 36px;
  border: 1px solid var(--fp-gray-border);
  position: relative;
  overflow: hidden;
  transition: all .35s cubic-bezier(.16,1,.3,1);
  display: flex;
  flex-direction: column;
}

.fp-ed-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 64px rgba(10,31,68,.14);
}

/* Hervorgehobene Karte in der Mitte */
.fp-ed-featured {
  background: var(--fp-navy);
  border-color: var(--fp-navy);
  transform: scale(1.03);
}

.fp-ed-featured:hover {
  transform: scale(1.03) translateY(-6px);
}

.fp-ed-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--fp-red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
}

.fp-ed-tier {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fp-red);
  margin-bottom: 12px;
  display: block;
}

.fp-ed-featured .fp-ed-tier {
  color: rgba(255,255,255,.6);
}

.fp-ed-name {
  font-size: 26px;
  font-weight: 800;
  color: var(--fp-navy);
  margin-bottom: 8px;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.fp-ed-featured .fp-ed-name {
  color: #fff;
}

.fp-ed-sub {
  font-size: 14px;
  color: var(--fp-gray-mid);
  margin: 0 0 32px;
}

.fp-ed-featured .fp-ed-sub {
  color: rgba(255,255,255,.55);
}

.fp-ed-list {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.fp-ed-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--fp-gray-text);
  line-height: 1.5;
}

.fp-ed-featured .fp-ed-list li {
  color: rgba(255,255,255,.85);
}

.fp-ed-check {
  color: var(--fp-teal);
  flex-shrink: 0;
  margin-top: 2px;
}

.fp-ed-featured .fp-ed-check {
  color: rgba(255,255,255,.6);
}

.fp-ed-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  transition: all .25s cubic-bezier(.16,1,.3,1);
  width: 100%;
  text-decoration: none;
}

.fp-ed-btn-outline {
  border: 1.5px solid var(--fp-gray-border);
  color: var(--fp-navy);
  background: transparent;
}

.fp-ed-btn-outline:hover {
  border-color: var(--fp-navy);
  background: var(--fp-navy);
  color: #fff;
}

.fp-ed-btn-fill {
  background: var(--fp-red);
  color: #fff;
  border: 1.5px solid var(--fp-red);
}

.fp-ed-btn-fill:hover {
  background: #c60511;
  border-color: #c60511;
  box-shadow: 0 8px 24px rgba(227,6,19,.3);
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 1200px) {
  .fp-editions { padding: 100px 48px; }
  .fp-ed-grid { grid-template-columns: 1fr; gap: 16px; max-width: 560px; margin: 0 auto; }
  .fp-ed-featured { transform: none; }
  .fp-ed-featured:hover { transform: translateY(-6px); }
}

@media (max-width: 768px) {
  .fp-editions { padding: 80px 20px; }
  .fp-ed-card { padding: 36px 28px; }
  .fp-ed-name { font-size: 22px; }
}


/* ==========================================================================
   23. STARTSEITE — BRANCHEN
   Asymmetrisches Grid: große Automotive-Kachel (2 Reihen hoch) + 3 normale
   ========================================================================== */

.fp-industries {
  padding: 120px 64px;
  background: #fff;
}

.fp-industries-inner {
  max-width: 1600px;
  margin: 0 auto;
}

.fp-industries-header {
  margin-bottom: 60px;
  max-width: 780px;
}

.fp-industries-header h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0 0 16px;
}

.fp-industries-header p {
  font-size: 17px;
  color: var(--fp-gray-mid);
  line-height: 1.6;
  margin: 0;
}

.fp-ind-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
}

.fp-ind-card {
  background: var(--fp-gray-light);
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  color: inherit;
  transition: all .3s cubic-bezier(.16,1,.3,1);
  min-height: 220px;
  position: relative;
  overflow: hidden;
}

.fp-ind-card:hover {
  background: #fff;
  border-color: var(--fp-navy);
  box-shadow: 0 20px 48px rgba(10,31,68,.14);
  transform: translateY(-4px);
}

.fp-ind-card:hover .fp-ind-arrow {
  color: var(--fp-red);
  transform: translate(4px, -4px);
}

/* Große Automotive-Kachel: Spalte 1, 2 Reihen hoch, Navy-Hintergrund */
.fp-ind-big {
  grid-column: 1;
  grid-row: 1 / 3;
  background: var(--fp-navy);
  padding: 48px 40px;
}

.fp-ind-big:hover {
  background: var(--fp-navy);
  border-color: var(--fp-red);
}

.fp-ind-big .fp-ind-name,
.fp-ind-big .fp-ind-desc,
.fp-ind-big .fp-ind-refs {
  color: #fff;
}

.fp-ind-big .fp-ind-desc {
  color: rgba(255,255,255,.7);
}

.fp-ind-big .fp-ind-refs {
  color: rgba(255,255,255,.45);
}

.fp-ind-big .fp-ind-icon-wrap {
  background: rgba(255,255,255,.08);
  color: #fff;
}

.fp-ind-big .fp-ind-arrow {
  color: rgba(255,255,255,.4);
}

.fp-ind-big:hover .fp-ind-arrow {
  color: #fff;
}

.fp-ind-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #fff;
  color: var(--fp-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  flex-shrink: 0;
}

.fp-ind-big .fp-ind-icon-wrap {
  width: 64px;
  height: 64px;
}

.fp-ind-body {
  flex: 1;
}

.fp-ind-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--fp-navy);
  margin-bottom: 10px;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.fp-ind-big .fp-ind-name {
  font-size: 28px;
  margin-bottom: 14px;
}

.fp-ind-desc {
  font-size: 14px;
  color: var(--fp-gray-mid);
  line-height: 1.6;
  margin: 0 0 16px;
}

.fp-ind-big .fp-ind-desc {
  font-size: 16px;
  margin-bottom: 20px;
}

.fp-ind-refs {
  font-size: 12px;
  font-weight: 600;
  color: var(--fp-gray-mid);
  letter-spacing: .02em;
  margin: 0;
}

.fp-ind-big .fp-ind-refs {
  font-size: 13px;
}

.fp-ind-arrow {
  position: absolute;
  bottom: 28px;
  right: 32px;
  font-size: 22px;
  color: var(--fp-gray-border);
  transition: all .3s cubic-bezier(.16,1,.3,1);
  line-height: 1;
}

.fp-ind-big .fp-ind-arrow {
  font-size: 26px;
  bottom: 40px;
  right: 40px;
}

/* "Und viele weitere" Kachel - gestrichelter Rahmen, dezenter */
.fp-ind-more {
  background: transparent;
  border: 2px dashed var(--fp-gray-border);
}

.fp-ind-more:hover {
  background: var(--fp-gray-light);
  border-color: var(--fp-navy);
  border-style: solid;
}

.fp-ind-more .fp-ind-icon-wrap {
  background: var(--fp-gray-light);
  color: var(--fp-gray-mid);
}

.fp-ind-more .fp-ind-refs {
  color: var(--fp-red);
  font-weight: 700;
}

/* Responsive */
@media (max-width: 1200px) {
  .fp-industries { padding: 100px 48px; }
  .fp-ind-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .fp-ind-big {
    grid-column: 1 / 3;
    grid-row: 1;
  }
}

@media (max-width: 768px) {
  .fp-industries { padding: 80px 20px; }
  .fp-ind-grid {
    grid-template-columns: 1fr;
  }
  .fp-ind-big {
    grid-column: 1;
    padding: 36px 28px;
  }
  .fp-ind-card { padding: 28px; min-height: 180px; }
  .fp-ind-name { font-size: 18px; }
  .fp-ind-big .fp-ind-name { font-size: 24px; }
}


/* ==========================================================================
   24. STARTSEITE — ZERTIFIZIERUNGEN
   Schlanker Streifen mit 4 ISO-Badges
   ========================================================================== */

.fp-certs {
  padding: 48px 64px;
  background: #fff;
  border-top: 1px solid var(--fp-gray-border);
  border-bottom: 1px solid var(--fp-gray-border);
}

.fp-certs-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  flex-wrap: wrap;
}

.fp-cert {
  display: flex;
  align-items: center;
  gap: 14px;
}

.fp-cert-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(22,163,74,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #16A34A;
  flex-shrink: 0;
}

.fp-cert-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--fp-navy);
  line-height: 1.2;
  margin-bottom: 2px;
}

.fp-cert-text span {
  font-size: 12px;
  color: var(--fp-gray-mid);
}

@media (max-width: 768px) {
  .fp-certs { padding: 32px 20px; }
  .fp-certs-inner { gap: 28px 36px; }
}


/* ==========================================================================
   25. STARTSEITE — DEMO CTA (Finale)
   Großes Navy-Panel mit letzter Handlungsaufforderung
   ========================================================================== */

.fp-demo-cta {
  background: var(--fp-navy);
  padding: 140px 64px;
  position: relative;
  overflow: hidden;
  color: #fff;
}

/* Dezente Deko-Ringe im Hintergrund */
.fp-demo-cta::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.04);
  pointer-events: none;
}

.fp-demo-cta::after {
  content: '';
  position: absolute;
  bottom: -150px;
  left: 8%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 1px solid rgba(227,6,19,.1);
  pointer-events: none;
}

.fp-demo-inner,
.fp-demo-cta-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.fp-demo-cta .fp-kicker {
  color: rgba(255,255,255,.55);
  margin-bottom: 24px;
  display: inline-block;
}

.fp-demo-cta h2 {
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin: 0 0 24px;
}

.fp-demo-sub,
.fp-demo-cta-inner > p {
  font-size: 19px;
  color: rgba(255,255,255,.6);
  max-width: 620px;
  margin: 0 auto 48px;
  line-height: 1.65;
}

.fp-demo-sub strong,
.fp-demo-cta-inner > p strong {
  color: rgba(255,255,255,.85);
  font-weight: 600;
}

.fp-demo-btns,
.fp-demo-cta-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.fp-demo-contact {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
}

.fp-dc-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  color: rgba(255,255,255,.5);
}

.fp-dc-item a {
  color: rgba(255,255,255,.8);
  transition: color .2s;
  text-decoration: none;
  font-weight: 500;
}

.fp-dc-item a:hover {
  color: #fff;
}

@media (max-width: 1200px) {
  .fp-demo-cta { padding: 120px 48px; }
}

@media (max-width: 768px) {
  .fp-demo-cta { padding: 80px 20px; }
  .fp-demo-sub { font-size: 17px; margin-bottom: 36px; }
  .fp-demo-btns { margin-bottom: 32px; }
  .fp-demo-contact { gap: 20px 28px; }
}


/* ==========================================================================
   26. GLOBAL — FOOTER
   Umfangreich: Brand + 4 Linkspalten + Badges + Rechtliches
   ========================================================================== */

.fp-footer {
  background: var(--fp-navy);
  padding: 80px 64px 0;
  color: #fff;
  position: relative;
}

.fp-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--fp-red) 0%,
    rgba(14,116,144,.6) 50%,
    rgba(255,255,255,.1) 100%);
}

.fp-footer-inner {
  max-width: 1600px;
  margin: 0 auto;
}

.fp-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Brand-Bereich links */
.fp-footer-brand { max-width: 320px; }

.fp-footer-logo {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 16px;
  line-height: 1;
}

.fp-footer-logo-br {
  color: var(--fp-red);
}

.fp-footer-desc {
  font-size: 14px;
  color: rgba(255,255,255,.5);
  line-height: 1.7;
  margin: 0 0 24px;
}

.fp-footer-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.fp-footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.7);
}

.fp-footer-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16A34A;
  flex-shrink: 0;
}

/* Linkspalten */
.fp-footer-col h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 20px;
}

.fp-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.fp-footer-col ul li a {
  font-size: 14px;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: color .2s;
}

.fp-footer-col ul li a:hover {
  color: #fff;
}

/* DIA2000 externer Link – mit dezentem Pfeil */
.fp-footer-dia::after {
  content: ' ↗';
  color: rgba(255,255,255,.3);
  font-size: 11px;
  margin-left: 2px;
  transition: color .2s;
}
.fp-footer-dia:hover::after {
  color: var(--fp-red);
}

/* Kontakt-Spalte */
.fp-footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,.5);
  margin-bottom: 12px;
  line-height: 1.5;
}

.fp-footer-contact-item svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: rgba(255,255,255,.4);
}

.fp-footer-contact-item a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
  transition: color .2s;
}

.fp-footer-contact-item a:hover {
  color: #fff;
}

.fp-footer-addr {
  margin-top: 4px;
}

/* Untere Leiste */
.fp-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 28px 0;
}

.fp-footer-copy {
  font-size: 12px;
  color: rgba(255,255,255,.35);
  line-height: 1.6;
  margin: 0;
}

.fp-footer-legal {
  display: flex;
  gap: 24px;
}

.fp-footer-legal a {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  transition: color .2s;
}

.fp-footer-legal a:hover {
  color: #fff;
}

.fp-footer-lang {
  display: flex;
  gap: 8px;
}

.fp-footer-lang a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  padding: 5px 10px;
  border-radius: 4px;
  text-decoration: none;
  transition: all .2s;
}

.fp-footer-lang a:hover,
.fp-footer-lang a.on {
  color: #fff;
  background: rgba(255,255,255,.08);
}

/* Responsive */
@media (max-width: 1200px) {
  .fp-footer { padding: 64px 48px 0; }
  .fp-footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 36px;
  }
  .fp-footer-brand {
    grid-column: 1 / 4;
    max-width: 100%;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
}

@media (max-width: 768px) {
  .fp-footer { padding: 56px 20px 0; }
  .fp-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .fp-footer-brand {
    grid-column: 1 / 3;
  }
  .fp-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}


/* ==========================================================================
   27. GLOBAL — HEADER & NAVIGATION
   Navy Navigation durchgängig auf allen Seiten
   ========================================================================== */

/* Screen-reader-only skip link */
.skip-link.screen-reader-text {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}
.skip-link.screen-reader-text:focus {
  left: 16px;
  top: 16px;
  z-index: 99999;
  width: auto; height: auto;
  padding: 12px 18px;
  background: var(--fp-red);
  color: #fff;
  border-radius: 6px;
}

.fp-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--fp-navy);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.fp-header-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 18px 64px;
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Logo links */
.fp-header-logo {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #fff;
  line-height: 1;
  text-decoration: none;
  flex-shrink: 0;
}

.fp-header-logo .fp-br {
  color: var(--fp-red);
}

/* Navigation */
.fp-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.fp-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
}

.fp-nav-list li { margin: 0; }

.fp-nav-list a {
  display: block;
  padding: 10px 13px;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  border-radius: 6px;
  transition: all .2s;
  position: relative;
}

.fp-nav-list a:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
}

/* Aktive Menüpunkte (WordPress setzt diese Klassen automatisch) */
.fp-nav-list .current-menu-item > a,
.fp-nav-list .current-menu-parent > a {
  color: #fff;
}

.fp-nav-list .current-menu-item > a::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 13px; right: 13px;
  height: 2px;
  background: var(--fp-red);
  border-radius: 1px;
}

/* Rechte Aktion-Gruppe */
.fp-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Sprachumschalter */
.fp-lang {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
}

.fp-lang a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(255,255,255,.55);
  padding: 4px 9px;
  border-radius: 4px;
  text-decoration: none;
  transition: all .2s;
  line-height: 1.2;
}

.fp-lang a:hover {
  color: #fff;
}

.fp-lang a.on {
  color: #fff;
  background: rgba(255,255,255,.12);
}

/* Demo-CTA Button */
.fp-header-cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: var(--fp-red);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
  transition: all .2s;
}

.fp-header-cta:hover {
  background: #c60511;
  box-shadow: 0 6px 20px rgba(227,6,19,.35);
  transform: translateY(-1px);
}

/* Mobile Menu Toggle (standardmäßig ausgeblendet) */
.fp-nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.fp-nav-toggle span {
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transition: all .25s;
}

.fp-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.fp-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.fp-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile Nav-Panel */
.fp-mobile-nav {
  display: none;
  background: var(--fp-navy);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 12px 0;
}

.fp-mobile-nav[hidden] { display: none; }

.fp-mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0 20px;
}

.fp-mobile-nav-list li { margin: 0; }

.fp-mobile-nav-list a {
  display: block;
  padding: 16px 20px;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.fp-mobile-nav-list li:last-child a {
  border-bottom: none;
  color: var(--fp-red);
  font-weight: 700;
}

/* Responsive - Tablet */
@media (max-width: 1200px) {
  .fp-header-inner { padding: 16px 48px; gap: 20px; }
  .fp-nav-list a { padding: 10px 12px; font-size: 14px; }
  .fp-nav-list { gap: 0; }
}

/* Responsive - Mobile */
@media (max-width: 1024px) {
  .fp-nav { display: none; }
  .fp-nav-toggle { display: flex; }
  .fp-header-cta { display: none; }
  .fp-mobile-nav.is-open { display: block; }
}

@media (max-width: 640px) {
  .fp-header-inner { padding: 14px 20px; gap: 12px; }
  .fp-lang a { padding: 4px 7px; font-size: 11px; }
}

/* ==========================================================================
   27b. NAVIGATION – DROPDOWN UNTERMENÜS (Desktop + Mobile)
   Hohe Spezifität via .fp-header-Präfix, damit Parent-Theme (Kadence)
   diese Regeln nicht überschreibt.
   ========================================================================== */

/* --- 27b.0 GLOBAL: Submenü-Liste immer als Reset (überall im Header) --- */

.fp-header .sub-menu,
.fp-header .sub-menu li {
  list-style: none !important;
}

/* --- 27b.1 DESKTOP: Dropdown-Mechanik --- */

.fp-header .fp-nav-list .menu-item-has-children {
  position: relative;
}

/* Unsichtbare Hover-Brücke: schließt die 6px Lücke zwischen Eltern-Link und Sub-Menü */
.fp-header .fp-nav-list .menu-item-has-children::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
  background: transparent;
  /* Erst sichtbar/aktiv wenn Eltern oder Sub-Menü gehovert wird */
  pointer-events: none;
}

.fp-header .fp-nav-list .menu-item-has-children:hover::after,
.fp-header .fp-nav-list .menu-item-has-children:focus-within::after {
  pointer-events: auto;
}

/* Caret-Pfeil neben Eltern-Einträgen */
.fp-header .fp-caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  opacity: .55;
  transition: transform .2s, opacity .2s;
}

.fp-header .fp-nav-list .menu-item-has-children:hover > a .fp-caret,
.fp-header .fp-nav-list .menu-item-has-children:focus-within > a .fp-caret {
  opacity: 1;
  transform: rotate(180deg);
}

/* Sub-Menu Container DESKTOP – HARD HIDDEN by default */
.fp-header .fp-nav-list .sub-menu {
  display: block !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-8px) !important;
  min-width: 240px !important;
  margin: 14px 0 0 !important; /* 14px = Höhe der Hover-Brücke darüber */
  padding: 8px !important;
  background: #122a55 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.35) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  /* Sanftes Schließen mit 120ms Verzögerung, damit Hover-Lücken nicht abreißen */
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .12s !important;
  z-index: 1100 !important;
}

/* Sub-Menu Container DESKTOP – sichtbar nur bei Hover */
.fp-header .fp-nav-list .menu-item-has-children:hover > .sub-menu,
.fp-header .fp-nav-list .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
  /* Beim Öffnen keine Visibility-Verzögerung */
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s !important;
}

.fp-header .fp-nav-list .sub-menu li {
  margin: 0 !important;
  padding: 0 !important;
}

.fp-header .fp-nav-list .sub-menu a {
  display: block !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.85) !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  background: transparent !important;
  transition: background .15s, color .15s !important;
}

.fp-header .fp-nav-list .sub-menu a:hover {
  background: rgba(255,255,255,.07) !important;
  color: #fff !important;
}

/* Externer Link ↗-Marker */
.fp-header .fp-nav-list .sub-menu .fp-ext {
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
  opacity: .55;
  vertical-align: top;
}

/* --- 27b.2 MOBILE: Submenüs als Akkordeon --- */

@media (max-width: 1024px) {

  /* Body-Scroll sperren wenn Mobile-Menü offen */
  body.fp-mobile-open { overflow: hidden; }

  /* Auf Mobile alle Desktop-Dropdown-Regeln zurücksetzen */
  .fp-header .fp-mobile-nav .sub-menu {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    min-width: 0 !important;
    background: rgba(0,0,0,.18) !important;
    margin: 0 !important;
    padding: 0 0 8px 16px !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height .25s ease !important;
    display: block !important;
    left: auto !important;
    top: auto !important;
  }

  .fp-header .fp-mobile-nav .menu-item-has-children.is-open > .sub-menu {
    max-height: 600px !important;
  }

  /* Caret im Mobile-Menü */
  .fp-header .fp-mobile-nav .fp-caret {
    float: right;
    margin-top: 8px;
    margin-left: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: .6;
    transition: transform .2s;
  }

  .fp-header .fp-mobile-nav .menu-item-has-children.is-open > a .fp-caret,
  .fp-header .fp-mobile-nav .menu-item-has-children.is-open > .fp-mobile-sub-toggle .fp-caret {
    transform: rotate(180deg);
  }

  /* Eltern-Button im Mobile-Menü (Fallback) */
  .fp-header .fp-mobile-nav .fp-mobile-sub-toggle {
    display: block;
    width: 100%;
    padding: 16px 20px;
    font-size: 17px;
    font-weight: 500;
    color: #fff;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,.05);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
  }

  .fp-header .fp-mobile-nav .fp-mobile-sub-toggle:hover,
  .fp-header .fp-mobile-nav .fp-mobile-sub-toggle:focus-visible {
    background: rgba(255,255,255,.04);
    outline: none;
  }

  .fp-header .fp-mobile-nav .sub-menu a {
    display: block !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,.78) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255,255,255,.04) !important;
    border-radius: 0 !important;
    white-space: normal !important;
    background: transparent !important;
  }

  .fp-header .fp-mobile-nav .sub-menu a:hover { color: #fff !important; }
  .fp-header .fp-mobile-nav .sub-menu li:last-child a { border-bottom: none !important; }

  /* Eltern-Link bei WP-Menü (a-Tag mit Children) – Klick toggle */
  .fp-header .fp-mobile-nav-list > .menu-item-has-children > a {
    cursor: pointer;
  }

  /* Mobile-CTA als roter Button am Ende */
  .fp-header .fp-mobile-nav .menu-item-cta a {
    display: block;
    margin: 16px 20px 0;
    padding: 14px 20px;
    background: var(--fp-red);
    color: #fff !important;
    font-weight: 700;
    text-align: center;
    border-radius: 8px;
    border-bottom: none;
  }

  .fp-header .fp-mobile-nav .menu-item-cta a:hover {
    background: #c60511;
  }
}


/* ==========================================================================
   28. UNTERSEITEN — GEMEINSAME BASIS
   ========================================================================== */

.fp-page { background: #fff; color: var(--fp-gray-text); }

/* --- 28.1 PAGE-HERO (kompakt, nicht full-bleed) --- */

.fp-page-hero {
  background: var(--fp-navy);
  color: #fff;
  padding: 80px 64px 96px;
  position: relative;
  overflow: hidden;
}

.fp-page-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--fp-red) 0%, rgba(14,116,144,.6) 50%, rgba(255,255,255,.1) 100%);
}

.fp-page-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.fp-breadcrumb {
  font-size: 13px;
  color: rgba(255,255,255,.4);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fp-breadcrumb a {
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: color .2s;
}

.fp-breadcrumb a:hover { color: #fff; }
.fp-breadcrumb .current { color: rgba(255,255,255,.9); font-weight: 600; }

.fp-page-hero h1 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin: 16px 0 24px;
  max-width: 900px;
}

.fp-page-hero-sub {
  font-size: 20px;
  color: rgba(255,255,255,.65);
  line-height: 1.65;
  max-width: 720px;
  margin: 0 0 48px;
}

.fp-page-hero-meta {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.1);
}

.fp-phm-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fp-phm-item strong {
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -.02em;
}

.fp-phm-item span {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  letter-spacing: .05em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .fp-page-hero { padding: 56px 20px 72px; }
  .fp-page-hero-meta { gap: 28px 36px; }
  .fp-phm-item strong { font-size: 26px; }
}

/* ==========================================================================
   29. PRODUKT-UNTERSEITE — DIE 4 LIMS-SÄULEN
   ========================================================================== */

.fp-pillars {
  padding: 120px 64px;
  background: var(--fp-gray-light);
}

.fp-pillars-inner { max-width: 1600px; margin: 0 auto; }

.fp-pillars-head {
  margin-bottom: 72px;
  max-width: 760px;
}

.fp-pillars-head h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 12px 0 16px;
}

.fp-pillars-head p {
  font-size: 17px;
  color: var(--fp-gray-mid);
  line-height: 1.6;
  margin: 0;
}

.fp-pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.fp-pillar {
  background: #fff;
  border-radius: 20px;
  padding: 44px 40px;
  position: relative;
  transition: all .3s cubic-bezier(.16,1,.3,1);
  border: 1px solid transparent;
}

.fp-pillar:hover {
  border-color: var(--fp-navy);
  box-shadow: 0 24px 64px rgba(10,31,68,.12);
  transform: translateY(-4px);
}

.fp-pillar-num {
  position: absolute;
  top: 28px;
  right: 32px;
  font-size: 48px;
  font-weight: 900;
  color: var(--fp-gray-border);
  letter-spacing: -.02em;
  line-height: 1;
}

.fp-pillar-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--fp-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}

.fp-pillar h3 {
  font-size: 24px;
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.01em;
  margin: 0 0 12px;
}

.fp-pillar p {
  font-size: 15px;
  color: var(--fp-gray-mid);
  line-height: 1.65;
  margin: 0 0 24px;
}

.fp-pillar-features {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--fp-gray-border);
}

.fp-pillar-features li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  color: var(--fp-gray-text);
  line-height: 1.5;
  margin-bottom: 10px;
}

.fp-pillar-features li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 12px; height: 2px;
  background: var(--fp-red);
}

.fp-pillar-features li:last-child { margin-bottom: 0; }

@media (max-width: 1200px) {
  .fp-pillars { padding: 100px 48px; }
}

@media (max-width: 768px) {
  .fp-pillars { padding: 80px 20px; }
  .fp-pillars-grid { grid-template-columns: 1fr; }
  .fp-pillar { padding: 36px 28px; }
  .fp-pillar-num { font-size: 38px; top: 24px; right: 28px; }
}

/* ==========================================================================
   30. PRODUKT-UNTERSEITE — PROZESSKREISLAUF (7 Schritte)
   ========================================================================== */

.fp-process-full {
  padding: 120px 64px;
  background: #fff;
}

.fp-process-full-inner { max-width: 1600px; margin: 0 auto; }

.fp-process-full-head {
  margin-bottom: 64px;
  max-width: 780px;
}

.fp-process-full-head h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 12px 0 16px;
}

.fp-process-full-head p {
  font-size: 17px;
  color: var(--fp-gray-mid);
  line-height: 1.6;
  margin: 0;
}

.fp-pfull-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  position: relative;
}

.fp-pfull-grid::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--fp-red), var(--fp-teal), var(--fp-gray-border));
  z-index: 0;
}

.fp-pfull-step {
  background: #fff;
  padding: 16px 12px 20px;
  position: relative;
  z-index: 1;
}

.fp-pfull-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--fp-gray-border);
  color: var(--fp-navy);
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 20px;
  transition: all .3s cubic-bezier(.16,1,.3,1);
}

.fp-pfull-step:hover .fp-pfull-num {
  background: var(--fp-red);
  color: #fff;
  border-color: var(--fp-red);
  transform: scale(1.1);
}

.fp-pfull-step h4 {
  font-size: 14px;
  font-weight: 800;
  color: var(--fp-navy);
  margin: 0 0 8px;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.fp-pfull-step p {
  font-size: 13px;
  color: var(--fp-gray-mid);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 1200px) {
  .fp-process-full { padding: 100px 48px; }
  .fp-pfull-grid { grid-template-columns: repeat(4, 1fr); gap: 24px 16px; }
  .fp-pfull-grid::before { display: none; }
}

@media (max-width: 768px) {
  .fp-process-full { padding: 80px 20px; }
  .fp-pfull-grid { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
}

/* ==========================================================================
   31. PRODUKT-UNTERSEITE — MODULE
   ========================================================================== */

.fp-modules {
  padding: 120px 64px;
  background: var(--fp-navy);
  color: #fff;
}

.fp-modules-inner { max-width: 1200px; margin: 0 auto; }

.fp-modules-head {
  margin-bottom: 64px;
  max-width: 780px;
}

.fp-modules-head .fp-kicker-dark { color: rgba(255,255,255,.55); }

.fp-modules-head h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 12px 0 16px;
}

.fp-modules-head p {
  font-size: 17px;
  color: rgba(255,255,255,.55);
  line-height: 1.6;
  margin: 0;
}

.fp-modules-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}

/* Variante: 2-Karten-Grid (z.B. wenn nur 2 Produkt-Dokumente vorhanden) */
.fp-modules-grid-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 800px;
}

/* ==========================================================================
   ACADEMY-SEITE - Layout-Logik wie /ressourcen/ (abwechselnde Sektionen)
   Eigene Spezialklassen für Trainer-Sektion, Module-Liste, Video, Badges
   ========================================================================== */

/* --- VIDEO INNERHALB .fp-challenges --- */
.fp-academy-video-wrap {
  max-width: 720px;
  margin: 40px auto 0;
}

.fp-academy-video-wrap video {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  background: var(--fp-navy);
}

.fp-academy-video-caption {
  text-align: center;
  font-size: 13px;
  color: var(--fp-gray-mid);
  margin: 12px 0 0;
}

/* --- SCHULUNGSRAUM 2-SPALTEN: Text links, Video rechts --- */
.fp-academy-room-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.fp-academy-room-text .fp-kicker {
  display: inline-block;
  margin-bottom: 16px;
}

.fp-academy-room-text h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0 0 20px;
}

.fp-academy-room-text p {
  font-size: 16px;
  color: var(--fp-gray-mid);
  line-height: 1.7;
  margin: 0 0 16px;
}

.fp-academy-room-text p:last-child { margin-bottom: 0; }

.fp-academy-room-text p strong {
  color: var(--fp-navy);
  font-weight: 700;
}

.fp-academy-room-video {
  position: relative;
}

.fp-academy-room-video video {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  background: var(--fp-navy);
  box-shadow: 0 12px 32px rgba(10,31,68,.12);
}

.fp-academy-room-video .fp-academy-video-caption {
  text-align: left;
  margin-top: 14px;
}

/* Fallback für ältere Browser (Safari <15): explizite Höhe via padding-trick */
@supports not (aspect-ratio: 16 / 9) {
  .fp-academy-room-video {
    position: relative;
    padding-top: 56.25%; /* 16:9 */
    height: 0;
    border-radius: 12px;
    overflow: hidden;
  }
  .fp-academy-room-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .fp-academy-room-video .fp-academy-video-caption {
    position: absolute;
    bottom: -36px;
    left: 0;
  }
}

/* --- TRAINER-SEKTION: 2-Spalten mit Foto links, Text rechts --- */
.fp-academy-trainer-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

.fp-academy-trainer-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  box-shadow: 0 12px 32px rgba(10,31,68,.12);
}

.fp-academy-trainer-text .fp-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--fp-gray-mid);
}

.fp-academy-trainer-text h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0 0 20px;
}

.fp-academy-trainer-text p {
  font-size: 16px;
  color: var(--fp-gray-mid);
  line-height: 1.7;
  margin: 0 0 14px;
}

.fp-academy-trainer-text p:last-child { margin-bottom: 0; }

.fp-academy-trainer-text p strong {
  color: var(--fp-navy);
  font-weight: 700;
}

/* Alte Klasse für Rückwärtskompatibilität */
.fp-academy-trainer-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.fp-academy-trainer-inner .fp-kicker {
  display: inline-block;
  color: var(--fp-gray-mid);
}

.fp-academy-trainer-inner h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 12px 0 24px;
}

.fp-academy-trainer-inner p {
  font-size: 17px;
  color: var(--fp-gray-mid);
  line-height: 1.7;
  margin: 0 0 16px;
}

.fp-academy-trainer-inner p strong { color: var(--fp-navy); font-weight: 700; }

/* --- BASISTRAININGS: 3-Spalten-Grid statt 4 --- */
.fp-mrc-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* --- TRAININGS-KARTEN: Badge, Edition-Label, Bullets --- */
.fp-academy-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--fp-red);
  color: #fff;
  border-radius: 50%;
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}

.fp-academy-edition {
  font-weight: 700 !important;
  color: var(--fp-red) !important;
  font-size: 13px !important;
  letter-spacing: .02em;
  margin-top: -4px !important;
  margin-bottom: 12px !important;
}

.fp-academy-bullets {
  font-size: 13px;
  line-height: 1.7;
  color: var(--fp-gray-mid);
  padding-left: 18px;
  margin: 12px 0;
}

.fp-academy-bullets li {
  margin-bottom: 4px;
}

.fp-academy-target {
  font-size: 13px !important;
  color: var(--fp-gray-mid) !important;
  margin-top: 12px !important;
  padding-top: 12px;
  border-top: 1px solid var(--fp-gray-border);
}

.fp-academy-target strong { color: var(--fp-navy); font-weight: 600; }

.fp-academy-pdf-link {
  margin-top: 14px !important;
}

.fp-academy-pdf-link a {
  font-size: 13px;
  font-weight: 700;
  color: var(--fp-navy);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fp-academy-pdf-link a span {
  transition: transform .2s;
  display: inline-block;
}

.fp-academy-pdf-link a:hover {
  color: var(--fp-red);
}

.fp-academy-pdf-link a:hover span {
  transform: translateX(4px);
}

/* --- FORMAT-TAGS in fp-process-Karten --- */
.fp-academy-format-tag {
  font-size: 12px !important;
  color: rgba(255,255,255,.5) !important;
  margin-top: 12px !important;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.1);
}

.fp-academy-tag-green {
  color: #4ADE80 !important;
  font-weight: 600;
}

.fp-academy-note {
  margin-top: 32px !important;
  font-style: italic;
  font-size: 14px !important;
  color: rgba(255,255,255,.65) !important;
}

/* --- INDIVIDUALTRAINING CTA-Block --- */
.fp-academy-indi-cta {
  margin-top: 48px;
  padding: 32px 36px;
  background: #fff;
  border-left: 4px solid var(--fp-red);
  border-radius: 8px;
  text-align: center;
}

.fp-academy-indi-cta strong {
  display: block;
  font-size: 18px;
  color: var(--fp-navy);
  margin-bottom: 12px;
}

.fp-academy-indi-cta p {
  margin: 12px 0;
  font-size: 15px;
}

.fp-academy-indi-cta a {
  color: var(--fp-navy);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fp-academy-indi-cta a:hover { color: var(--fp-red); }

.fp-academy-indi-cta .fp-academy-indi-hint {
  font-size: 13px !important;
  color: var(--fp-gray-mid) !important;
  font-style: italic;
  margin: 8px auto !important;
  max-width: 580px;
}

/* --- SUBHEAD innerhalb Selbststudium-Sektion --- */
.fp-academy-subhead {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--fp-navy);
  margin: 40px 0 20px;
  letter-spacing: -.01em;
}

.fp-academy-subhead:first-child {
  margin-top: 0;
}

/* --- PRODUKT-DOKUMENTE: 3-Spalten-Modulliste --- */
.fp-academy-modules-head {
  margin-bottom: 40px;
  max-width: 820px;
}

.fp-academy-modules-head .fp-kicker {
  color: var(--fp-gray-mid);
  display: inline-block;
}

.fp-academy-modules-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 12px 0 14px;
}

.fp-academy-modules-head p {
  font-size: 17px;
  color: var(--fp-gray-mid);
  line-height: 1.6;
  margin: 0;
}

.fp-academy-modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.fp-academy-module-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: var(--fp-gray-light);
  border-radius: 8px;
  text-decoration: none;
  transition: all .2s;
  border: 1px solid transparent;
}

.fp-academy-module-link:hover {
  background: #fff;
  border-color: var(--fp-red);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(10,31,68,.06);
}

.fp-academy-module-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--fp-navy);
  line-height: 1.3;
}

.fp-academy-module-arrow {
  font-size: 16px;
  color: var(--fp-red);
  font-weight: 700;
  flex-shrink: 0;
}

/* --- RESPONSIVE --- */
@media (max-width: 1100px) {
  .fp-mrc-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .fp-academy-modules-grid { grid-template-columns: repeat(2, 1fr); }
  .fp-academy-room-grid { gap: 48px; }
}

@media (max-width: 900px) {
  .fp-academy-room-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .fp-academy-trainer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .fp-academy-trainer-photo {
    max-width: 280px;
    margin: 0 auto;
  }
}

@media (max-width: 700px) {
  .fp-mrc-grid-3 { grid-template-columns: 1fr; }
  .fp-academy-modules-grid { grid-template-columns: 1fr; }
  .fp-academy-video-wrap { max-width: 100%; margin-top: 32px; }
  .fp-academy-indi-cta { padding: 24px 20px; }
  .fp-academy-trainer-inner h2 { font-size: 1.6rem; }
}

.fp-module {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 28px 28px 24px;
  transition: all .3s;
}

.fp-module:hover {
  background: rgba(255,255,255,.06);
  border-color: var(--fp-red);
  transform: translateY(-4px);
}

.fp-module-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.fp-module h3 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: -.01em;
  line-height: 1.3;
  flex: 1 1 auto;
  min-width: 0;                  /* erlaubt Flex-Item, schmaler zu werden */
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;  /* min Wortlänge 8, vorher/nachher min 4 */
}

.fp-module-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fp-red);
  background: rgba(227,6,19,.12);
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.fp-module p {
  font-size: 14px;
  color: rgba(255,255,255,.6);
  line-height: 1.55;
  margin: 0;
}

.fp-modules-note {
  padding: 20px 28px;
  background: rgba(255,255,255,.04);
  border-left: 3px solid var(--fp-red);
  border-radius: 8px;
}

.fp-modules-note p {
  font-size: 14px;
  color: rgba(255,255,255,.7);
  margin: 0;
  line-height: 1.65;
}

.fp-modules-note strong {
  color: #fff;
  font-weight: 700;
}

.fp-modules-note a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--fp-red);
  text-underline-offset: 3px;
}

/* ==========================================================================
   FP-MODULE-CARD - Karten innerhalb von .fp-modules (Navy-Hintergrund)
   Wird in Branchen-Seiten, Academy, etc. als Custom-HTML-Block verwendet
   ========================================================================== */

.fp-modules .fp-kicker .fp-br,
.fp-modules .fp-module-card .fp-br,
.fp-modules-cta .fp-br,
.fp-modules-lead .fp-br {
  color: var(--fp-red) !important;
}

.fp-modules-lead {
  font-size: 17px;
  color: rgba(255,255,255,.7);
  line-height: 1.6;
  margin: 0 0 32px;
  max-width: 780px;
}

.fp-modules-lead strong { color: #fff; font-weight: 700; }

.fp-modules-lead a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--fp-red);
  text-underline-offset: 3px;
}

.fp-module-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 28px;
  transition: all .3s;
  color: rgba(255,255,255,.75);
}

.fp-module-card:hover {
  background: rgba(255,255,255,.06);
  border-color: var(--fp-red);
  transform: translateY(-4px);
}

.fp-module-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 12px 0 8px;
  letter-spacing: -.01em;
  line-height: 1.3;
  font-family: 'Inter', sans-serif;
}

.fp-module-card p {
  font-size: 14px;
  color: rgba(255,255,255,.7);
  line-height: 1.6;
  margin: 8px 0;
}

.fp-module-card ul {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.7) !important;
  padding-left: 20px;
  margin: 12px 0;
}

.fp-module-card ul li { margin-bottom: 4px; }

.fp-module-card strong { color: #fff; font-weight: 600; }

.fp-module-card a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--fp-red);
  text-underline-offset: 3px;
  font-weight: 600;
}

.fp-module-card a:hover {
  text-decoration-color: #fff;
}

.fp-module-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--fp-red);
  color: #fff;
  border-radius: 8px;
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 8px;
}

.fp-modules-cta {
  text-align: left;
  margin-top: 32px;
  font-size: 15px;
  color: rgba(255,255,255,.75);
}

.fp-modules-cta strong { color: #fff !important; }

.fp-modules-cta a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--fp-red);
  text-underline-offset: 3px;
  font-weight: 600;
}

/* Hellen Hintergrund für #fp-modules-overview innerhalb dunkler Sektion */
.fp-modules #fp-modules-overview {
  background: rgba(255,255,255,.06) !important;
}

.fp-modules #fp-modules-overview h3 {
  color: #fff !important;
}

.fp-modules #fp-modules-overview a {
  color: rgba(255,255,255,.85) !important;
}

.fp-modules #fp-modules-overview a:hover {
  color: #fff !important;
}

/* Video-Wrap innerhalb .fp-modules */
.fp-modules .fp-video-wrap p {
  color: rgba(255,255,255,.55) !important;
}

@media (max-width: 1200px) {
  .fp-modules { padding: 100px 48px; }
  .fp-modules-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .fp-modules { padding: 80px 20px; }
  .fp-modules-grid { grid-template-columns: 1fr; }
  .fp-module-card { padding: 24px; }
}

/* ==========================================================================
   32. PRODUKT-UNTERSEITE — EDITIONEN-VERGLEICHSTABELLE
   ========================================================================== */

.fp-compare {
  padding: 120px 64px;
  background: #fff;
}

.fp-compare-inner { max-width: 1200px; margin: 0 auto; }

.fp-compare-head {
  text-align: center;
  margin-bottom: 56px;
}

.fp-compare-head h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 12px 0 0;
}

.fp-compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
  border: 1px solid var(--fp-gray-border);
}

.fp-compare-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  min-width: 720px;
}

.fp-compare-table thead th {
  background: var(--fp-gray-light);
  padding: 28px 20px 24px;
  text-align: center;
  font-weight: 700;
  color: var(--fp-navy);
  border-bottom: 2px solid var(--fp-gray-border);
  position: relative;
  vertical-align: top;
}

.fp-compare-table thead th.fp-ct-feat {
  text-align: left;
  background: #fff;
}

.fp-compare-table thead th.fp-ct-highlight {
  background: var(--fp-navy);
  color: #fff;
}

.fp-ct-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--fp-red);
  color: #fff;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.fp-ct-tier {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fp-red);
  margin-bottom: 6px;
}

.fp-compare-table thead th.fp-ct-highlight .fp-ct-tier {
  color: rgba(255,255,255,.6);
}

.fp-ct-name {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.fp-compare-table tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--fp-navy);
  padding: 16px 20px;
  border-bottom: 1px solid var(--fp-gray-border);
  font-size: 14px;
  background: #fff;
}

.fp-compare-table tbody td {
  text-align: center;
  padding: 16px 20px;
  font-size: 14px;
  border-bottom: 1px solid var(--fp-gray-border);
  color: var(--fp-gray-text);
}

.fp-compare-table tbody td.yes {
  color: #16A34A;
  font-weight: 800;
  font-size: 18px;
}

.fp-compare-table tbody td.no {
  color: var(--fp-gray-border);
  font-weight: 700;
}

.fp-compare-table tfoot td {
  padding: 24px 20px;
  text-align: center;
  border-top: 2px solid var(--fp-gray-border);
  background: var(--fp-gray-light);
}

.fp-ct-btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all .2s;
}

.fp-ct-btn-fill {
  background: var(--fp-red);
  color: #fff;
}

.fp-ct-btn-fill:hover {
  background: #c60511;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(227,6,19,.3);
}

.fp-ct-btn-outline {
  border: 1.5px solid var(--fp-gray-border);
  color: var(--fp-navy);
}

.fp-ct-btn-outline:hover {
  border-color: var(--fp-navy);
  background: var(--fp-navy);
  color: #fff;
}

@media (max-width: 1200px) {
  .fp-compare { padding: 100px 48px; }
}

@media (max-width: 768px) {
  .fp-compare { padding: 80px 20px; }
  .fp-ct-name { font-size: 18px; }
  .fp-compare-table thead th { padding: 20px 12px 16px; }
}

/* ==========================================================================
   33. PRODUKT-UNTERSEITE — INTEGRATION
   ========================================================================== */

.fp-integration {
  padding: 120px 64px;
  background: var(--fp-gray-light);
}

.fp-integration-inner { max-width: 1600px; margin: 0 auto; }

.fp-integration-head {
  margin-bottom: 56px;
  max-width: 820px;
}

.fp-integration-head h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 12px 0 16px;
}

.fp-integration-head p {
  font-size: 17px;
  color: var(--fp-gray-mid);
  line-height: 1.6;
  margin: 0;
}

.fp-integration-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.fp-int-card {
  background: #fff;
  border: 1px solid var(--fp-gray-border);
  border-radius: 20px;
  padding: 36px 32px;
  transition: all .3s;
}

.fp-int-card:hover {
  border-color: var(--fp-navy);
  box-shadow: 0 20px 48px rgba(10,31,68,.1);
  transform: translateY(-4px);
}

.fp-int-card h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--fp-navy);
  margin: 0 0 14px;
  letter-spacing: -.01em;
}

.fp-int-card p {
  font-size: 15px;
  color: var(--fp-gray-mid);
  line-height: 1.6;
  margin: 0 0 24px;
}

.fp-int-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 20px;
  border-top: 1px solid var(--fp-gray-border);
}

.fp-int-chips span {
  font-size: 12px;
  font-weight: 600;
  color: var(--fp-navy);
  background: var(--fp-gray-light);
  padding: 5px 11px;
  border-radius: 6px;
  border: 1px solid var(--fp-gray-border);
}

@media (max-width: 1200px) {
  .fp-integration { padding: 100px 48px; }
  .fp-integration-grid { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 768px) {
  .fp-integration { padding: 80px 20px; }
  .fp-int-card { padding: 28px 24px; }
}


/* ==========================================================================
   34. PRODUKT-UNTERSEITE — WARUM LIMS SOFTWARE (Content-Verstärker)
   ========================================================================== */

.fp-why {
  padding: 100px 64px;
  background: var(--fp-gray-light);
}

.fp-why-inner { max-width: 1600px; margin: 0 auto; }

.fp-why-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  align-items: start;
}

.fp-why-col h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 12px 0 0;
}

.fp-why-text p {
  font-size: 17px;
  color: var(--fp-gray-text);
  line-height: 1.75;
  margin: 0 0 20px;
}

.fp-why-text p:last-child { margin-bottom: 0; }

.fp-why-text strong {
  color: var(--fp-navy);
  font-weight: 700;
}

@media (max-width: 1200px) {
  .fp-why { padding: 80px 48px; }
  .fp-why-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  .fp-why { padding: 64px 20px; }
  .fp-why-text p { font-size: 15px; }
}


/* ==========================================================================
   35. BRANCHEN-HUB — HAUPTBRANCHEN (4 große Karten)
   ========================================================================== */

.fp-ind-hub {
  padding: 120px 64px;
  background: var(--fp-gray-light);
}
.fp-ind-hub-inner { max-width: 1600px; margin: 0 auto; }

.fp-ind-hub-head {
  margin-bottom: 64px;
  max-width: 820px;
}

.fp-ind-hub-head h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 12px 0 16px;
}

.fp-ind-hub-head p {
  font-size: 17px;
  color: var(--fp-gray-mid);
  line-height: 1.65;
  margin: 0;
}

.fp-ind-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.fp-ind-big-card {
  background: #fff;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: all .3s cubic-bezier(.16,1,.3,1);
  position: relative;
}

.fp-ind-big-card:hover {
  border-color: var(--fp-navy);
  box-shadow: 0 20px 48px rgba(10,31,68,.14);
  transform: translateY(-4px);
}

.fp-ind-big-card:hover .fp-ibc-arrow {
  color: var(--fp-red);
  transform: translate(4px, -4px);
}

.fp-ibc-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--fp-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}

.fp-ibc-body { flex: 1; }

.fp-ibc-body h3 {
  font-size: 24px;
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.01em;
  margin: 0 0 14px;
}

.fp-ibc-body p {
  font-size: 15px;
  color: var(--fp-gray-mid);
  line-height: 1.65;
  margin: 0 0 24px;
}

.fp-ibc-refs {
  padding-top: 16px;
  border-top: 1px solid var(--fp-gray-border);
  font-size: 13px;
  color: var(--fp-gray-mid);
  line-height: 1.5;
}

.fp-ibc-refs strong {
  color: var(--fp-navy);
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fp-ibc-arrow {
  position: absolute;
  top: 40px;
  right: 36px;
  font-size: 24px;
  color: var(--fp-gray-border);
  transition: all .3s cubic-bezier(.16,1,.3,1);
  line-height: 1;
}

@media (max-width: 1200px) {
  .fp-ind-hub { padding: 100px 48px; }
}

@media (max-width: 768px) {
  .fp-ind-hub { padding: 80px 20px; }
  .fp-ind-hub-grid { grid-template-columns: 1fr; }
  .fp-ind-big-card { padding: 32px 28px; }
}

/* ==========================================================================
   36. BRANCHEN-HUB — WEITERE BRANCHEN (6 kompakte Karten)
   ========================================================================== */

.fp-ind-more {
  padding: 120px 64px;
  background: #fff;
}

.fp-ind-more-inner { max-width: 1600px; margin: 0 auto; }

.fp-ind-more-head {
  margin-bottom: 56px;
  max-width: 820px;
}

.fp-ind-more-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 12px 0 14px;
}

.fp-ind-more-head p {
  font-size: 17px;
  color: var(--fp-gray-mid);
  line-height: 1.6;
  margin: 0;
}

.fp-ind-more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.fp-ind-mini {
  background: var(--fp-gray-light);
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 28px 28px 24px;
  transition: all .25s;
}

.fp-ind-mini:hover {
  background: #fff;
  border-color: var(--fp-navy);
  box-shadow: 0 16px 32px rgba(10,31,68,.08);
  transform: translateY(-2px);
}

.fp-imi-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #fff;
  color: var(--fp-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 1px solid var(--fp-gray-border);
}

.fp-ind-mini h4 {
  font-size: 17px;
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.01em;
  margin: 0 0 8px;
  line-height: 1.25;
}

.fp-ind-mini p {
  font-size: 14px;
  color: var(--fp-gray-mid);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 1200px) {
  .fp-ind-more { padding: 100px 48px; }
  .fp-ind-more-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .fp-ind-more { padding: 80px 20px; }
  .fp-ind-more-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   37. BRANCHEN-HUB — USE-CASES
   ========================================================================== */

.fp-usecases {
  padding: 120px 64px;
  background: var(--fp-navy);
  color: #fff;
}

.fp-usecases-inner { max-width: 1600px; margin: 0 auto; }

.fp-usecases-head {
  margin-bottom: 56px;
  max-width: 820px;
}

.fp-usecases-head h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 12px 0 14px;
}

.fp-usecases-head h2 strong {
  font-weight: 800;
  color: #fff;
}

.fp-usecases-head p {
  font-size: 17px;
  color: rgba(255,255,255,.55);
  line-height: 1.6;
  margin: 0;
}

.fp-usecases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.fp-usecase {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 36px 32px;
  position: relative;
  transition: all .3s;
}

.fp-usecase:hover {
  background: rgba(255,255,255,.06);
  border-color: var(--fp-red);
  transform: translateY(-4px);
}

.fp-uc-num {
  position: absolute;
  top: 28px;
  right: 32px;
  font-size: 36px;
  font-weight: 900;
  color: rgba(255,255,255,.12);
  letter-spacing: -.02em;
  line-height: 1;
}

.fp-usecase h3 {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
  line-height: 1.3;
  margin: 40px 0 12px;
  padding-right: 40px;
}

.fp-usecase p {
  font-size: 14px;
  color: rgba(255,255,255,.7);
  line-height: 1.65;
  margin: 0 0 20px;
}

.fp-uc-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fp-red);
  background: rgba(227,6,19,.12);
  padding: 4px 10px;
  border-radius: 4px;
}

@media (max-width: 1200px) {
  .fp-usecases { padding: 100px 48px; }
  .fp-usecases-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .fp-usecases { padding: 80px 20px; }
}

/* ==========================================================================
   38. BRANCHEN-HUB — GEMEINSAME ANFORDERUNGEN
   ========================================================================== */

.fp-requirements {
  padding: 120px 64px;
  background: var(--fp-gray-light);
}

.fp-req-inner { max-width: 1600px; margin: 0 auto; }

.fp-req-head {
  margin-bottom: 56px;
  max-width: 820px;
}

.fp-req-head h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 12px 0 16px;
}

.fp-req-head p {
  font-size: 17px;
  color: var(--fp-gray-mid);
  line-height: 1.65;
  margin: 0;
}

.fp-req-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.fp-req-card {
  background: #fff;
  border: 1px solid var(--fp-gray-border);
  border-radius: 16px;
  padding: 32px 28px 28px;
  transition: all .25s;
}

.fp-req-card:hover {
  border-color: var(--fp-navy);
  box-shadow: 0 16px 32px rgba(10,31,68,.08);
  transform: translateY(-2px);
}

.fp-req-check {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(22,163,74,.1);
  color: #16A34A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 20px;
}

.fp-req-card h4 {
  font-size: 16px;
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.01em;
  margin: 0 0 10px;
  line-height: 1.3;
}

.fp-req-card p {
  font-size: 14px;
  color: var(--fp-gray-mid);
  line-height: 1.6;
  margin: 0;
}

.fp-req-card a {
  color: var(--fp-navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--fp-red);
  text-underline-offset: 3px;
}

.fp-req-card a:hover { color: var(--fp-red); }

@media (max-width: 1200px) {
  .fp-requirements { padding: 100px 48px; }
  .fp-req-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .fp-requirements { padding: 80px 20px; }
  .fp-req-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   39. BRANCHEN-HUB — REFERENZEN-WALL
   ========================================================================== */

.fp-ref-wall {
  padding: 120px 64px;
  background: #fff;
}

.fp-ref-wall-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.fp-ref-wall-head {
  margin-bottom: 48px;
}

.fp-ref-wall-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 12px 0 14px;
}

.fp-ref-wall-head p {
  font-size: 17px;
  color: var(--fp-gray-mid);
  line-height: 1.6;
  margin: 0;
}

.fp-ref-wall-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}

.fp-ref-chip {
  font-size: 15px;
  font-weight: 700;
  color: var(--fp-navy);
  background: var(--fp-gray-light);
  border: 1px solid var(--fp-gray-border);
  padding: 12px 22px;
  border-radius: 30px;
  transition: all .2s;
}

.fp-ref-chip:hover {
  background: var(--fp-navy);
  color: #fff;
  border-color: var(--fp-navy);
  transform: translateY(-2px);
}

.fp-ref-wall-foot {
  display: flex;
  justify-content: center;
}

.fp-ref-wall-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--fp-red);
  text-decoration: none;
  padding: 10px 4px;
  transition: all .2s;
}

.fp-ref-wall-link:hover {
  gap: 12px;
}

.fp-ref-wall-link span {
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 1200px) {
  .fp-ref-wall { padding: 100px 48px; }
}

@media (max-width: 768px) {
  .fp-ref-wall { padding: 80px 20px; }
  .fp-ref-chip { font-size: 13px; padding: 10px 16px; }
}


/* ==========================================================================
   40. BRANCHEN-UNTERSEITEN — GEMEINSAMES LAYOUT
   Wird von allen 4 Branchenseiten (Automotive, Gießerei, Chemie, Stahl) genutzt
   ========================================================================== */

/* --- 40.1 CHALLENGES (3 Karten auf Off-White) --- */
.fp-challenges { padding: 120px 64px; background: var(--fp-gray-light); }
.fp-chal-inner { max-width: 1600px; margin: 0 auto; }

.fp-chal-head {
  margin-bottom: 56px;
  max-width: 820px;
}
.fp-chal-head h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 12px 0 16px;
}
.fp-chal-head p {
  font-size: 17px;
  color: var(--fp-gray-mid);
  line-height: 1.65;
  margin: 0;
}

.fp-chal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.fp-chal-card {
  background: #fff;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 40px 36px 36px;
  position: relative;
  transition: all .3s cubic-bezier(.16,1,.3,1);
}
.fp-chal-card:hover {
  border-color: var(--fp-red);
  box-shadow: 0 20px 48px rgba(10,31,68,.1);
  transform: translateY(-4px);
}

.fp-chal-num {
  position: absolute;
  top: 32px;
  right: 36px;
  font-size: 48px;
  font-weight: 900;
  color: var(--fp-gray-border);
  letter-spacing: -.02em;
  line-height: 1;
}

.fp-chal-card h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.01em;
  margin: 40px 0 12px;
  padding-right: 40px;
  line-height: 1.25;
}

.fp-chal-card p {
  font-size: 15px;
  color: var(--fp-gray-mid);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 1200px) {
  .fp-challenges { padding: 100px 48px; }
  .fp-chal-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .fp-challenges { padding: 80px 20px; }
  .fp-chal-card { padding: 32px 28px 28px; }
}

/* --- 40.2 SOLUTION (Zweispalter: Text + Feature-Liste) --- */
.fp-solution { padding: 120px 64px; background: #fff; }
.fp-sol-inner { max-width: 1600px; margin: 0 auto; }

.fp-sol-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.fp-sol-text h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 12px 0 24px;
}
.fp-sol-text p {
  font-size: 17px;
  color: var(--fp-gray-text);
  line-height: 1.75;
  margin: 0 0 18px;
}
.fp-sol-text strong { color: var(--fp-navy); font-weight: 700; }

.fp-sol-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fp-sol-feat {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 28px;
  background: var(--fp-gray-light);
  border-radius: 14px;
  border: 1px solid transparent;
  transition: all .25s;
}
.fp-sol-feat:hover {
  border-color: var(--fp-navy);
  background: #fff;
  box-shadow: 0 12px 28px rgba(10,31,68,.06);
}

.fp-sol-feat-icon {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  background: rgba(22,163,74,.12);
  color: #16A34A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: -.01em;
}

/* Stat-Variante: für mehrstellige Werte/Prozente/Jahre */
.fp-sol-feat-icon.is-stat {
  min-width: 56px;
  height: 36px;
  font-size: 15px;
  padding: 0 10px;
}

.fp-sol-feat h4 {
  font-size: 15px;
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.01em;
  margin: 0 0 4px;
  line-height: 1.3;
}

.fp-sol-feat p {
  font-size: 14px;
  color: var(--fp-gray-mid);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 1200px) {
  .fp-solution { padding: 100px 48px; }
  .fp-sol-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 768px) {
  .fp-solution { padding: 80px 20px; }
  .fp-sol-feat { padding: 20px 20px; }
}

/* --- 40.3 BRANCHE-REFS (Großes Zitat + Kunden-Chips) --- */
.fp-branche-refs { padding: 120px 64px; background: var(--fp-navy); color: #fff; }
.fp-brefs-inner { max-width: 1600px; margin: 0 auto; }

.fp-brefs-head { margin-bottom: 56px; max-width: 820px; }
.fp-brefs-head .fp-kicker-dark { color: rgba(255,255,255,.55); }
.fp-brefs-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 12px 0 0;
}

.fp-brefs-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  align-items: start;
}

.fp-bref-quote {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--fp-red);
  border-radius: 16px;
  padding: 44px 48px;
}

.fp-bref-quote blockquote {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-style: italic;
  font-weight: 500;
  color: #fff;
  line-height: 1.5;
  margin: 0 0 24px;
}

.fp-bref-quote-meta strong {
  display: block;
  font-size: 15px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 2px;
}

.fp-bref-quote-meta span {
  font-size: 13px;
  color: var(--fp-red);
  font-weight: 600;
}

.fp-bref-logos {
  background: rgba(255,255,255,.03);
  border: 1px dashed rgba(255,255,255,.15);
  border-radius: 16px;
  padding: 32px 32px 28px;
}

.fp-bref-logos-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin: 0 0 20px;
}

.fp-bref-logos-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.fp-bref-logos .fp-ref-chip {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #fff;
  font-size: 13px;
  padding: 8px 14px;
}
.fp-bref-logos .fp-ref-chip:hover {
  background: var(--fp-red);
  border-color: var(--fp-red);
}

.fp-bref-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--fp-red);
  text-decoration: none;
  transition: all .2s;
}
.fp-bref-link:hover { gap: 12px; color: #fff; }
.fp-bref-link span { font-size: 16px; line-height: 1; }

@media (max-width: 1200px) {
  .fp-branche-refs { padding: 100px 48px; }
  .fp-brefs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .fp-branche-refs { padding: 80px 20px; }
  .fp-bref-quote { padding: 32px 28px; }
}

/* --- 40.4 MODULES-RECO (4 empfohlene Module) --- */
.fp-modules-reco { padding: 120px 64px; background: var(--fp-gray-light); }
.fp-mrc-inner { max-width: 1600px; margin: 0 auto; }

.fp-mrc-head { margin-bottom: 48px; max-width: 820px; }
.fp-mrc-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 12px 0 14px;
}
.fp-mrc-head h2 strong { font-weight: 800; color: var(--fp-navy); }
.fp-mrc-head p {
  font-size: 17px;
  color: var(--fp-gray-mid);
  line-height: 1.6;
  margin: 0;
}

.fp-mrc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.fp-mrc-card {
  background: #fff;
  border: 1px solid var(--fp-gray-border);
  border-radius: 16px;
  padding: 28px 28px 24px;
  transition: all .25s;
}
.fp-mrc-card:hover {
  border-color: var(--fp-navy);
  box-shadow: 0 16px 32px rgba(10,31,68,.08);
  transform: translateY(-2px);
}

.fp-mrc-card h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.01em;
  margin: 0 0 10px;
  line-height: 1.3;
}

.fp-mrc-card p {
  font-size: 14px;
  color: var(--fp-gray-mid);
  line-height: 1.55;
  margin: 0;
}

.fp-mrc-note {
  text-align: right;
  margin: 0;
}
.fp-mrc-note a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--fp-red);
  text-decoration: none;
  transition: all .2s;
}
.fp-mrc-note a:hover { gap: 10px; }
.fp-mrc-note span { font-size: 16px; line-height: 1; }

@media (max-width: 1200px) {
  .fp-modules-reco { padding: 100px 48px; }
  .fp-mrc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .fp-modules-reco { padding: 80px 20px; }
  .fp-mrc-grid { grid-template-columns: 1fr; }
}

/* --- 40.5 COMPLIANCE (4 Standard-Karten) --- */
.fp-compliance { padding: 120px 64px; background: #fff; }
.fp-comp-inner { max-width: 1600px; margin: 0 auto; }

.fp-comp-head { margin-bottom: 48px; max-width: 820px; }
.fp-comp-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 12px 0 0;
}

.fp-comp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.fp-comp-item {
  padding: 32px 28px 28px;
  border: 1px solid var(--fp-gray-border);
  border-radius: 16px;
  background: #fff;
  transition: all .25s;
}
.fp-comp-item:hover {
  border-color: var(--fp-navy);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(10,31,68,.06);
}

.fp-comp-mark {
  display: inline-flex;
  padding: 5px 11px;
  background: var(--fp-navy);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  border-radius: 4px;
  margin-bottom: 16px;
}

.fp-comp-item h4 {
  font-size: 16px;
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.01em;
  margin: 0 0 8px;
  line-height: 1.3;
}
.fp-comp-item h4 a {
  color: var(--fp-navy);
  text-decoration: underline;
  text-decoration-color: var(--fp-red);
  text-underline-offset: 3px;
}
.fp-comp-item h4 a:hover { color: var(--fp-red); }

.fp-comp-item p {
  font-size: 13px;
  color: var(--fp-gray-mid);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 1200px) {
  .fp-compliance { padding: 100px 48px; }
  .fp-comp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .fp-compliance { padding: 80px 20px; }
  .fp-comp-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   41. FOOTER TRADEMARK DISCLAIMER (SAP PartnerEdge Guidelines)
   Pflichttext laut SAP PartnerEdge Logo & Communication Guidelines, Seite 15
   ========================================================================== */

.fp-footer-trademarks {
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px 0 20px;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 20px;
}

.fp-footer-trademarks p {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255,255,255,.45);
  letter-spacing: .01em;
  max-width: 1100px;
}

@media (max-width: 1200px) {
  .fp-footer-trademarks { padding: 20px 0 16px; margin-bottom: 16px; }
}
@media (max-width: 768px) {
  .fp-footer-trademarks p { font-size: 10.5px; line-height: 1.55; }
}


/* ==========================================================================
   42. KICKER-FIX für hellen Hintergrund
   .fp-kicker war original für dunkle Hintergründe ausgelegt (weiß 55%).
   Auf hellem Grund war Text unsichtbar.
   Universalregel: Jede Section mit hellem Hintergrund bekommt automatisch
   den dunklen Kicker. Klammern bleiben rot.
   ========================================================================== */

.fp-solution .fp-kicker,
.fp-modules-reco .fp-kicker,
.fp-mrc-head .fp-kicker,
.fp-contact-person .fp-kicker,
.fp-cp-text .fp-kicker,
.fp-loc-arrival .fp-kicker,
.fp-mission .fp-kicker,
.fp-mis-text .fp-kicker,
.fp-leadership .fp-kicker,
.fp-lead-head .fp-kicker,
.fp-values .fp-kicker,
.fp-val-head .fp-kicker,
.fp-ref-quote-bg-light .fp-kicker,
.fp-ref-quote-bg-light .fp-rql-meta .fp-kicker {
  color: var(--fp-navy);
  opacity: .65;
}

.fp-solution .fp-kicker .fp-br,
.fp-modules-reco .fp-kicker .fp-br,
.fp-mrc-head .fp-kicker .fp-br,
.fp-contact-person .fp-kicker .fp-br,
.fp-cp-text .fp-kicker .fp-br,
.fp-loc-arrival .fp-kicker .fp-br,
.fp-mission .fp-kicker .fp-br,
.fp-mis-text .fp-kicker .fp-br,
.fp-leadership .fp-kicker .fp-br,
.fp-lead-head .fp-kicker .fp-br,
.fp-values .fp-kicker .fp-br,
.fp-val-head .fp-kicker .fp-br,
.fp-ref-quote-bg-light .fp-kicker .fp-br,
.fp-ref-quote-bg-light .fp-rql-meta .fp-kicker .fp-br {
  opacity: 1;
  color: var(--fp-red);
}


/* ==========================================================================
   43. KONTAKTSEITE
   Kontakt-Kanäle, Ansprechpartner, Standort
   ========================================================================== */

/* --- 43.1 KONTAKT-KANÄLE (3 Karten) --- */
.fp-contact-channels { padding: 120px 64px; background: var(--fp-gray-light); }
.fp-cc-inner { max-width: 1600px; margin: 0 auto; }

.fp-cc-head { margin-bottom: 56px; max-width: 820px; }
.fp-cc-head h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 12px 0 16px;
}
.fp-cc-head p {
  font-size: 17px;
  color: var(--fp-gray-mid);
  line-height: 1.65;
  margin: 0;
}

.fp-cc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.fp-cc-card {
  background: #fff;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 40px 36px 36px;
  transition: all .3s cubic-bezier(.16,1,.3,1);
  text-align: left;
}
.fp-cc-card:hover {
  border-color: var(--fp-navy);
  box-shadow: 0 20px 48px rgba(10,31,68,.1);
  transform: translateY(-4px);
}

.fp-cc-card-highlight {
  background: var(--fp-navy);
  color: #fff;
}
.fp-cc-card-highlight:hover {
  border-color: var(--fp-red);
  box-shadow: 0 20px 48px rgba(10,31,68,.25);
}

.fp-cc-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(227,6,19,.08);
  color: var(--fp-red);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.fp-cc-card-highlight .fp-cc-icon {
  background: rgba(255,255,255,.08);
  color: #fff;
}

.fp-cc-card h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.01em;
  margin: 0 0 4px;
  line-height: 1.25;
}
.fp-cc-card-highlight h3 { color: #fff; }

.fp-cc-meta {
  font-size: 13px;
  color: var(--fp-gray-mid);
  margin: 0 0 20px;
}
.fp-cc-card-highlight .fp-cc-meta { color: rgba(255,255,255,.7); }

.fp-cc-link {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--fp-red);
  text-decoration: none;
  margin-bottom: 16px;
  transition: opacity .2s;
}
.fp-cc-card-highlight .fp-cc-link { color: #fff; }
.fp-cc-link:hover { opacity: .8; }

.fp-cc-hours {
  font-size: 13px;
  color: var(--fp-gray-mid);
  line-height: 1.55;
  margin: 0;
}
.fp-cc-card-highlight .fp-cc-hours { color: rgba(255,255,255,.6); }

@media (max-width: 1200px) {
  .fp-contact-channels { padding: 100px 48px; }
  .fp-cc-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 768px) {
  .fp-contact-channels { padding: 80px 20px; }
  .fp-cc-card { padding: 32px 28px 28px; }
}

/* --- 43.2 ANSPRECHPARTNER (2 Spalten: Text + Personenkarte) --- */
.fp-contact-person { padding: 120px 64px; background: #fff; }
.fp-cp-inner { max-width: 1600px; margin: 0 auto; }

.fp-cp-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: center;
}

.fp-cp-text h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 12px 0 24px;
}

.fp-cp-text p {
  font-size: 17px;
  color: var(--fp-gray-text);
  line-height: 1.75;
  margin: 0 0 18px;
}
.fp-cp-text strong { color: var(--fp-navy); font-weight: 700; }

.fp-cp-contacts {
  display: flex;
  gap: 40px;
  margin: 32px 0;
  padding: 24px 28px;
  background: var(--fp-gray-light);
  border-radius: 14px;
  border-left: 3px solid var(--fp-red);
}

.fp-cp-contact-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fp-cp-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fp-gray-mid);
}

.fp-cp-contact-item a {
  font-size: 18px;
  font-weight: 700;
  color: var(--fp-navy);
  text-decoration: none;
  transition: color .2s;
}
.fp-cp-contact-item a:hover { color: var(--fp-red); }

.fp-cp-cta { margin-top: 8px; }

/* Personen-Karte rechts */
.fp-cp-card {
  background: var(--fp-gray-light);
  border: 1px solid var(--fp-gray-border);
  border-radius: 20px;
  padding: 44px 40px 36px;
  text-align: center;
}

.fp-cp-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fp-navy) 0%, var(--fp-blue) 100%);
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fp-cp-initials {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .02em;
}

.fp-cp-card h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--fp-navy);
  margin: 0 0 4px;
  letter-spacing: -.01em;
}

.fp-cp-role {
  font-size: 13px;
  color: var(--fp-red);
  font-weight: 600;
  margin: 0 0 24px;
}

.fp-cp-quote {
  font-size: 14px;
  font-style: italic;
  color: var(--fp-gray-text);
  line-height: 1.65;
  margin: 0 0 24px;
}

.fp-cp-card-meta {
  display: flex;
  gap: 20px;
  justify-content: center;
  padding-top: 20px;
  border-top: 1px solid var(--fp-gray-border);
}

.fp-cp-card-meta > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}

.fp-cp-meta-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fp-gray-mid);
}

.fp-cp-card-meta a {
  font-size: 13px;
  font-weight: 700;
  color: var(--fp-navy);
  text-decoration: none;
}
.fp-cp-card-meta a:hover { color: var(--fp-red); }

@media (max-width: 1200px) {
  .fp-contact-person { padding: 100px 48px; }
  .fp-cp-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 768px) {
  .fp-contact-person { padding: 80px 20px; }
  .fp-cp-contacts { flex-direction: column; gap: 16px; padding: 20px; }
  .fp-cp-card { padding: 36px 28px 28px; }
}

/* --- 43.3 STANDORT (Adresse + Anfahrt) --- */
.fp-location { padding: 120px 64px; background: var(--fp-gray-light); }
.fp-loc-inner { max-width: 1600px; margin: 0 auto; }

.fp-loc-head { margin-bottom: 56px; max-width: 820px; }
.fp-loc-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 12px 0 16px;
}
.fp-loc-head p {
  font-size: 17px;
  color: var(--fp-gray-mid);
  line-height: 1.65;
  margin: 0;
}

.fp-loc-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 32px;
  align-items: start;
}

/* Adresse-Block */
.fp-loc-address {
  background: var(--fp-navy);
  color: #fff;
  border-radius: 20px;
  padding: 44px 44px 40px;
}

.fp-loc-address h3 {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
  margin: 0 0 20px;
}

.fp-loc-address address {
  font-style: normal;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,.85);
  margin: 0 0 32px;
}

.fp-loc-address strong {
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}

.fp-loc-contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.fp-loc-contact p {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fp-loc-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.fp-loc-contact a {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: color .2s;
}
.fp-loc-contact a:hover { color: var(--fp-red); }

/* Anfahrt-Block */
.fp-loc-arrival {
  background: #fff;
  border-radius: 20px;
  padding: 44px 44px 36px;
  border: 1px solid var(--fp-gray-border);
}

.fp-loc-arrival h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.01em;
  margin: 0 0 28px;
}

.fp-loc-arrival-item {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--fp-gray-border);
}
.fp-loc-arrival-item:last-child { border-bottom: none; padding-bottom: 0; }
.fp-loc-arrival-item:first-child { padding-top: 0; }

.fp-loc-arrival-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--fp-gray-light);
  color: var(--fp-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fp-loc-arrival-item h4 {
  font-size: 16px;
  font-weight: 800;
  color: var(--fp-navy);
  margin: 0 0 6px;
  letter-spacing: -.01em;
}

.fp-loc-arrival-item p {
  font-size: 14px;
  color: var(--fp-gray-mid);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 1200px) {
  .fp-location { padding: 100px 48px; }
  .fp-loc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .fp-location { padding: 80px 20px; }
  .fp-loc-address, .fp-loc-arrival { padding: 32px 28px; }
}


/* ==========================================================================
   44. ÜBER UNS / UNTERNEHMEN
   Mission, Historie, Geschäftsführung, Werte, Karriere
   ========================================================================== */

/* --- 44.1 MISSION (Zweispalter: Text + Stats) --- */
.fp-mission { padding: 120px 64px; background: #fff; }
.fp-mis-inner { max-width: 1600px; margin: 0 auto; }

.fp-mis-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: center;
}

.fp-mis-text h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 12px 0 24px;
}

.fp-mis-text p {
  font-size: 17px;
  color: var(--fp-gray-text);
  line-height: 1.75;
  margin: 0 0 18px;
}
.fp-mis-text strong { color: var(--fp-navy); font-weight: 700; }

.fp-mis-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.fp-mis-stat {
  background: var(--fp-gray-light);
  border-radius: 16px;
  padding: 32px 28px;
  border-left: 3px solid var(--fp-red);
  text-align: left;
}

.fp-mis-stat-num {
  font-size: clamp(2.2rem, 3.5vw, 2.8rem);
  font-weight: 900;
  color: var(--fp-navy);
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 10px;
}

.fp-mis-stat-label {
  font-size: 13px;
  color: var(--fp-gray-mid);
  line-height: 1.4;
  font-weight: 500;
}

@media (max-width: 1200px) {
  .fp-mission { padding: 100px 48px; }
  .fp-mis-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 768px) {
  .fp-mission { padding: 80px 20px; }
  .fp-mis-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .fp-mis-stat { padding: 24px 20px; }
}

/* --- 44.2 HISTORIE (4 Zeitpunkte + Bottom-Link) --- */
.fp-history { padding: 120px 64px; background: var(--fp-navy); color: #fff; }
.fp-his-inner { max-width: 1600px; margin: 0 auto; }

.fp-his-head { margin-bottom: 56px; max-width: 820px; }
.fp-his-head .fp-kicker-dark { color: rgba(255,255,255,.55); }
.fp-his-head h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 12px 0 0;
}

.fp-his-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.fp-his-item {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 32px 28px 28px;
  transition: all .3s cubic-bezier(.16,1,.3,1);
}
.fp-his-item:hover {
  border-color: var(--fp-red);
  background: rgba(255,255,255,.06);
  transform: translateY(-3px);
}

.fp-his-year {
  display: inline-block;
  padding: 4px 11px;
  background: var(--fp-red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  border-radius: 4px;
  margin-bottom: 18px;
}

.fp-his-item h3 {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
  margin: 0 0 12px;
  line-height: 1.3;
}

.fp-his-item p {
  font-size: 14px;
  color: rgba(255,255,255,.7);
  line-height: 1.6;
  margin: 0;
}

.fp-his-bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.fp-his-bottom p {
  font-size: 14px;
  color: rgba(255,255,255,.55);
  margin: 0;
}

.fp-his-bottom a {
  color: var(--fp-red);
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s;
}
.fp-his-bottom a:hover { opacity: .8; }

@media (max-width: 1200px) {
  .fp-history { padding: 100px 48px; }
  .fp-his-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .fp-history { padding: 80px 20px; }
  .fp-his-grid { grid-template-columns: 1fr; }
}

/* --- 44.3 GESCHÄFTSFÜHRUNG (3 Karten) --- */
.fp-leadership { padding: 120px 64px; background: var(--fp-gray-light); }
.fp-lead-inner { max-width: 1600px; margin: 0 auto; }

.fp-lead-head { margin-bottom: 56px; max-width: 820px; }
.fp-lead-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 12px 0 14px;
}
.fp-lead-head p {
  font-size: 17px;
  color: var(--fp-gray-mid);
  line-height: 1.6;
  margin: 0;
}

.fp-lead-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.fp-lead-card {
  background: #fff;
  border-radius: 20px;
  padding: 44px 36px 36px;
  text-align: center;
  border: 1px solid transparent;
  transition: all .25s;
}
.fp-lead-card:hover {
  border-color: var(--fp-navy);
  box-shadow: 0 16px 32px rgba(10,31,68,.08);
  transform: translateY(-3px);
}

.fp-lead-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fp-navy) 0%, var(--fp-blue) 100%);
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fp-lead-initials {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .02em;
}

.fp-lead-card h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.01em;
  margin: 0 0 4px;
}

.fp-lead-role {
  font-size: 13px;
  color: var(--fp-red);
  font-weight: 600;
  margin: 0 0 18px;
}

.fp-lead-desc {
  font-size: 14px;
  color: var(--fp-gray-mid);
  line-height: 1.6;
  margin: 0;
}

/* Pull-Quote innerhalb einer Leadership-Karte (z.B. Peter Niemann) */
.fp-lead-quote {
  margin: 20px 0 0;
  padding: 16px 18px;
  border-left: 3px solid var(--fp-red);
  background: rgba(10, 31, 68, .04);
  border-radius: 0 6px 6px 0;
}
.fp-lead-quote p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.55;
  font-style: italic;
  color: var(--fp-navy);
}
.fp-lead-quote cite {
  display: block;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  color: var(--fp-blue);
  letter-spacing: .01em;
}

@media (max-width: 1200px) {
  .fp-leadership { padding: 100px 48px; }
  .fp-lead-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 768px) {
  .fp-leadership { padding: 80px 20px; }
  .fp-lead-card { padding: 36px 28px 28px; }
}

/* --- 44.4 WERTE (4 Karten asymmetrisch nummeriert) --- */
.fp-values { padding: 120px 64px; background: #fff; }
.fp-val-inner { max-width: 1600px; margin: 0 auto; }

.fp-val-head { margin-bottom: 56px; max-width: 820px; }
.fp-val-head .fp-kicker-dark { color: var(--fp-gray-mid); }
.fp-val-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 12px 0 14px;
}
.fp-val-head p {
  font-size: 17px;
  color: var(--fp-gray-mid);
  line-height: 1.6;
  margin: 0;
}

.fp-val-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.fp-val-card {
  background: var(--fp-gray-light);
  border-radius: 20px;
  padding: 40px 36px 36px;
  position: relative;
  transition: all .3s cubic-bezier(.16,1,.3,1);
  border: 1px solid transparent;
}
.fp-val-card:hover {
  border-color: var(--fp-red);
  background: #fff;
  box-shadow: 0 20px 48px rgba(10,31,68,.1);
  transform: translateY(-3px);
}

.fp-val-num {
  position: absolute;
  top: 32px;
  right: 36px;
  font-size: 56px;
  font-weight: 900;
  color: var(--fp-gray-border);
  letter-spacing: -.02em;
  line-height: 1;
}

.fp-val-card h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.01em;
  margin: 40px 0 12px;
  padding-right: 48px;
  line-height: 1.25;
}

.fp-val-card p {
  font-size: 15px;
  color: var(--fp-gray-mid);
  line-height: 1.65;
  margin: 0;
}

/* 5. Werte-Karte spannt beide Spalten — keine Waisen-Karte in der zweiten Reihe */
.fp-val-grid .fp-val-card:nth-child(5) {
  grid-column: 1 / -1;
}

@media (max-width: 1200px) {
  .fp-values { padding: 100px 48px; }
  .fp-val-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .fp-values { padding: 80px 20px; }
  .fp-val-card { padding: 32px 28px 28px; }
}

/* --- 44.5 KARRIERE (Zweispalter: Text + Visual mit Quote + Perks) --- */
.fp-career { padding: 120px 64px; background: var(--fp-navy); color: #fff; }
.fp-car-inner { max-width: 1600px; margin: 0 auto; }

.fp-car-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center;
}

.fp-car-text .fp-kicker { color: rgba(255,255,255,.55); opacity: 1; }
.fp-car-text .fp-kicker .fp-br { color: var(--fp-red); }

.fp-car-text h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 12px 0 24px;
}

.fp-car-text p {
  font-size: 17px;
  color: rgba(255,255,255,.75);
  line-height: 1.75;
  margin: 0 0 18px;
}
.fp-car-text strong { color: #fff; font-weight: 700; }

.fp-car-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.fp-btn-ghost-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: all .25s;
}
.fp-btn-ghost-light:hover {
  border-color: #fff;
  background: rgba(255,255,255,.06);
}

/* Visual rechts */
.fp-car-visual {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fp-car-quote {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--fp-red);
  border-radius: 16px;
  padding: 36px 36px 32px;
  position: relative;
}

.fp-car-quote-mark {
  font-size: 64px;
  font-weight: 900;
  color: var(--fp-red);
  line-height: .8;
  margin: 0 0 12px;
}

.fp-car-quote p:not(.fp-car-quote-mark) {
  font-size: 17px;
  font-style: italic;
  color: #fff;
  line-height: 1.5;
  margin: 0;
}

.fp-car-perks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.fp-car-perk {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 18px 20px;
}

.fp-car-perk strong {
  display: block;
  font-size: 14px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 4px;
}

.fp-car-perk span {
  font-size: 12px;
  color: rgba(255,255,255,.6);
  line-height: 1.4;
}

@media (max-width: 1200px) {
  .fp-career { padding: 100px 48px; }
  .fp-car-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 768px) {
  .fp-career { padding: 80px 20px; }
  .fp-car-quote { padding: 28px 24px; }
  .fp-car-perks { grid-template-columns: 1fr; gap: 10px; }
}


/* ==========================================================================
   45. REFERENZEN-SEITE
   Große Zitate (alternierend hell/dunkel) + Kundenwand mit Filter
   ========================================================================== */

/* --- 45.1 GROSSE ZITATE (3 Stück alternierend) --- */
.fp-ref-quote-large { padding: 120px 64px; }

.fp-ref-quote-bg-light {
  background: var(--fp-gray-light);
  color: var(--fp-gray-text);
}

.fp-ref-quote-bg-dark {
  background: var(--fp-navy);
  color: #fff;
}

.fp-rql-inner { max-width: 1400px; margin: 0 auto; }

.fp-rql-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  align-items: center;
}

/* META-Spalte (links) */
.fp-rql-meta h2 {
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 12px 0 12px;
}
.fp-ref-quote-bg-light .fp-rql-meta h2 { color: var(--fp-navy); }
.fp-ref-quote-bg-dark .fp-rql-meta h2 { color: #fff; }

.fp-rql-tag {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 36px;
  line-height: 1.5;
}
.fp-ref-quote-bg-light .fp-rql-tag { color: var(--fp-gray-mid); }
.fp-ref-quote-bg-dark .fp-rql-tag { color: rgba(255,255,255,.6); }

/* Author Block */
.fp-rql-author {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,.08);
}
.fp-ref-quote-bg-dark .fp-rql-author {
  border-top-color: rgba(255,255,255,.1);
}

.fp-rql-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fp-navy) 0%, var(--fp-blue) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fp-rql-avatar-light {
  background: linear-gradient(135deg, var(--fp-red) 0%, #C70510 100%);
}

.fp-rql-initials {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .02em;
}

.fp-rql-author > div:not(.fp-rql-avatar) strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 2px;
}
.fp-ref-quote-bg-light .fp-rql-author strong { color: var(--fp-navy); }
.fp-ref-quote-bg-dark .fp-rql-author strong { color: #fff; }

.fp-rql-author > div:not(.fp-rql-avatar) span {
  font-size: 13px;
  font-weight: 500;
}
.fp-ref-quote-bg-light .fp-rql-author span { color: var(--fp-red); }
.fp-ref-quote-bg-dark .fp-rql-author span { color: var(--fp-red); }

/* QUOTE-Spalte (rechts) */
.fp-rql-quote {
  position: relative;
  padding-left: 40px;
}

.fp-rql-mark {
  position: absolute;
  top: -20px;
  left: 0;
  font-size: 120px;
  font-weight: 900;
  color: var(--fp-red);
  line-height: 1;
  letter-spacing: -.04em;
}

.fp-rql-quote blockquote {
  font-size: clamp(1.4rem, 2.1vw, 1.8rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.4;
  margin: 0 0 28px;
  letter-spacing: -.01em;
}
.fp-ref-quote-bg-light .fp-rql-quote blockquote { color: var(--fp-navy); }
.fp-ref-quote-bg-dark .fp-rql-quote blockquote { color: #fff; }

.fp-rql-context {
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,.08);
}
.fp-ref-quote-bg-light .fp-rql-context {
  color: var(--fp-gray-mid);
}
.fp-ref-quote-bg-dark .fp-rql-context {
  color: rgba(255,255,255,.7);
  border-top-color: rgba(255,255,255,.1);
}

@media (max-width: 1200px) {
  .fp-ref-quote-large { padding: 100px 48px; }
  .fp-rql-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 768px) {
  .fp-ref-quote-large { padding: 80px 20px; }
  .fp-rql-quote { padding-left: 28px; }
  .fp-rql-mark { font-size: 80px; top: -12px; }
}

/* --- 45.2 KUNDEN-WAND mit Filter --- */
.fp-ref-wall { padding: 120px 64px; background: #fff; }
.fp-rw-inner { max-width: 1600px; margin: 0 auto; }

.fp-rw-head { margin-bottom: 40px; max-width: 820px; }
.fp-rw-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 12px 0 14px;
}
.fp-rw-head p {
  font-size: 17px;
  color: var(--fp-gray-mid);
  line-height: 1.6;
  margin: 0;
}

/* Filter-Buttons */
.fp-rw-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--fp-gray-border);
}

.fp-rw-filter {
  padding: 10px 20px;
  background: var(--fp-gray-light);
  color: var(--fp-navy);
  border: 1.5px solid transparent;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s;
  font-family: inherit;
}

.fp-rw-filter:hover {
  border-color: var(--fp-navy);
  background: #fff;
}

.fp-rw-filter.is-active {
  background: var(--fp-navy);
  color: #fff;
  border-color: var(--fp-navy);
}

/* Kundenkarten Grid */
.fp-rw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.fp-rw-card {
  background: #fff;
  border: 1px solid var(--fp-gray-border);
  border-radius: 14px;
  padding: 28px 24px 24px;
  transition: all .3s cubic-bezier(.16,1,.3,1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 130px;
  position: relative;
  overflow: hidden;
}

.fp-rw-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 3px;
  background: var(--fp-red);
  transition: width .3s ease;
}

.fp-rw-card:hover {
  border-color: var(--fp-navy);
  box-shadow: 0 12px 28px rgba(10,31,68,.08);
  transform: translateY(-2px);
}
.fp-rw-card:hover::before { width: 100%; }

.fp-rw-card.is-hidden {
  display: none;
}

.fp-rw-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.01em;
  line-height: 1.25;
  margin-bottom: 16px;
}

.fp-rw-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fp-red);
  align-self: flex-start;
}

.fp-rw-note {
  font-size: 14px;
  color: var(--fp-gray-mid);
  text-align: center;
  margin: 32px 0 0;
  font-style: italic;
}

@media (max-width: 1200px) {
  .fp-ref-wall { padding: 100px 48px; }
  .fp-rw-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .fp-rw-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .fp-ref-wall { padding: 80px 20px; }
  .fp-rw-filter { padding: 8px 16px; font-size: 13px; }
  .fp-rw-card { padding: 22px 20px 20px; min-height: 110px; }
  .fp-rw-name { font-size: 15px; margin-bottom: 12px; }
}

/* ==========================================================================
   LEGAL PAGES (Impressum / Datenschutz / Privacy Policy)
   eRecht24 Sync-Inhalt im FP-Designstil
   ========================================================================== */

/* Hero bleibt im Standard-Look (Navy mit weißer Schrift) – kein Override nötig */

.fp-legal-content {
  background: #ffffff;
  padding: 60px 0 40px;
}

.fp-legal-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Typografie für eRecht24-Inhalt */
.fp-legal-body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #2c3a4f;
}

.fp-legal-body h1,
.fp-legal-body h2,
.fp-legal-body h3,
.fp-legal-body h4,
.fp-legal-body h5,
.fp-legal-body h6 {
  font-family: 'Fraunces', Georgia, serif;
  color: #0A1F44;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 2em;
  margin-bottom: 0.6em;
}

.fp-legal-body h1 { font-size: 28px; }
.fp-legal-body h2 { font-size: 24px; border-bottom: 2px solid #E30613; padding-bottom: 8px; }
.fp-legal-body h3 { font-size: 20px; color: #1A3A6B; }
.fp-legal-body h4 { font-size: 17px; color: #1A3A6B; }
.fp-legal-body h5,
.fp-legal-body h6 { font-size: 16px; color: #1A3A6B; }

.fp-legal-body h2:first-child { margin-top: 0; }

.fp-legal-body p {
  margin: 0 0 1em;
}

.fp-legal-body a {
  color: #E30613;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity 0.15s ease;
}

.fp-legal-body a:hover {
  opacity: 0.7;
}

.fp-legal-body ul,
.fp-legal-body ol {
  margin: 0 0 1em;
  padding-left: 24px;
}

.fp-legal-body li {
  margin-bottom: 0.4em;
}

.fp-legal-body strong,
.fp-legal-body b {
  color: #0A1F44;
  font-weight: 600;
}

.fp-legal-body hr {
  border: none;
  border-top: 1px solid #e8ecf2;
  margin: 2.5em 0;
}

.fp-legal-body blockquote {
  margin: 1.5em 0;
  padding: 16px 20px;
  border-left: 3px solid #E30613;
  background: #f5f7fb;
  font-style: italic;
  color: #1A3A6B;
}

.fp-legal-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 15px;
}

.fp-legal-body table th,
.fp-legal-body table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #e8ecf2;
  vertical-align: top;
}

.fp-legal-body table th {
  background: #f5f7fb;
  font-weight: 600;
  color: #0A1F44;
}

/* eRecht24-spezifische Klassen abfangen (falls vorhanden) */
.fp-legal-body .erecht24-anchor,
.fp-legal-body [id^="erecht24"] {
  scroll-margin-top: 90px; /* Sticky-Header berücksichtigen */
}

@media (max-width: 768px) {
  .fp-legal-content { padding: 40px 0 24px; }
  .fp-legal-inner { padding: 0 16px; }
  .fp-legal-body { font-size: 15px; }
  .fp-legal-body h1 { font-size: 24px; }
  .fp-legal-body h2 { font-size: 21px; }
  .fp-legal-body h3 { font-size: 18px; }
}

/* ==========================================================================
   EDITIONEN-SEITE (/lims-software/editionen/ und /en/lims-software/editions/)
   ========================================================================== */

/* === Editions-Karten (Marketing-Übersicht) === */
.fp-edx-cards {
  background: #ffffff;
  padding: 80px 24px;
}

.fp-edx-cards-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.fp-edx-cards-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}

.fp-edx-cards-head h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(28px, 3.5vw, 40px);
  color: #0A1F44;
  font-weight: 600;
  line-height: 1.2;
  margin: 16px 0 16px;
}

.fp-edx-cards-head p {
  font-size: 17px;
  color: #4a5b75;
  line-height: 1.7;
}

.fp-edx-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.fp-edx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e3e8f0;
  border-radius: 14px;
  padding: 32px 28px;
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Produkt-Bild oben in der Karte */
.fp-edx-img {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: -8px auto 20px;
  width: 180px;
  height: 180px;
}

.fp-edx-img img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.fp-edx-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(10, 31, 68, .12);
}

.fp-edx-featured {
  background: linear-gradient(180deg, #0A1F44 0%, #122a55 100%);
  color: #ffffff;
  border-color: #E30613;
  box-shadow: 0 16px 48px rgba(10, 31, 68, .25);
  transform: scale(1.02);
}

.fp-edx-featured:hover {
  transform: translateY(-3px) scale(1.02);
}

.fp-edx-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #E30613;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 6px 14px;
  border-radius: 20px;
}

.fp-edx-tier {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #E30613;
  margin-bottom: 8px;
}

.fp-edx-featured .fp-edx-tier {
  color: #ff5a66;
}

.fp-edx-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  color: #0A1F44;
  line-height: 1.2;
  margin-bottom: 6px;
}

.fp-edx-featured .fp-edx-name {
  color: #ffffff;
}

.fp-edx-sub {
  font-size: 14px;
  color: #6b7a90;
  margin: 0 0 20px;
}

.fp-edx-featured .fp-edx-sub {
  color: rgba(255,255,255,.7);
}

.fp-edx-desc {
  font-size: 15px;
  line-height: 1.65;
  color: #4a5b75;
  margin: 0 0 24px;
}

.fp-edx-featured .fp-edx-desc {
  color: rgba(255,255,255,.85);
}

.fp-edx-fit {
  margin-bottom: 28px;
  flex: 1;
}

.fp-edx-fit strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #0A1F44;
  margin-bottom: 10px;
}

.fp-edx-featured .fp-edx-fit strong {
  color: #ffffff;
}

.fp-edx-fit ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fp-edx-fit li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  color: #4a5b75;
  margin-bottom: 8px;
  line-height: 1.5;
}

.fp-edx-fit li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #E30613;
  font-weight: 700;
}

.fp-edx-featured .fp-edx-fit li {
  color: rgba(255,255,255,.85);
}

.fp-edx-featured .fp-edx-fit li::before {
  color: #ff5a66;
}

.fp-edx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  text-align: center;
  transition: all .18s ease;
}

.fp-edx-btn-outline {
  background: transparent;
  color: #0A1F44;
  border: 1.5px solid #0A1F44;
}

.fp-edx-btn-outline:hover {
  background: #0A1F44;
  color: #ffffff;
}

.fp-edx-btn-fill {
  background: #E30613;
  color: #ffffff;
  border: 1.5px solid #E30613;
}

.fp-edx-btn-fill:hover {
  background: #b8050f;
  border-color: #b8050f;
}

/* === Comparison Group Headers === */
.fp-compare-table .fp-ct-group {
  background: #0A1F44;
  color: #ffffff;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  padding: 14px 16px;
  letter-spacing: .02em;
}

/* === Upgrade-Pfad === */
.fp-upgrade {
  background: #f5f7fb;
  padding: 80px 24px;
}

.fp-upgrade-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.fp-upgrade-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}

.fp-upgrade-head h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(26px, 3vw, 36px);
  color: #0A1F44;
  font-weight: 600;
  line-height: 1.2;
  margin: 16px 0 16px;
}

.fp-upgrade-head p {
  font-size: 16px;
  color: #4a5b75;
  line-height: 1.7;
}

.fp-upgrade-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  justify-content: center;
}

.fp-up-step {
  flex: 1;
  background: #ffffff;
  border: 1px solid #e3e8f0;
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
}

.fp-up-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #E30613;
  color: #ffffff;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  border-radius: 50%;
  margin-bottom: 16px;
}

.fp-up-step h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: #0A1F44;
  margin: 0 0 10px;
}

.fp-up-step p {
  font-size: 14px;
  color: #4a5b75;
  line-height: 1.6;
  margin: 0;
}

.fp-up-arrow {
  display: flex;
  align-items: center;
  padding: 0 16px;
  color: #E30613;
  font-size: 28px;
  font-weight: 700;
}

/* === FAQ === */
.fp-faq {
  background: #ffffff;
  padding: 80px 24px;
}

.fp-faq-inner {
  max-width: 880px;
  margin: 0 auto;
}

.fp-faq-head {
  text-align: center;
  margin-bottom: 48px;
}

.fp-faq-head h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(26px, 3vw, 36px);
  color: #0A1F44;
  font-weight: 600;
  line-height: 1.2;
  margin: 16px 0 0;
}

.fp-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fp-faq-item {
  background: #f5f7fb;
  border: 1px solid #e3e8f0;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .15s ease;
}

.fp-faq-item[open] {
  border-color: #E30613;
}

.fp-faq-item summary {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: #0A1F44;
  padding: 18px 24px;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 50px;
  user-select: none;
}

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

.fp-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: #E30613;
  font-weight: 300;
  transition: transform .2s ease;
}

.fp-faq-item[open] summary::after {
  content: "−";
  transform: translateY(-50%) rotate(0deg);
}

.fp-faq-item summary:hover {
  color: #E30613;
}

.fp-faq-item > div {
  padding: 0 24px 20px;
}

.fp-faq-item p {
  font-size: 15px;
  color: #4a5b75;
  line-height: 1.7;
  margin: 0;
}

.fp-faq-item a {
  color: #E30613;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 900px) {
  .fp-edx-grid { grid-template-columns: 1fr; gap: 16px; }
  .fp-edx-featured { transform: none; }
  .fp-edx-featured:hover { transform: translateY(-3px); }
  .fp-upgrade-flow { flex-direction: column; gap: 12px; }
  .fp-up-arrow { transform: rotate(90deg); padding: 0; }
}

@media (max-width: 600px) {
  .fp-edx-cards { padding: 56px 16px; }
  .fp-upgrade { padding: 56px 16px; }
  .fp-faq { padding: 56px 16px; }
  .fp-edx-card { padding: 28px 22px; }
  .fp-faq-item summary { font-size: 15px; padding: 16px 50px 16px 18px; }
  .fp-faq-item > div { padding: 0 18px 18px; }
}

/* ==========================================================================
   CASE STUDIES (/referenzen/[name]/)
   wiederverwendbar für alle Kundenreferenz-Detailseiten
   ========================================================================== */

.fp-case { background: #ffffff; }

/* === Hero === */
.fp-case-hero {
  background: linear-gradient(135deg, #0A1F44 0%, #122a55 100%);
  color: #ffffff;
  padding: 88px 24px 96px;
  position: relative;
  overflow: hidden;
}

.fp-case-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.fp-case-hero h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 600;
  line-height: 1.15;
  color: #ffffff;
  margin: 16px 0 24px;
  letter-spacing: -.01em;
}

.fp-case-hero-sub {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.7;
  color: rgba(255,255,255,.85);
  max-width: 780px;
  margin: 0 0 40px;
}

.fp-case-facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 24px;
}

.fp-case-facts li {
  display: flex;
  flex-direction: column;
}

.fp-case-facts strong {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #ff5a66;
  margin-bottom: 6px;
}

.fp-case-facts span {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  color: #ffffff;
  line-height: 1.4;
}

/* === Sections === */
.fp-case-section {
  padding: 80px 24px;
  background: #ffffff;
}

.fp-case-section-alt {
  background: #f5f7fb;
}

.fp-case-section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.fp-case-section h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 600;
  color: #0A1F44;
  line-height: 1.2;
  margin: 16px 0 24px;
}

.fp-case-section p {
  font-size: 17px;
  color: #4a5b75;
  line-height: 1.75;
  margin: 0 0 16px;
  max-width: 780px;
}

.fp-case-section a {
  color: #E30613;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fp-case-lead {
  font-size: 18px !important;
  color: #0A1F44 !important;
}

/* === 2-Spalten-Layout === */
.fp-case-2col {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: center;
}

.fp-case-2col-reverse .fp-case-2col-text { order: 2; }
.fp-case-2col-reverse .fp-case-2col-img { order: 1; }

.fp-case-2col-img img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(10, 31, 68, .15);
}

.fp-case-2col-img figcaption {
  font-size: 13px;
  color: #6b7a90;
  margin-top: 12px;
  text-align: center;
  font-style: italic;
}

/* === Features (3-Spalten) === */
.fp-case-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.fp-case-feature {
  background: #ffffff;
  border: 1px solid #e3e8f0;
  border-radius: 12px;
  padding: 28px 24px;
}

.fp-case-feature-icon {
  width: 52px;
  height: 52px;
  background: #fff2f3;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.fp-case-feature h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: #0A1F44;
  margin: 0 0 8px;
}

.fp-case-feature p {
  font-size: 15px;
  color: #4a5b75;
  line-height: 1.6;
  margin: 0;
}

/* === Vorher/Nachher-Vergleich === */
.fp-case-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: stretch;
  margin: 40px 0;
}

.fp-case-compare-item {
  padding: 28px 24px;
  border-radius: 12px;
  background: #ffffff;
}

.fp-case-before {
  border: 1px solid #e3e8f0;
}

.fp-case-after {
  border: 1.5px solid #E30613;
  box-shadow: 0 12px 36px rgba(227, 6, 19, .08);
}

.fp-case-compare-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 6px 12px;
  border-radius: 6px;
  margin-bottom: 16px;
}

.fp-case-before .fp-case-compare-label {
  background: #f5f7fb;
  color: #6b7a90;
}

.fp-case-after .fp-case-compare-label {
  background: #E30613;
  color: #ffffff;
}

.fp-case-compare-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fp-case-compare-item li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  color: #4a5b75;
  line-height: 1.6;
  margin-bottom: 10px;
}

.fp-case-before li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: #b8b8b8;
  font-weight: 700;
}

.fp-case-after li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #E30613;
  font-weight: 700;
}

.fp-case-compare-arrow {
  display: flex;
  align-items: center;
  font-size: 32px;
  color: #E30613;
  font-weight: 700;
  padding: 0 8px;
}

.fp-case-prose {
  max-width: 780px;
}

/* === Highlight-Zitat === */
.fp-case-quote {
  background: linear-gradient(135deg, #0A1F44 0%, #122a55 100%);
  color: #ffffff;
  padding: 80px 24px;
  position: relative;
}

.fp-case-quote-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.fp-case-quote-mark {
  margin: 0 auto 32px;
  display: block;
}

.fp-case-quote blockquote {
  margin: 0;
  padding: 0;
}

.fp-case-quote blockquote p {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.4;
  color: #ffffff;
  margin: 0 0 32px;
  max-width: none;
}

.fp-case-quote footer {
  display: flex;
  justify-content: center;
}

.fp-case-quote cite {
  font-style: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.fp-case-quote cite strong {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
  display: block;
}

.fp-case-quote cite span {
  font-size: 14px;
  color: rgba(255,255,255,.7);
}

/* === Cross-CTA === */
.fp-case-cta {
  background: #ffffff;
  padding: 88px 24px;
  text-align: center;
}

.fp-case-cta-inner {
  max-width: 760px;
  margin: 0 auto;
}

.fp-case-cta h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 600;
  color: #0A1F44;
  line-height: 1.2;
  margin: 16px 0 20px;
}

.fp-case-cta-sub {
  font-size: 17px;
  color: #4a5b75;
  line-height: 1.7;
  margin: 0 auto 32px !important;
  max-width: 640px !important;
}

.fp-case-cta-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* === Secondary Button (Inline-Link mit Pfeil) === */
.fp-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: transparent;
  color: #0A1F44 !important;
  border: 1.5px solid #0A1F44;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: all .18s ease;
  margin-top: 8px;
}

.fp-btn-secondary:hover {
  background: #0A1F44;
  color: #ffffff !important;
}

/* === Responsive === */
@media (max-width: 900px) {
  .fp-case-2col { grid-template-columns: 1fr; gap: 32px; }
  .fp-case-2col-reverse .fp-case-2col-text { order: 1; }
  .fp-case-2col-reverse .fp-case-2col-img { order: 2; }
  .fp-case-facts { grid-template-columns: repeat(2, 1fr); }
  .fp-case-features { grid-template-columns: 1fr; }
  .fp-case-compare { grid-template-columns: 1fr; }
  .fp-case-compare-arrow { transform: rotate(90deg); justify-content: center; }
}

@media (max-width: 600px) {
  .fp-case-hero { padding: 56px 16px 64px; }
  .fp-case-section { padding: 56px 16px; }
  .fp-case-quote { padding: 56px 16px; }
  .fp-case-cta { padding: 56px 16px; }
  .fp-case-facts { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PRODUKTSEITE /lims-software/ - Neue Sektionen (Stand 14.05.2026)
   - fp-prod-definition: "Was ist ein LIMS System?"
   - fp-prod-branchen:   Branchen-Teaser (eigene Klassen wg. Konflikt zu .fp-industries)
   ========================================================================== */

/* === Definition-Sektion === */
.fp-prod-definition {
  padding: 80px 24px;
  background: #fff;
}

.fp-prod-definition-inner {
  max-width: 980px;
  margin: 0 auto;
}

.fp-prod-definition-head {
  margin-bottom: 32px;
}

.fp-prod-definition-head h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(28px, 3.4vw, 38px);
  color: var(--fp-navy);
  margin: 8px 0 0;
  line-height: 1.2;
  font-weight: 600;
}

.fp-prod-definition-content p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--fp-gray-mid, #333);
  margin-bottom: 18px;
}

.fp-prod-definition-content a {
  color: var(--fp-red);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.fp-prod-definition-content a:hover {
  opacity: 0.8;
}

/* === Branchen-Teaser (eigene Klassen, NICHT .fp-industries verwenden!) === */
.fp-prod-branchen {
  padding: 80px 24px;
  background: var(--fp-gray-light, #F4F6F9);
}

.fp-prod-branchen-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.fp-prod-branchen-head {
  text-align: center;
  margin-bottom: 32px;
}

.fp-prod-branchen-head h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(28px, 3.4vw, 38px);
  color: var(--fp-navy);
  margin: 8px 0 16px;
  line-height: 1.2;
  font-weight: 600;
}

.fp-prod-branchen-head p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fp-gray-mid, #333);
  max-width: 760px;
  margin: 0 auto;
}

.fp-prod-branchen-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.fp-prod-branchen-tag {
  display: inline-block;
  padding: 10px 20px;
  background: #fff;
  color: var(--fp-navy);
  border: 1.5px solid var(--fp-steel, #1A3A6B);
  border-radius: 24px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.fp-prod-branchen-tag:hover {
  background: var(--fp-navy);
  color: #fff;
}

.fp-prod-branchen-tag-more {
  background: var(--fp-navy);
  color: #fff;
}

.fp-prod-branchen-tag-more:hover {
  background: var(--fp-red);
  border-color: var(--fp-red);
}

@media (max-width: 600px) {
  .fp-prod-definition { padding: 56px 16px; }
  .fp-prod-branchen { padding: 56px 16px; }
  .fp-prod-branchen-tag { padding: 8px 16px; font-size: 14px; }
}


/* ==========================================================================
   REFERENZEN-SEITE — Cards mit Bildern + Killer-Zahl-Overlay
   Eingebettet als Custom HTML Block in Kadence
   ========================================================================== */

.fp-references {
  background: var(--fp-gray-light, #F4F6F9);
}

/* ---- CARDS GRID ---- */
.fp-ref-grid {
  padding: 80px 0;
  background: var(--fp-gray-light, #F4F6F9);
}

.fp-ref-grid-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.fp-ref-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(10,31,68,0.06);
  border: 1px solid var(--fp-border, #E5E7EB);
}

.fp-ref-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(10,31,68,0.12);
}

.fp-ref-card-img {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--fp-navy);
}

.fp-ref-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.fp-ref-card:hover .fp-ref-card-img img {
  transform: scale(1.04);
}

.fp-ref-card-overlay {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(10,31,68,0.92);
  color: #fff;
  padding: 14px 18px;
  border-radius: 8px;
  border-left: 4px solid var(--fp-red);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(4px);
}

.fp-ref-card-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
}

.fp-ref-card-num-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.75);
  margin-top: 4px;
}

.fp-ref-card-body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.fp-ref-card-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fp-red);
  font-weight: 700;
  margin-bottom: 10px;
}

.fp-ref-card-body h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  line-height: 1.3;
  color: var(--fp-navy);
  margin: 0 0 12px;
  font-weight: 600;
}

.fp-ref-card-body p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fp-gray-text, #4B5563);
  margin: 0 0 16px;
  flex: 1;
}

.fp-ref-card-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--fp-navy);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .2s;
}

.fp-ref-card:hover .fp-ref-card-cta {
  color: var(--fp-red);
}

/* ---- HERO STATS ---- */
.fp-page-hero-stats {
  display: flex;
  gap: 48px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.fp-page-hero-stats > div {
  display: flex;
  flex-direction: column;
}

.fp-page-hero-stats strong {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  color: #fff;
}

.fp-page-hero-stats span {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---- WEITERE KUNDEN ---- */
.fp-ref-more {
  padding: 80px 0;
  background: #fff;
}

.fp-ref-more-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.fp-ref-more h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--fp-navy);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}

.fp-ref-more-lead {
  font-size: 16px;
  color: var(--fp-gray-text, #4B5563);
  max-width: 800px;
  margin: 0 0 32px;
}

.fp-ref-more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin: 40px 0;
}

.fp-ref-more-col h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  color: var(--fp-navy);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--fp-red);
  display: inline-block;
}

.fp-ref-more-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fp-ref-more-col li {
  padding: 4px 0;
  font-size: 14px;
  color: var(--fp-gray-text, #4B5563);
}

.fp-ref-more-cta {
  margin: 32px 0 0;
}

.fp-ref-more-cta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fp-navy);
  text-decoration: none;
}

.fp-ref-more-cta a:hover {
  color: var(--fp-red);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .fp-ref-grid-inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .fp-ref-more-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}

@media (max-width: 640px) {
  .fp-ref-grid-inner { grid-template-columns: 1fr; padding: 0 16px; }
  .fp-ref-more-inner { padding: 0 16px; }
  .fp-ref-more { padding: 60px 0; }
  .fp-ref-grid { padding: 60px 0; }
  .fp-page-hero-stats { gap: 28px; }
  .fp-page-hero-stats strong { font-size: 22px; }
}

@media (max-width: 480px) {
  .fp-ref-more-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
   FP-BLOG-ÜBERSICHT – ergänzendes CSS
   Nutzt die bestehenden CSS-Variablen aus style.css (fp-red, fp-navy, etc.)
   ========================================================================== */


/* ==========================================================================
   FEATURED POST (Highlight)
   ========================================================================== */
.fp-blog-featured {
  padding: 80px 24px 40px;
  background: linear-gradient(180deg, #F4F6F9 0%, #FFFFFF 100%);
}

.fp-blog-featured-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.fp-feat-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(10, 31, 68, 0.08);
  border: 1px solid rgba(10, 31, 68, 0.06);
}

.fp-feat-media {
  position: relative;
  height: 100%;
  min-height: 380px;
}

.fp-feat-img-wrap {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.fp-feat-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}

.fp-feat-media:hover img {
  transform: scale(1.04);
}

.fp-feat-content {
  padding: 40px 48px 40px 0;
}

.fp-feat-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.fp-feat-badge {
  display: inline-flex;
  align-items: center;
  background: var(--fp-red, #E30613);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 4px;
}

.fp-feat-cat {
  font-size: 12px;
  font-weight: 600;
  color: var(--fp-navy, #0A1F44);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.fp-feat-time {
  font-size: 12px;
  color: rgba(10, 31, 68, 0.55);
  font-weight: 500;
}

.fp-feat-time::before {
  content: "•";
  margin-right: 12px;
  color: rgba(10, 31, 68, 0.3);
}

.fp-feat-content h2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--fp-navy, #0A1F44);
  margin: 0 0 18px;
  letter-spacing: -.01em;
}

.fp-feat-content h2 a {
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}

.fp-feat-content h2 a:hover {
  color: var(--fp-red, #E30613);
}

.fp-feat-excerpt {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(10, 31, 68, 0.7);
  margin: 0 0 24px;
}

.fp-feat-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fp-red, #E30613);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: gap .2s;
}

.fp-feat-link:hover {
  gap: 12px;
}

@media (max-width: 880px) {
  .fp-feat-grid {
    grid-template-columns: 1fr;
  }
  .fp-feat-media {
    min-height: 240px;
  }
  .fp-feat-content {
    padding: 32px 28px;
  }
  .fp-feat-content h2 {
    font-size: 24px;
  }
}


/* ==========================================================================
   KATEGORIEN-FILTER
   ========================================================================== */
.fp-blog-categories {
  padding: 60px 24px;
  background: #fff;
}

.fp-blog-categories-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.fp-blog-categories h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--fp-navy, #0A1F44);
  margin: 12px 0 12px;
  letter-spacing: -.01em;
}

.fp-blog-categories > .fp-blog-categories-inner > p {
  font-size: 16px;
  color: rgba(10, 31, 68, 0.65);
  max-width: 720px;
  line-height: 1.6;
  margin: 0 0 28px;
}

.fp-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fp-cat-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: #F4F6F9;
  color: var(--fp-navy, #0A1F44);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 100px;
  transition: all .2s;
  border: 1px solid transparent;
}

.fp-cat-chip:hover {
  background: #fff;
  border-color: var(--fp-navy, #0A1F44);
}

.fp-cat-chip-active {
  background: var(--fp-navy, #0A1F44);
  color: #fff;
}

.fp-cat-chip-active:hover {
  background: var(--fp-navy, #0A1F44);
  color: #fff;
  border-color: var(--fp-navy, #0A1F44);
}


/* ==========================================================================
   PILLAR-RATGEBER (nummerierte Karten)
   ========================================================================== */
.fp-blog-pillars {
  padding: 80px 24px;
  background: #F4F6F9;
}

.fp-blog-pillars-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.fp-blog-pillars h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--fp-navy, #0A1F44);
  margin: 12px 0 12px;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.fp-blog-pillars > .fp-blog-pillars-inner > p {
  font-size: 17px;
  color: rgba(10, 31, 68, 0.7);
  max-width: 780px;
  line-height: 1.65;
  margin: 0 0 40px;
}

.fp-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.fp-pillar-card {
  background: #fff;
  padding: 36px 32px 32px;
  border-radius: 16px;
  border: 1px solid rgba(10, 31, 68, 0.08);
  position: relative;
  transition: all .3s;
}

.fp-pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(10, 31, 68, 0.1);
  border-color: var(--fp-red, #E30613);
}

.fp-pillar-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fp-navy, #0A1F44);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
}

.fp-pillar-card h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--fp-navy, #0A1F44);
  margin: 0 0 6px;
  letter-spacing: -.01em;
}

.fp-pillar-sub {
  font-size: 13px;
  color: var(--fp-red, #E30613);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  margin: 0 0 18px;
}

.fp-pillar-card > p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(10, 31, 68, 0.7);
  margin: 0 0 20px;
}

.fp-pillar-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.fp-pillar-list li {
  font-size: 14px;
  color: rgba(10, 31, 68, 0.75);
  padding: 6px 0 6px 24px;
  position: relative;
  line-height: 1.45;
}

.fp-pillar-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--fp-red, #E30613);
  font-weight: 700;
}

.fp-pillar-link {
  display: inline-flex;
  align-items: center;
  color: var(--fp-red, #E30613);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  padding-top: 8px;
  border-top: 1px solid rgba(10, 31, 68, 0.08);
  width: 100%;
}

@media (max-width: 980px) {
  .fp-pillar-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
}


/* ==========================================================================
   BEITRÄGE-KARTEN-GRID
   ========================================================================== */
.fp-blog-posts {
  padding: 80px 24px;
  background: var(--fp-navy, #0A1F44);
  color: #fff;
}

.fp-blog-posts-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.fp-blog-posts-head {
  margin-bottom: 40px;
}

.fp-blog-posts h2 {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin: 12px 0 0;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.fp-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 40px;
}

/* ============================================================
   BLOG-KARTEN — Design analog zu den Referenzen-Karten
   (weißer Body, Navy-Serif-Titel, rote Tag-Pille, Cluster-Pille
   als Bildoverlay, rote CTA mit Pfeil)
   ============================================================ */

.fp-post-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(10,31,68,0.06);
  border: 1px solid var(--fp-border, #E5E7EB);
}

.fp-post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(10,31,68,0.12);
}

/* --- Bild-/Placeholder-Bereich oben in der Karte --- */
.fp-post-img-link {
  position: relative;
  display: block;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--fp-navy, #0A1F44);
}

.fp-post-img-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.fp-post-card:hover .fp-post-img-link img {
  transform: scale(1.04);
}

/* Placeholder-Variante (ohne Bild, mit [FP]-Wasserzeichen) */
.fp-post-ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(10,31,68,0.92) 0%, rgba(26,58,107,0.95) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 40px);
}

.fp-post-ph-watermark {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 72px;
  font-weight: 600;
  color: rgba(255,255,255,0.12);
  letter-spacing: -0.02em;
  user-select: none;
}

.fp-post-ph-watermark .fp-br {
  color: rgba(227, 6, 19, 0.55);
}

/* Cluster-Overlay-Pille auf dem Bild (analog .fp-ref-card-overlay) */
.fp-post-ph-label {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(10,31,68,0.92);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  border-left: 4px solid var(--fp-red, #E30613);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  backdrop-filter: blur(4px);
}

/* --- Karten-Body (weiß, dunkler Text) --- */
.fp-post-card .fp-post-body {
  background: #fff;
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.fp-post-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.fp-post-cat {
  font-size: 11px;
  font-weight: 700;
  color: var(--fp-red, #E30613);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.fp-post-time {
  font-size: 11px;
  color: var(--fp-gray-text, #6B7280);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  position: relative;
  padding-left: 14px;
}

.fp-post-time::before {
  content: "·";
  position: absolute;
  left: 4px;
  color: var(--fp-gray-text, #6B7280);
}

.fp-post-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  line-height: 1.3;
  color: var(--fp-navy, #0A1F44);
  margin: 0 0 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.fp-post-card h3 a {
  color: inherit;
  text-decoration: none;
}

.fp-post-card:hover h3 a {
  color: var(--fp-red, #E30613);
}

.fp-post-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fp-gray-text, #4B5563);
  margin: 0 0 16px;
  flex: 1;
}

.fp-post-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--fp-navy, #0A1F44);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  margin-top: auto;
  transition: color .2s;
}

.fp-post-card:hover .fp-post-link {
  color: var(--fp-red, #E30613);
}

.fp-blog-posts-more {
  display: flex;
  justify-content: center;
}

.fp-btn-ghost-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s;
}

.fp-btn-ghost-dark:hover {
  border-color: var(--fp-red, #E30613);
  background: rgba(227, 6, 19, 0.08);
}

@media (max-width: 980px) {
  .fp-posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .fp-posts-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   BRANCHEN-INSIGHTS (kompakte Karten)
   ========================================================================== */
.fp-blog-industries {
  padding: 80px 24px;
  background: #fff;
}

.fp-blog-industries-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.fp-blog-industries h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--fp-navy, #0A1F44);
  margin: 12px 0 12px;
  letter-spacing: -.01em;
}

.fp-blog-industries > .fp-blog-industries-inner > p {
  font-size: 16px;
  color: rgba(10, 31, 68, 0.7);
  max-width: 720px;
  line-height: 1.6;
  margin: 0 0 36px;
}

.fp-bi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.fp-bi-card {
  background: #F4F6F9;
  padding: 28px 30px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--fp-navy, #0A1F44);
  display: block;
  position: relative;
  transition: all .3s;
  border: 1px solid transparent;
}

.fp-bi-card:hover {
  background: #fff;
  border-color: var(--fp-red, #E30613);
  box-shadow: 0 10px 30px rgba(10, 31, 68, 0.08);
}

.fp-bi-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--fp-red, #E30613);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 12px;
}

.fp-bi-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--fp-navy, #0A1F44);
  margin: 0 0 8px;
  line-height: 1.3;
  padding-right: 32px;
}

.fp-bi-card p {
  font-size: 14px;
  color: rgba(10, 31, 68, 0.65);
  margin: 0;
  line-height: 1.55;
}

.fp-bi-arrow {
  position: absolute;
  top: 28px;
  right: 26px;
  color: var(--fp-red, #E30613);
  font-size: 18px;
  font-weight: 700;
  transition: transform .2s;
}

.fp-bi-card:hover .fp-bi-arrow {
  transform: translateX(4px);
}

@media (max-width: 720px) {
  .fp-bi-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   WEITERE RESSOURCEN (Cross-Links)
   ========================================================================== */
.fp-blog-more {
  padding: 80px 24px;
  background: #F4F6F9;
}

.fp-blog-more-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.fp-blog-more h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--fp-navy, #0A1F44);
  margin: 12px 0 12px;
  letter-spacing: -.01em;
}

.fp-blog-more > .fp-blog-more-inner > p {
  font-size: 16px;
  color: rgba(10, 31, 68, 0.7);
  max-width: 680px;
  margin: 0 0 36px;
}

.fp-more-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.fp-more-card {
  background: #fff;
  padding: 28px 24px;
  border-radius: 14px;
  border: 1px solid rgba(10, 31, 68, 0.06);
  transition: all .3s;
}

.fp-more-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(10, 31, 68, 0.08);
}

.fp-more-icon {
  font-size: 28px;
  margin-bottom: 14px;
  line-height: 1;
}

.fp-more-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--fp-navy, #0A1F44);
  margin: 0 0 10px;
  line-height: 1.3;
}

.fp-more-card p {
  font-size: 13px;
  color: rgba(10, 31, 68, 0.65);
  margin: 0 0 14px;
  line-height: 1.55;
}

.fp-more-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--fp-red, #E30613);
  text-decoration: none;
}

@media (max-width: 880px) {
  .fp-more-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .fp-more-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== BLOG-PLACEHOLDER (Stand 14.05.2026) ===== */
/* ==========================================================================
   BLOG-PLACEHOLDER (statisch ohne Bilder)
   Wird genutzt bis Featured Images für Artikel hochgeladen sind.
   Später durch echte <img>-Tags aus WP_Query ersetzbar.
   ========================================================================== */


/* ---- FEATURED POST PLACEHOLDER ---- */
.fp-feat-placeholder {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 380px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: opacity .3s ease;
}

.fp-feat-placeholder:hover {
  opacity: .92;
}

/* Themen-Gradients für Featured */
.fp-feat-placeholder-quality {
  background:
    radial-gradient(circle at 30% 20%, rgba(227, 6, 19, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(14, 116, 144, 0.22) 0%, transparent 50%),
    linear-gradient(135deg, #0A1F44 0%, #1A3A6B 100%);
}

.fp-feat-placeholder-digital {
  background:
    radial-gradient(circle at 25% 30%, rgba(14, 116, 144, 0.28) 0%, transparent 55%),
    linear-gradient(135deg, #0A1F44 0%, #122a55 100%);
}

.fp-feat-placeholder-basics {
  background:
    radial-gradient(circle at 70% 30%, rgba(227, 6, 19, 0.15) 0%, transparent 50%),
    linear-gradient(135deg, #1A3A6B 0%, #0A1F44 100%);
}

/* Subtile Gitter-Textur über alle Placeholder */
.fp-feat-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

/* Großes [FP]-Wasserzeichen mittig */
.fp-feat-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(72px, 8vw, 120px);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.08);
  letter-spacing: -.04em;
  line-height: 1;
  user-select: none;
  z-index: 1;
}

/* Themen-Label unten links */
.fp-feat-topic {
  position: absolute;
  bottom: 28px;
  left: 32px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  z-index: 2;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  backdrop-filter: blur(6px);
}


/* ---- POST-CARD PLACEHOLDER ---- */
.fp-post-ph {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  width: 100%;
  text-decoration: none;
  transition: opacity .3s ease;
}

.fp-post-ph:hover {
  opacity: .92;
}

/* Themen-Codes */
.fp-post-ph-quality {
  background:
    radial-gradient(circle at 20% 30%, rgba(227, 6, 19, 0.18) 0%, transparent 55%),
    linear-gradient(135deg, #0A1F44 0%, #1A3A6B 100%);
}

.fp-post-ph-digital {
  background:
    radial-gradient(circle at 70% 60%, rgba(14, 116, 144, 0.30) 0%, transparent 55%),
    linear-gradient(135deg, #0A1F44 0%, #122a55 100%);
}

.fp-post-ph-basics {
  background:
    radial-gradient(circle at 75% 30%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
    linear-gradient(135deg, #1A3A6B 0%, #0A1F44 100%);
}

.fp-post-ph-features {
  background:
    radial-gradient(circle at 30% 20%, rgba(227, 6, 19, 0.22) 0%, transparent 55%),
    linear-gradient(135deg, #122a55 0%, #0A1F44 100%);
}

.fp-post-ph-integration {
  background:
    radial-gradient(circle at 50% 50%, rgba(227, 6, 19, 0.20) 0%, transparent 60%),
    linear-gradient(135deg, #0A1F44 0%, #1A3A6B 100%);
}

.fp-post-ph-industry {
  background:
    radial-gradient(circle at 30% 70%, rgba(14, 116, 144, 0.20) 0%, transparent 55%),
    linear-gradient(135deg, #1A3A6B 0%, #0A1F44 100%);
}

/* Subtile Gitter-Textur */
.fp-post-ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

/* [FP]-Wasserzeichen in Post-Cards */
.fp-post-ph-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 52px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.10);
  letter-spacing: -.04em;
  line-height: 1;
  user-select: none;
  z-index: 1;
}

/* Themen-Label unten links */
.fp-post-ph-label {
  position: absolute;
  bottom: 16px;
  left: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.80);
  z-index: 2;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

/* fp-br (rote Klammern) auch in den Wasserzeichen rot halten */
.fp-feat-watermark .fp-br,
.fp-post-ph-watermark .fp-br {
  color: rgba(227, 6, 19, 0.35) !important;
}

@media (max-width: 880px) {
  .fp-feat-watermark { font-size: 64px; }
  .fp-feat-topic { bottom: 16px; left: 16px; font-size: 11px; }
}

/* ===== SINGLE-POST-TEMPLATE (Stand 14.05.2026) ===== */
/* ==========================================================================
   SINGLE-POST-TEMPLATE (Blog-Artikel)
   Stand: 14.05.2026
   Verwendet für: /ressourcen/blog/[slug]/
   ========================================================================== */


/* ---- POST HERO ---- */
.fp-post-hero {
  background: var(--fp-navy);
  color: #fff;
  padding: 64px 24px;
  position: relative;
  overflow: hidden;
}

.fp-post-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--fp-red) 0%, rgba(14,116,144,.6) 50%, rgba(255,255,255,.1) 100%);
}

.fp-post-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.fp-post-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 20px;
}

.fp-post-cat-pill {
  display: inline-flex;
  align-items: center;
  background: var(--fp-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 4px;
}

.fp-post-time,
.fp-post-date {
  font-size: 13px;
  color: rgba(255,255,255,.55);
  font-weight: 500;
}

.fp-post-dot {
  color: rgba(255,255,255,.25);
}

.fp-post-h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 0 0 24px;
  max-width: 920px;
}

.fp-post-lead {
  font-size: clamp(17px, 1.4vw, 19px);
  color: rgba(255,255,255,.75);
  line-height: 1.65;
  max-width: 820px;
  margin: 0;
  font-weight: 400;
}

.fp-post-lead strong {
  color: #fff;
  font-weight: 700;
}

@media (max-width: 768px) {
  .fp-post-hero { padding: 48px 20px; }
}


/* ---- INLINE-BILD IM ARTIKEL (volle Content-Breite, mit Caption) ---- */
.fp-post-inline-img {
  margin: 32px 0;
  padding: 0;
}

.fp-post-inline-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(10, 31, 68, 0.10);
  border: 1px solid var(--fp-gray-border);
  background: #fff;
}

.fp-post-inline-img figcaption {
  font-size: 13px;
  color: var(--fp-gray-mid);
  text-align: center;
  font-style: italic;
  line-height: 1.5;
  margin-top: 14px;
}


/* ---- FAQ MIT BILD (2-Spalten-Layout) ---- */
.fp-faq-with-image {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: start;
  margin: 28px 0;
}

.fp-faq-image {
  position: sticky;
  top: 100px;
}

.fp-faq-image-figure {
  margin: 0;
  background: var(--fp-gray-light);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--fp-gray-border);
}

.fp-faq-image-figure img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  background: #fff;
  box-shadow: 0 8px 24px rgba(10, 31, 68, 0.08);
}

.fp-faq-image-figure figcaption {
  font-size: 13px;
  color: var(--fp-gray-mid);
  text-align: center;
  font-style: italic;
  line-height: 1.5;
  margin-top: 16px;
}

@media (max-width: 960px) {
  .fp-faq-with-image {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .fp-faq-image {
    position: static;
    order: -1;
    max-width: 320px;
    margin: 0 auto;
  }
}


/* ---- POST BODY (Sticky-TOC + Content) ---- */
/* WICHTIG: Mit body.single-post bzw. body.single qualifiziert,
   damit diese Regel NUR auf Einzel-Artikel-Seiten greift –
   und nicht versehentlich die .fp-post-body-Elemente innerhalb
   der Blog-Übersichts-Karten überschreibt.
   
   Greift auch auf body:has(.fp-post-body) — also überall dort,
   wo die fp-post-body Struktur tatsächlich im DOM existiert.
   Das war notwendig, weil unsere Blog-Artikel als Pages
   (nicht als Posts) angelegt sind und daher kein body.single
   bekommen. */
body.single-post .fp-post-body,
body.single .fp-post-body,
body:has(.fp-post-body) .fp-post-body {
  background: #fff;
  padding: 64px 24px 80px;
}

body.single-post .fp-post-body-inner,
body.single .fp-post-body-inner,
body:has(.fp-post-body) .fp-post-body-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 56px;
  align-items: start;
}

@media (max-width: 960px) {
  body.single-post .fp-post-body,
  body.single .fp-post-body,
  body:has(.fp-post-body) .fp-post-body { padding: 48px 20px 64px; }
  body.single-post .fp-post-body-inner,
  body.single .fp-post-body-inner,
  body:has(.fp-post-body) .fp-post-body-inner { grid-template-columns: 1fr; gap: 32px; }
}


/* ---- STICKY TOC ---- */
.fp-post-toc {
  position: relative;
}

.fp-post-toc-sticky {
  position: sticky;
  top: 100px;
}

.fp-post-toc-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fp-gray-mid);
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--fp-gray-border);
}

.fp-post-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
}

.fp-post-toc-list li {
  counter-increment: toc;
  margin-bottom: 4px;
}

.fp-post-toc-list a {
  display: block;
  padding: 8px 0 8px 28px;
  font-size: 13px;
  color: var(--fp-gray-mid);
  text-decoration: none;
  line-height: 1.4;
  position: relative;
  transition: color .2s, padding-left .2s;
  border-left: 2px solid transparent;
}

.fp-post-toc-list a::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 8px;
  top: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--fp-gray-border);
  font-variant-numeric: tabular-nums;
  transition: color .2s;
}

.fp-post-toc-list a:hover {
  color: var(--fp-navy);
  padding-left: 32px;
}

.fp-post-toc-list a:hover::before {
  color: var(--fp-red);
}

@media (max-width: 960px) {
  .fp-post-toc-sticky {
    position: static;
    background: var(--fp-gray-light);
    border-radius: 12px;
    padding: 24px 28px;
  }
}


/* ---- POST CONTENT ---- */
.fp-post-content {
  font-size: 17px;
  line-height: 1.75;
  color: var(--fp-gray-text);
  max-width: 100%;
  min-width: 0;
}

.fp-post-content h2 {
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: -.015em;
  line-height: 1.2;
  margin: 56px 0 20px;
  scroll-margin-top: 90px;
}

.fp-post-content h2:first-child { margin-top: 0; }

.fp-post-content h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--fp-navy);
  letter-spacing: -.01em;
  line-height: 1.3;
  margin: 36px 0 14px;
}

.fp-post-content p {
  margin: 0 0 18px;
}

.fp-post-content p strong {
  color: var(--fp-navy);
  font-weight: 700;
}

.fp-post-content a {
  color: var(--fp-navy);
  text-decoration: underline;
  text-decoration-color: var(--fp-red);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color .2s;
}

.fp-post-content a:hover {
  color: var(--fp-red);
}

.fp-post-content ul,
.fp-post-content ol {
  margin: 0 0 24px;
  padding-left: 28px;
}

.fp-post-content li {
  margin-bottom: 10px;
  line-height: 1.7;
}

.fp-post-content li strong {
  color: var(--fp-navy);
}


/* ---- CHECKLIST (mit Häkchen statt Bullets) ---- */
.fp-post-checklist {
  list-style: none !important;
  padding-left: 0 !important;
}

.fp-post-checklist li {
  position: relative;
  padding-left: 32px;
}

.fp-post-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 18px;
  height: 18px;
  background: rgba(22, 163, 74, 0.12);
  border-radius: 4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3 8l3 3 7-7' stroke='%2316A34A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}


/* ---- POST LIST (mit roten Akzent-Dashes) ---- */
.fp-post-list {
  list-style: none !important;
  padding-left: 0 !important;
}

.fp-post-list li {
  position: relative;
  padding-left: 22px;
}

.fp-post-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 12px;
  height: 2px;
  background: var(--fp-red);
}

.fp-post-list-ordered {
  list-style: decimal !important;
  padding-left: 24px !important;
}

.fp-post-list-ordered li {
  padding-left: 6px;
}

.fp-post-list-ordered li::marker {
  color: var(--fp-red);
  font-weight: 800;
}


/* ---- DEFINITIONS-BOX ---- */
.fp-def-box {
  background: linear-gradient(135deg, var(--fp-gray-light) 0%, #FFFFFF 100%);
  border: 1px solid var(--fp-gray-border);
  border-left: 4px solid var(--fp-red);
  border-radius: 12px;
  padding: 28px 32px;
  margin: 0 0 40px;
}

.fp-def-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--fp-navy) !important;
  margin: 0 0 12px !important;
}

.fp-def-text {
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--fp-gray-text) !important;
  margin: 0 !important;
}

.fp-def-text strong {
  color: var(--fp-navy);
  font-weight: 700;
}


/* ---- COMPARISON TABLE (Excel vs LIMS) ---- */
.fp-comparison-table {
  margin: 32px 0;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--fp-gray-border);
}

.fp-cmp {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  min-width: 600px;
}

.fp-cmp thead th {
  background: var(--fp-gray-light);
  padding: 18px 20px;
  text-align: left;
  font-size: 13px;
  font-weight: 800;
  color: var(--fp-navy);
  letter-spacing: .02em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--fp-gray-border);
}

.fp-cmp thead th.fp-cmp-excel {
  background: rgba(220, 38, 38, 0.06);
  color: #DC2626;
}

.fp-cmp thead th.fp-cmp-lims {
  background: rgba(22, 163, 74, 0.08);
  color: #16A34A;
}

.fp-cmp tbody th {
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  color: var(--fp-navy);
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid var(--fp-gray-border);
  width: 220px;
}

.fp-cmp tbody td {
  padding: 16px 20px;
  font-size: 14px;
  color: var(--fp-gray-text);
  border-bottom: 1px solid var(--fp-gray-border);
  line-height: 1.5;
}

.fp-cmp tbody tr:last-child th,
.fp-cmp tbody tr:last-child td {
  border-bottom: none;
}

.fp-cmp tbody tr:hover {
  background: rgba(10, 31, 68, 0.02);
}


/* ---- FEATURE CARDS GRID (6 Kernfunktionen) ---- */
.fp-feature-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 28px 0;
}

.fp-feat-card {
  background: #fff;
  border: 1px solid var(--fp-gray-border);
  border-radius: 14px;
  padding: 28px 24px 24px;
  position: relative;
  transition: all .25s cubic-bezier(.16,1,.3,1);
}

.fp-feat-card:hover {
  border-color: var(--fp-navy);
  box-shadow: 0 12px 32px rgba(10, 31, 68, 0.1);
  transform: translateY(-2px);
}

.fp-feat-card-num {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 32px;
  font-weight: 900;
  color: var(--fp-gray-border);
  letter-spacing: -.02em;
  line-height: 1;
}

.fp-feat-card h3 {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--fp-navy);
  letter-spacing: -.01em;
  margin: 0 0 10px !important;
  padding-right: 40px;
  line-height: 1.3;
}

.fp-feat-card p {
  font-size: 14px !important;
  color: var(--fp-gray-mid);
  line-height: 1.6 !important;
  margin: 0 !important;
}

.fp-feat-card p strong { color: var(--fp-navy); }

@media (max-width: 640px) {
  .fp-feature-cards-grid { grid-template-columns: 1fr; }
}


/* ---- PROCESS STEPS (7 Schritte) ---- */
.fp-process-steps {
  list-style: none !important;
  padding: 0 !important;
  margin: 28px 0 !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: none;
}

.fp-process-steps li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 20px 22px !important;
  background: var(--fp-gray-light);
  border-radius: 12px;
  border-left: 3px solid var(--fp-red);
  margin: 0 !important;
}

.fp-process-steps li::before { display: none; }

.fp-step-num {
  width: 32px;
  height: 32px;
  background: var(--fp-navy);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}

.fp-process-steps li > div { flex: 1; }

.fp-process-steps li strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--fp-navy);
  margin-bottom: 4px;
  letter-spacing: -.01em;
}

.fp-process-steps li span {
  font-size: 14px;
  color: var(--fp-gray-mid);
  line-height: 1.55;
}


/* ---- QUOTE ---- */
.fp-post-quote {
  background: var(--fp-gray-light);
  border-left: 4px solid var(--fp-red);
  border-radius: 8px;
  padding: 28px 32px;
  margin: 28px 0;
}

.fp-post-quote p {
  font-size: 17px !important;
  font-style: italic;
  color: var(--fp-navy);
  line-height: 1.55 !important;
  margin: 0 0 12px !important;
  font-weight: 500;
}

.fp-post-quote cite {
  font-size: 13px;
  font-style: normal;
  color: var(--fp-red);
  font-weight: 700;
}


/* ---- BENEFIT GRID (3 große Zahlen) ---- */
.fp-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 28px 0 36px;
}

.fp-benefit-card {
  background: var(--fp-navy);
  color: #fff;
  border-radius: 14px;
  padding: 28px 24px 24px;
  text-align: left;
}

.fp-benefit-num {
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -.03em;
  margin-bottom: 6px;
}

.fp-benefit-num span {
  color: var(--fp-red);
  font-size: 70%;
}

.fp-benefit-label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.8);
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 14px;
  line-height: 1.3;
}

.fp-benefit-card p {
  font-size: 13px !important;
  color: rgba(255,255,255,.6) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .fp-benefit-grid { grid-template-columns: 1fr; }
}


/* ---- STANDARDS GRID (ISO 17025 etc.) ---- */
.fp-standards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 28px 0;
}

.fp-standard-card {
  background: #fff;
  border: 1px solid var(--fp-gray-border);
  border-radius: 12px;
  padding: 24px 24px 22px;
  transition: all .2s;
}

.fp-standard-card:hover {
  border-color: var(--fp-navy);
  box-shadow: 0 8px 20px rgba(10,31,68,.06);
}

.fp-standard-badge {
  display: inline-block;
  padding: 5px 11px;
  background: var(--fp-navy);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  border-radius: 4px;
  margin-bottom: 14px;
}

.fp-standard-card h4 {
  font-size: 16px !important;
  font-weight: 800;
  color: var(--fp-navy);
  margin: 0 0 8px !important;
  letter-spacing: -.01em;
  line-height: 1.3;
}

.fp-standard-card p {
  font-size: 14px !important;
  color: var(--fp-gray-mid);
  line-height: 1.6 !important;
  margin: 0 !important;
}

@media (max-width: 640px) {
  .fp-standards-grid { grid-template-columns: 1fr; }
}


/* ---- POST NOTE (Hinweis-Block) ---- */
.fp-post-note {
  background: rgba(202, 138, 4, 0.06);
  border-left: 3px solid #CA8A04;
  border-radius: 6px;
  padding: 16px 20px;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--fp-gray-text);
  margin: 24px 0 !important;
}

.fp-post-note strong { color: var(--fp-navy); }


/* ---- FAQ (Accordion) ---- */
.fp-faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 28px 0;
}

.fp-faq-item {
  background: #fff;
  border: 1px solid var(--fp-gray-border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s;
}

.fp-faq-item[open] {
  border-color: var(--fp-red);
  box-shadow: 0 8px 24px rgba(10,31,68,.06);
}

.fp-faq-item summary {
  font-size: 16px;
  font-weight: 700;
  color: var(--fp-navy);
  padding: 18px 56px 18px 24px;
  cursor: pointer;
  list-style: none;
  position: relative;
  letter-spacing: -.005em;
  line-height: 1.4;
  user-select: none;
}

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

.fp-faq-item summary::after {
  content: '';
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--fp-red);
  border-bottom: 2px solid var(--fp-red);
  transition: transform .2s;
  margin-top: -3px;
  transform: translateY(-50%) rotate(45deg);
}

.fp-faq-item[open] summary::after {
  transform: translateY(-50%) rotate(-135deg);
  margin-top: 0;
}

.fp-faq-item summary:hover {
  color: var(--fp-red);
}

.fp-faq-item > div {
  padding: 0 24px 22px;
}

.fp-faq-item p {
  font-size: 15px !important;
  color: var(--fp-gray-text);
  line-height: 1.7 !important;
  margin: 0 !important;
}


/* ---- INLINE CTA BOX ---- */
.fp-post-cta-box {
  background: var(--fp-navy);
  color: #fff;
  border-radius: 16px;
  padding: 40px 36px 36px;
  margin: 48px 0;
  text-align: center;
}

.fp-post-cta-box .fp-kicker {
  color: rgba(255,255,255,.5) !important;
  display: inline-block;
  margin-bottom: 12px;
}

.fp-post-cta-box h3 {
  font-size: 24px !important;
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px !important;
  letter-spacing: -.015em;
  line-height: 1.25;
}

.fp-post-cta-box p {
  font-size: 15px !important;
  color: rgba(255,255,255,.7);
  line-height: 1.65 !important;
  max-width: 560px;
  margin: 0 auto 24px !important;
}

.fp-post-cta-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.fp-post-cta-box .fp-btn-red,
.fp-post-cta-box .fp-btn-ghost-dark {
  padding: 12px 24px;
  font-size: 14px;
}

.fp-btn-ghost-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  transition: all .2s;
}

.fp-btn-ghost-dark:hover {
  background: rgba(255,255,255,.06);
  border-color: #fff;
  color: #fff !important;
}


/* ---- RELATED LINKS ---- */
.fp-post-related {
  margin: 48px 0 0;
  padding-top: 40px;
  border-top: 1px solid var(--fp-gray-border);
}

.fp-post-related h3 {
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: var(--fp-gray-mid);
  margin: 0 0 20px !important;
}

.fp-post-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.fp-related-link {
  display: block !important;
  background: var(--fp-gray-light);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 20px 22px;
  text-decoration: none !important;
  transition: all .2s;
}

.fp-related-link:hover {
  background: #fff;
  border-color: var(--fp-navy);
  box-shadow: 0 8px 20px rgba(10,31,68,.08);
  transform: translateY(-2px);
}

.fp-related-cat {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fp-red);
  margin-bottom: 8px;
}

.fp-related-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--fp-navy);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .fp-post-related-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   ARTIKEL-DETAIL-PATCH v1.0 (15.05.2026)
   --------------------------------------------------------------------------
   Behebt Spezifitäts-Konflikte zwischen .fp-post-content a (rote
   Unterstreichung) und Button-Klassen, wenn Buttons innerhalb von
   .fp-post-content erscheinen (z. B. in .fp-post-cta-box).
   Ergänzt außerdem Breadcrumb-Styles für .fp-post-hero und
   Sprungmarken-Offset für h2[id] im Artikel-Body.
   ========================================================================== */

/* ---- Buttons in Artikel-Body: Unterstreichung entfernen ---- */
.fp-post-content a.fp-btn-red,
.fp-post-content a.fp-btn-ghost,
.fp-post-content a.fp-btn-ghost-dark,
.fp-post-content a.fp-btn-primary,
.fp-post-content a.fp-btn-secondary,
.fp-post-content a.fp-btn-outline {
  text-decoration: none;
}

.fp-post-content a.fp-btn-red:hover,
.fp-post-content a.fp-btn-ghost:hover,
.fp-post-content a.fp-btn-ghost-dark:hover,
.fp-post-content a.fp-btn-primary:hover,
.fp-post-content a.fp-btn-secondary:hover,
.fp-post-content a.fp-btn-outline:hover {
  text-decoration: none;
}

/* ---- Breadcrumb-Links im Post-Hero (dunkler Hintergrund) ---- */
.fp-post-hero .fp-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 12px;
}

.fp-post-hero .fp-breadcrumb a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.15s ease;
}

.fp-post-hero .fp-breadcrumb a:hover {
  color: var(--fp-white);
}

.fp-post-hero .fp-breadcrumb .current {
  color: rgba(255, 255, 255, 0.45);
}

/* ---- fp-def-box als Lead-Element ohne Top-Margin ---- */
.fp-post-content > .fp-def-box:first-child {
  margin-top: 0;
}

/* ---- case-compare nach h3 enger anbinden ---- */
.fp-post-content h3 + .fp-case-compare {
  margin-top: 20px;
}

/* ---- Post-Inline-Image im Artikel-Flow ---- */
.fp-post-content > .fp-post-inline-img {
  margin: 40px 0;
}

/* ---- Sprungmarken-Distanz unter Sticky-Header ---- */
.fp-post-content h2[id] {
  scroll-margin-top: 110px;
}

/* ==========================================================================
   ARTIKEL-DETAIL-PATCH v1.1 (15.05.2026) – Compare-Layout Fix
   --------------------------------------------------------------------------
   Behebt das Layout-Problem in .fp-case-compare, wenn KEIN Pfeil-Element
   in der Mitte vorhanden ist (z. B. bei reinem Vorher/Nachher ohne
   Übergangs-Pfeil). Das Theme-Default setzt grid-template-columns: 1fr
   auto 1fr und erwartet drei Kind-Elemente. Wenn nur zwei vorhanden sind,
   kollabiert eine Spalte zu nur ein paar Pixel Breite.
   ========================================================================== */

/* Wenn .fp-case-compare nur zwei Kinder hat, verwende 1fr 1fr */
.fp-post-content .fp-case-compare {
  grid-template-columns: 1fr 1fr;
}

/* Falls doch ein Pfeil zwischen den Boxen sitzt, wieder 1fr auto 1fr */
.fp-post-content .fp-case-compare:has(.fp-case-compare-arrow) {
  grid-template-columns: 1fr auto 1fr;
}

/* Mindesthöhe für Spalten – verhindert Single-Char-Stacking bei engen Spalten */
.fp-post-content .fp-case-compare-item {
  min-width: 0;
}

.fp-post-content .fp-case-compare-item ul {
  word-break: normal;
  overflow-wrap: break-word;
}

/* Auf schmalen Viewports (in der TOC-Spalten-Variante) untereinander */
@media (max-width: 1100px) {
  .fp-post-content .fp-case-compare {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   BLOG-KARTEN — HARD-OVERRIDE (Holzhammer-Methode)
   --------------------------------------------------------------------------
   Diese Regeln stellen sicher, dass das Karten-Design der Blog-Übersicht
   IDENTISCH zum Referenzen-Look ist (weiße Karte, Navy-Serif-Titel,
   roter Tag, Lesezeichen-Pille auf dem Bild). Mit erhöhter Spezifität
   und !important, weil Page-Builder oder Plugin-Styles vorherige Regeln
   überschreiben können.
   ========================================================================== */

/* ---- Karte selbst ---- */
.fp-blog-posts .fp-posts-grid .fp-post-card,
.fp-page-blog .fp-posts-grid .fp-post-card {
  background: #fff !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(10,31,68,0.06) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

.fp-blog-posts .fp-posts-grid .fp-post-card:hover,
.fp-page-blog .fp-posts-grid .fp-post-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(10,31,68,0.12) !important;
  border-color: #E5E7EB !important;
}

/* ---- Bild-Bereich oben (16:10) ---- */
.fp-blog-posts .fp-post-card .fp-post-img-link,
.fp-page-blog .fp-post-card .fp-post-img-link {
  position: relative !important;
  display: block !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  background: #0A1F44 !important;
}

/* ---- Placeholder-Variante (ohne Bild) ---- */
.fp-blog-posts .fp-post-card .fp-post-ph,
.fp-page-blog .fp-post-card .fp-post-ph {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    linear-gradient(135deg, rgba(10,31,68,0.92) 0%, rgba(26,58,107,0.95) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 40px) !important;
}

.fp-blog-posts .fp-post-card .fp-post-ph-watermark,
.fp-page-blog .fp-post-card .fp-post-ph-watermark {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 72px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.12) !important;
  letter-spacing: -0.02em !important;
}

.fp-blog-posts .fp-post-card .fp-post-ph-watermark .fp-br,
.fp-page-blog .fp-post-card .fp-post-ph-watermark .fp-br {
  color: rgba(227, 6, 19, 0.55) !important;
}

/* Cluster-Overlay-Pille auf dem Bild (analog Referenzen) */
.fp-blog-posts .fp-post-card .fp-post-ph-label,
.fp-page-blog .fp-post-card .fp-post-ph-label {
  position: absolute !important;
  bottom: 16px !important;
  left: 16px !important;
  background: rgba(10,31,68,0.92) !important;
  color: #fff !important;
  padding: 8px 14px !important;
  border-radius: 6px !important;
  border-left: 4px solid #E30613 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  backdrop-filter: blur(4px) !important;
}

/* ---- Karten-Body (weiß, dunkler Text) ---- */
.fp-blog-posts .fp-post-card .fp-post-body,
.fp-page-blog .fp-post-card .fp-post-body {
  background: #fff !important;
  padding: 24px 24px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

/* Meta-Zeile: Kategorie · Lesezeit */
.fp-blog-posts .fp-post-card .fp-post-meta,
.fp-page-blog .fp-post-card .fp-post-meta {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.fp-blog-posts .fp-post-card .fp-post-cat,
.fp-page-blog .fp-post-card .fp-post-cat {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #E30613 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  background: transparent !important;
  padding: 0 !important;
}

.fp-blog-posts .fp-post-card .fp-post-time,
.fp-page-blog .fp-post-card .fp-post-time {
  font-size: 11px !important;
  color: #6B7280 !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* TITEL — endlich sichtbar */
.fp-blog-posts .fp-post-card h3,
.fp-page-blog .fp-post-card h3 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  color: #0A1F44 !important;
  margin: 0 0 12px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}

.fp-blog-posts .fp-post-card h3 a,
.fp-page-blog .fp-post-card h3 a {
  color: inherit !important;
  text-decoration: none !important;
}

.fp-blog-posts .fp-post-card:hover h3 a,
.fp-page-blog .fp-post-card:hover h3 a {
  color: #E30613 !important;
}

/* EXCERPT */
.fp-blog-posts .fp-post-card p,
.fp-page-blog .fp-post-card p {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #4B5563 !important;
  margin: 0 0 16px !important;
  flex: 1 !important;
}

/* CTA-Link */
.fp-blog-posts .fp-post-card .fp-post-link,
.fp-page-blog .fp-post-card .fp-post-link {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0A1F44 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  margin-top: auto !important;
  transition: color .2s !important;
}

.fp-blog-posts .fp-post-card:hover .fp-post-link,
.fp-page-blog .fp-post-card:hover .fp-post-link {
  color: #E30613 !important;
}

/* ---- Sektions-Hintergrund: hellgrau statt navy, wie bei Referenzen ---- */
.fp-page-blog .fp-blog-posts,
body.page .fp-blog-posts {
  background: #F4F6F9 !important;
  color: #0A1F44 !important;
}

.fp-page-blog .fp-blog-posts h2,
.fp-page-blog .fp-blog-posts-head h2 {
  color: #0A1F44 !important;
}

.fp-page-blog .fp-blog-posts-head .fp-kicker-dark {
  color: #E30613 !important;
}

.fp-page-blog .fp-blog-posts-head .fp-kicker-dark .fp-br {
  color: #E30613 !important;
}

.fp-page-blog .fp-blog-posts-more .fp-blog-posts-note {
  color: #4B5563 !important;
}


/* ==========================================================================
   BLOG-FILTER — Animation für ein-/ausgeblendete Karten
   ========================================================================== */

.fp-cat-chip {
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.fp-post-card {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Hidden-State muss mindestens die Spezifität des Hard-Overrides haben,
   damit das display:flex !important der .fp-blog-posts .fp-posts-grid
   .fp-post-card Regel überschrieben wird. */
.fp-blog-posts .fp-posts-grid .fp-post-card.fp-post-card-hidden,
.fp-page-blog .fp-posts-grid .fp-post-card.fp-post-card-hidden,
.fp-post-card.fp-post-card-hidden {
  display: none !important;
}

.fp-posts-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #6B7280;
  font-size: 15px;
  padding: 40px 0;
  font-style: italic;
}

/* ==========================================================================
   RATGEBER — ROI-Rechner (LIMS-Kosten-Seite)
   ========================================================================== */

.fp-roi {
  max-width: 980px;
  margin: 8px auto 0;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.fp-roi-inputs {
  background: #ffffff;
  border: 1px solid #e3e8f0;
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.fp-roi-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fp-roi-field label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #0A1F44;
}

.fp-roi-field input,
.fp-roi-field select {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #0A1F44;
  padding: 11px 14px;
  border: 1px solid #cdd6e4;
  border-radius: 8px;
  background: #f5f7fb;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.fp-roi-field input:focus,
.fp-roi-field select:focus {
  outline: none;
  border-color: #E30613;
  box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.12);
  background: #ffffff;
}

.fp-roi-result {
  background: #0A1F44;
  border-radius: 14px;
  padding: 32px 28px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.fp-roi-result-label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9db0d4;
  margin: 0 0 10px;
}

.fp-roi-result-value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 600;
  line-height: 1.05;
  color: #ffffff;
  margin: 0;
}

.fp-roi-result-sub {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #cdd9ef;
  margin: 12px 0 0;
}

.fp-roi-disclaimer {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #7e93bc;
  margin: 20px 0 0;
}

@media (max-width: 768px) {
  .fp-roi {
    grid-template-columns: 1fr;
  }
}