:root{
      --bg:#ffffff;
      --text:#0f172a;
      --muted:#6b7280;
      --line:#e5e7eb;
      --card:#ffffff;
      --accent:#1ea37a;
      --accent-700:#158862;
      --deep:#113a37;
      --deep-2:#0f2f2c;
      --hero-overlay: rgba(15,47,44,.55);
      --shadow-soft:0 8px 22px rgba(0,0,0,.06);
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
    .container{max-width:1200px;margin:0 auto;padding:0 24px}
    .btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;border:none;
         padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:700;letter-spacing:.2px;
         box-shadow:var(--shadow-soft);transition:.18s ease}
    .btn:hover{background:var(--accent-700);transform:translateY(-1px)}
    .btn.outline{background:transparent;border:2px solid rgba(255,255,255,.6);color:#fff}
    /* NAV */
    .nav{position:fixed;inset:0 0 auto 0;height:64px;display:flex;align-items:center;z-index:40;
         background:linear-gradient(to bottom, rgba(14,58,52,.88), rgba(14,58,52,.60), transparent);
         color:#e9f4f0;}
    .nav .brand{font-family:"Playfair Display",serif;font-weight:700;font-size:22px;letter-spacing:.5px}
    .nav .row{display:flex;align-items:center;justify-content:space-between;gap:16px}
    .nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0}
    .nav a{color:#e9f4f0;text-decoration:none;font-weight:600;opacity:.9}
    .nav a:hover{opacity:1;text-decoration:underline}
    .nav .right{display:flex;align-items:center;gap:14px}
    .hamb{display:none;background:transparent;border:0;color:#fff;font-size:24px}
    /* ==========================================================
       HERO / BACKUP / FACTORING / KREDITMANAGEMENT
       Bereinigt: eine gemeinsame Basis, keine konkurrierenden .hero-Regeln
       ========================================================== */

    /* Individuelle Hero-Grafiken */
    .hero {
      --hero-image: url('/assets/img/ueberuns-bg.png');
    }

    .hero-backup {
      --hero-image: url('/assets/img/skyline.png');
    }

    .hero-factoring {
      --hero-image: url('/assets/img/factoring.png');
    }

    .hero-kreditmgm {
      --hero-image: url('/assets/img/order-to-cash.png');
    }

    /* Gemeinsame Hero-Basis */
    .hero,
    .hero-backup,
    .hero-factoring,
    .hero-kreditmgm {
      position: relative;
      isolation: isolate;
      display: block;
      min-height: 680px;
      padding-top: 90px;
      padding-bottom: 220px;
      overflow: hidden;
      box-sizing: border-box;
      color: #fff;
      background-color: #003f3d;
    }

    /*
       Nur das DIREKTE .bg-Element des jeweiligen Hero wird angesprochen.
       Dadurch kollidieren andere .bg-Klassen auf Unterseiten nicht damit.
    */
    .hero > .bg,
    .hero-backup > .bg,
    .hero-factoring > .bg,
    .hero-kreditmgm > .bg {
      position: absolute;
      inset: 0;
      z-index: -2;
      opacity: 1;

      /* Einzelproperties statt background-shorthand vermeiden ungewollte Resets. */
      background-image: var(--hero-image);
      background-repeat: no-repeat;
      background-position: center bottom;
      background-size: 100% auto;
      background-color: #003f3d;
    }

    /* Optionales Overlay bleibt transparent, liegt aber sicher hinter dem Content. */
    .hero > .overlay,
    .hero-backup > .overlay,
    .hero-factoring > .overlay,
    .hero-kreditmgm > .overlay {
      position: absolute;
      inset: 0;
      z-index: -1;
      background: transparent;
      pointer-events: none;
    }

    /* Textblock mittig und immer oberhalb der Grafik. */
    .hero > .content,
    .hero-backup > .content,
    .hero-factoring > .content,
    .hero-kreditmgm > .content {
      position: relative;
      z-index: 1;
      width: min(100%, 1100px);
      margin-inline: auto;
      padding-bottom: 0;
      text-align: center;
    }

    .hero .eyebrow,
    .hero-backup .eyebrow,
    .hero-factoring .eyebrow,
    .hero-kreditmgm .eyebrow {
      margin: 0 auto 14px;
      text-align: center;
    }

    .hero .title,
    .hero-backup .title,
    .hero-factoring .title,
    .hero-kreditmgm .title {
      margin: 0 auto 14px;
      text-align: center;
      line-height: 1.08;
    }

    .hero .lead,
    .hero-backup .lead,
    .hero-factoring .lead,
    .hero-kreditmgm .lead {
      max-width: 900px;
      margin: 0 auto;
      text-align: center;
      line-height: 1.45;
    }

    .hero .cta-row,
    .hero-backup .cta-row,
    .hero-factoring .cta-row,
    .hero-kreditmgm .cta-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 24px;
    }

    /* Desktop */
    @media (min-width: 1200px) {
      .hero,
      .hero-backup,
      .hero-factoring,
      .hero-kreditmgm {
        min-height: 660px;
        padding-top: 90px;
        padding-bottom: 205px;
      }

      .hero > .bg,
      .hero-backup > .bg,
      .hero-factoring > .bg,
      .hero-kreditmgm > .bg {
        /* 110% zieht die Häuser etwas nach oben, ohne sie so stark wie 125% zu beschneiden. */
        background-size: 110% auto;
        background-position: center bottom;
      }
    }

    /* Tablet */
    @media (min-width: 769px) and (max-width: 1199px) {
      .hero,
      .hero-backup,
      .hero-factoring,
      .hero-kreditmgm {
        min-height: 620px;
        padding-top: 86px;
        padding-bottom: 195px;
      }

      .hero > .bg,
      .hero-backup > .bg,
      .hero-factoring > .bg,
      .hero-kreditmgm > .bg {
        background-size: 120% auto;
        background-position: center bottom;
      }

      .hero > .content,
      .hero-backup > .content,
      .hero-factoring > .content,
      .hero-kreditmgm > .content {
        width: min(100%, 900px);
      }
    }

    /* Mobile */
    @media (max-width: 768px) {
      .hero,
      .hero-backup,
      .hero-factoring,
      .hero-kreditmgm {
        min-height: 570px;
        padding-top: 88px;
        padding-bottom: 185px;
      }

      .hero > .bg,
      .hero-backup > .bg,
      .hero-factoring > .bg,
      .hero-kreditmgm > .bg {
        background-size: 138% auto;
        background-position: center bottom;
      }

      .hero > .content,
      .hero-backup > .content,
      .hero-factoring > .content,
      .hero-kreditmgm > .content {
        width: 100%;
        max-width: 100%;
        padding-inline: 20px;
      }

      .hero .eyebrow,
      .hero-backup .eyebrow,
      .hero-factoring .eyebrow,
      .hero-kreditmgm .eyebrow {
        margin-bottom: 10px;
      }

      .hero .title,
      .hero-backup .title,
      .hero-factoring .title,
      .hero-kreditmgm .title {
        margin-bottom: 10px;
        line-height: 1.05;
      }

      .hero .lead,
      .hero-backup .lead,
      .hero-factoring .lead,
      .hero-kreditmgm .lead {
        max-width: 620px;
        line-height: 1.4;
      }
    }

    /* Kleine Smartphones */
    @media (max-width: 480px) {
      .hero,
      .hero-backup,
      .hero-factoring,
      .hero-kreditmgm {
        min-height: 530px;
        padding-top: 76px;
        padding-bottom: 165px;
      }

      .hero > .bg,
      .hero-backup > .bg,
      .hero-factoring > .bg,
      .hero-kreditmgm > .bg {
        background-size: 150% auto;
      }

      .hero > .content,
      .hero-backup > .content,
      .hero-factoring > .content,
      .hero-kreditmgm > .content {
        padding-inline: 16px;
      }
    }

    /* Ultrawide: Grafik nicht endlos aufblasen. */
    @media (min-width: 1700px) {
      .hero,
      .hero-backup,
      .hero-factoring,
      .hero-kreditmgm {
        min-height: 700px;
        padding-top: 95px;
        padding-bottom: 225px;
      }

      .hero > .bg,
      .hero-backup > .bg,
      .hero-factoring > .bg,
      .hero-kreditmgm > .bg {
        background-size: 1800px auto;
        background-position: center bottom;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero > .bg,
      .hero-backup > .bg,
      .hero-factoring > .bg,
      .hero-kreditmgm > .bg {
        animation: none;
        transition: none;
      }
    }

    .eyebrow{letter-spacing:.2em;text-transform:uppercase;font-size:12px;color:#c7efe0;font-weight:700}
    .title{font-family:"Playfair Display",serif;font-weight:700;font-size: clamp(34px, 5vw, 64px); line-height:1.1; margin:.5rem 0 1rem;max-width:20ch}
    
    /* FEATURES */
    .features{background:#fff;position:relative;margin-top:-72px;z-index:3}
    .features .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .feature{background:var(--card);border:1px solid var(--line,#e5e7eb);border-radius:12px;padding:18px 18px 16px;box-shadow:var(--shadow-soft);position:relative;overflow:hidden}
    .feature .top{display:flex;align-items:center;gap:12px;margin-bottom:8px}
    .feature h3{margin:0;font-size:18px}
    .feature p{margin:0;color:#6b7280;font-size:14px}
    .feature .num{position:absolute;right:18px;bottom:10px;color:#9fb5b0;font-weight:700;opacity:.7}
    .feature .dash{height:2px;background:#d1e7df;margin-top:14px}
    /* PROCESS */
   .process{
  padding: 72px 0;
  background: transparent;          /* war: #113a37 */
}

/* 2) Der “Kasten” sitzt nun im Container und ist zentriert & schmaler */
.process .container{
  background:#113a37;
  color:#eaf6f3;
  max-width: 1100px;                 /* Breite hier anpassen */
  width: min(1100px, calc(100% - 64px)); /* Rand auf kleinen Screens */
  margin-inline: auto;               /* zentrieren */
  border-radius: 12px;
  padding: 56px 64px;                /* Innenabstand */
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

/* bestehendes Grid unverändert */
.process .row{
  display:grid;
  grid-template-columns: 1.1fr 1.2fr;
  gap:36px;
  align-items:center;
}

.process h2{
  font-family:"Playfair Display",serif;
  font-size:clamp(28px,3.6vw,44px);
  margin:0 0 10px;
}

.process .steps{
  position:relative;
  border-left:2px dashed rgba(255,255,255,.18);
  padding-left:28px;
}

/* Optional: etwas kleinere Innenabstände auf sehr schmalen Screens */
@media (max-width: 640px){
  .process .container{ padding: 40px 24px; }
  .process .row{ grid-template-columns: 1fr; gap: 24px; }
}
    .step{margin:22px 0}.step strong{display:block;margin-bottom:6px;color:#fff}
    .badge{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);font-size:12px;margin-left:-43px;margin-right:10px}
    /* SERVICES */
	
 .services {
  padding: 50px 50px 64px;
  background: #fff;
}

/* linke Spalte Text, rechte Spalte die Cards */
.services .grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 28px;
  align-items: start; /* statt 'left' */
}

.services h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(26px, 3.2vw, 38px);
  margin-top: 0;
}

/* ➜ Cards in einer Reihe, mit Wrap auf kleineren Screens */
.service-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 nebeneinander */
  gap: 16px;
}

/* Card-Styling */
.card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: var(--shadow-soft);
   width: 210px;
}

.card .head {
  display: flex;
  align-items: flex-start; /* statt 'left' */
  gap: 12px;
  margin-bottom: 8px;
 
 
}

.card h3 {
  margin: 0;
  font-size: 16px;
}

.card p {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
}

/* kleine UX-Verbesserungen (optional) */
.card .ico {
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
}

/* Responsiv: unter 1024px nur 2 pro Zeile, unter 640px 1 pro Zeile
   und die Hauptspalten stapeln sich */
@media (max-width: 1024px) {
  .services .grid {
    grid-template-columns: 1fr; /* Text über Cards */
  }
  .service-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .service-cards {
    grid-template-columns: 1fr;
  }
}
	
	/* FOOTER */
    .footer{background:#0f2f2c;color:#eaf1f0;padding:42px 0}
    .footer .grid{display:grid;grid-template-columns: 1.2fr 1fr 1fr;gap:24px}
    .contact-box{border-right:1px solid rgba(255,255,255,.08);padding-right:24px}
    .footer h4{margin:0 0 10px;font-weight:700}
    .footer ul{list-style:none;padding:0;margin:0}.footer li{margin:8px 0}
    .footer a{color:#d6f2e8;text-decoration:none}.footer a:hover{text-decoration:underline}
    .copyright{border-top:1px solid rgba(255,255,255,.08);margin-top:26px;padding-top:14px;font-size:13px;color:#bcd7cf}
    @media (max-width: 1024px){
      .features .grid{grid-template-columns:1fr}
      .process .row{grid-template-columns:1fr}
      .services .grid{grid-template-columns:1fr}
      .footer .grid{grid-template-columns:1fr;gap:16px}
      .contact-box{border-right:0;padding-right:0;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:18px;margin-bottom:12px}
      .nav ul{display:none}.hamb{display:block}
    }


/* ==== Fixes: mobile hamburger dropdown / scoping & layout ==== */
header.nav .right{ display:flex; align-items:center; gap:12px; }

/* burger */
header.nav .right details.hamb > summary{
  margin-left: 6px;
  border-color: rgba(255,255,255,.22);
}

/* force dropdown to be its own block, not affected by global nav flex rules */
header.nav .right details.hamb .mobile-nav{
  display: block !important;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 240px;
  max-height: 70vh;
  overflow: auto;
  background: #0c3336;                 /* theme dark */
  color: #e7f2ee;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 8px 0;
  margin: 0;
  list-style: none;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  z-index: 10000;
  flex-direction: column !important;
  gap: 0 !important;
}

	header.nav nav ul li { position: relative; }

header.nav nav ul li .dropdown{
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  padding: 8px;
  margin-top: 8px;
  border-radius: 10px;
  background: var(--bg-2, #0c3336);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  display: none;               /* versteckt bis Hover/Fokus */
  z-index: 50;
}

/* Items im Dropdown */
header.nav nav ul li .dropdown > li > a{
  display: block;
  padding: 10px 12px;
  color: var(--fg, #e7f2ee);
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
}

header.nav nav ul li .dropdown > li > a:hover{
  background: rgba(255,255,255,.08);
}

/* Anzeigen bei Hover oder Tastatur-Fokus */
header.nav nav ul li:hover > .dropdown,
header.nav nav ul li:focus-within > .dropdown{
  display: block;
}

/* 3rd-level (Dropdown im Dropdown) rechts andocken */
header.nav nav ul li .dropdown li.has-dropdown > .dropdown{
  top: 0;
  left: 100%;
  margin-top: 0;
  margin-left: 8px;
}

/* Pfeile optional hübscher machen (ersetzt ▾/▸ aus dem HTML) */
header.nav nav li.has-dropdown > a::after{
  content: "▾";
  margin-left: 6px;
  font-size: .9em;
  opacity: .9;
}
header.nav nav li.has-dropdown .dropdown li.has-dropdown > a::after{
  content: "▸";
  margin-left: 6px;
}

/* small screens: let panel use full width under the header */
@media (max-width: 640px){
  header.nav .right details.hamb .mobile-nav{
    left: 0;
    right: 0;
    width: min(96vw, 400px);
    margin-left: auto;
  }
}

/* =========================
   BACK-UP SERVICING (scoped)
   ========================= */

/* generic section helpers (only on the backup page) */
.page-backup .section.section--muted{background:#f5f7f9;}h2{font-family:"Playfair Display",serif;font-size:clamp(26px,3.2vw,38px);margin-top:0}
.page-backup .section.tone-b{background:linear-gradient(145deg,#0f403b,#0b2b28 60%);color:#eaf6f3;}h2{font-family:"Playfair Display",serif;font-size:clamp(26px,3.2vw,38px);margin-top:0}
.page-backup .cycle.tone-a{background:linear-gradient(145deg,#134b45,#0f2f2c 60%);color:#eaf6f3;--ring-thickness:18%;}
.page-backup .tone-a h2{font-family:"Playfair Display",serif;font-size:clamp(26px,3.2vw,38px);margin-top:0},.page-backup .tone-b h2{color:#eaf6f3;}

/* two-col layout for text + graphic */
.page-backup .section .twocol{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:start;}
.page-backup .cycle.tone-a .grid{display:grid;grid-template-columns:1.05fr 1.25fr;gap:40px;align-items:center;}
.page-backup .section .twocol > :first-child{min-width:0;}
.page-backup .section .twocol > :last-child{align-self:start;}
.page-backup .section .card .ico{width:clamp(80px,9vw,130px);}

/* DONUT + OVERLAY LABELS (only Etappen section) */
.page-backup #etappen .diagram-wrap{position:relative;width:min(620px,46vw);aspect-ratio:1/1;margin:24px 0;margin-left:auto;z-index:0;}
.page-backup #etappen .cycle-diagram{
  width:100%;height:100%;border-radius:50%;
  background:conic-gradient(#26b083 0 34%,#199071 34% 68%,#0f2f2c 68% 100%);
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent calc(50% - var(--ring-thickness)),#000 calc(50% - var(--ring-thickness) + 1px));
          mask:radial-gradient(circle at 50% 50%,transparent calc(50% - var(--ring-thickness)),#000 calc(50% - var(--ring-thickness) + 1px));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.page-backup #etappen .diagram-wrap .step-card{position:absolute;width:min(380px,36vw);background:transparent;border:0;box-shadow:none;color:#eaf6f3;z-index:2;}
.page-backup #etappen .diagram-wrap .pill{background:transparent;color:#d6f3ea;border:1px solid rgba(255,255,255,.5);}

/* Positions (desktop): 1=links/oben, 2=links/unten (weiter rechts), 3=rechts/mittig */
@media (min-width:1025px){
  .page-backup #etappen .diagram-wrap .step1{top:4%;left:-10%;right:auto;}
  .page-backup #etappen .diagram-wrap .step2{top:30%;left:60%;right:auto;z-index:3;}
  .page-backup #etappen .diagram-wrap .step3{top:75%;left:30%;right:auto;z-index:2;}
}

/* responsive fallback */
@media (max-width:1024px){
  .page-backup .section .twocol,
  .page-backup .cycle.tone-a .grid{grid-template-columns:1fr;}
  .page-backup #etappen .diagram-wrap{margin:20px 0 0;}
  .page-backup #etappen .diagram-wrap .step-card{position:static;width:100%;margin-top:12px;transform:none;color:inherit;}
}


/* =====================================================================
   Back-Up Servicing (page specific): Skyline hero + subtle node glow
   ===================================================================== */
.page-backup-hero{
position:relative;min-height:86vh;color:#fff;display:flex;align-items:center;overflow:hidden;background:var(--deep)
}
/* Ziel: genau der Sub-Hero auf der Backup-Seite */
.page-backup-hero .bg{
   position:absolute;inset:0;
      /* Animated background + gradients */
      background:
        url('/assets/img/skyline-banks.jpg') center top / cover no-repeat,
        radial-gradient(1200px 520px at 60% -10%, rgba(255,255,255,.25), transparent 60%),
        radial-gradient(900px 420px at 100% 40%, rgba(30,163,122,.35), transparent 60%),
        linear-gradient(145deg,#1a4c46,#0f2f2c 60%);
      opacity:.9;
}

.page-backup-hero .bg::after{
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(8px 8px at 12% 24%, rgba(59,255,218,.25), transparent 50%),
    radial-gradient(8px 8px at 34% 12%, rgba(59,255,218,.2),  transparent 50%),
    radial-gradient(8px 8px at 62% 18%, rgba(59,255,218,.25), transparent 50%),
    radial-gradient(8px 8px at 78% 34%, rgba(59,255,218,.2),  transparent 50%),
    radial-gradient(8px 8px at 28% 56%, rgba(59,255,218,.18), transparent 50%),
    radial-gradient(8px 8px at 68% 72%, rgba(59,255,218,.22), transparent 50%);
  mix-blend-mode: screen;
  opacity: .75;
  animation: glowTwinkle 12s linear infinite;
}
@keyframes glowTwinkle{
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.35); }
}

/* Falls einzelne Elemente nicht in .content hängen oder zusätzliche Sicherheit gewünscht ist: */
.page-backup-hero .eyebrow,
.page-backup-hero .title,
.page-backup-hero .lead {
  position: relative;
  z-index: 3;
}

/* Factoring: 3D-Bild + animierte Punkte */

.page-factoring-hero{
position:relative;min-height:86vh;color:#fff;display:flex;align-items:center;overflow:hidden;)
}
/* Ziel: genau der Sub-Hero auf der Backup-Seite */
.page-factoring-hero .bg{
  position:absolute; inset:0;
   background:
          url('/assets/img/background.png') center top / cover no-repeat,
          radial-gradient(1200px 520px at 60% -10%, rgba(255,255,255,.25), transparent 60%),
          radial-gradient(900px 420px at 100% 40%, rgba(30,163,122,.35), transparent 60%),
          linear-gradient(145deg,#1a4c46,#0f2f2c 60%);
}

/*.page-factoring-hero .bg::after{
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(8px 8px at 12% 24%, rgba(59,255,218,.25), transparent 50%),
    radial-gradient(8px 8px at 34% 12%, rgba(59,255,218,.2),  transparent 50%),
    radial-gradient(8px 8px at 62% 18%, rgba(59,255,218,.25), transparent 50%),
    radial-gradient(8px 8px at 78% 34%, rgba(59,255,218,.2),  transparent 50%),
    radial-gradient(8px 8px at 28% 56%, rgba(59,255,218,.18), transparent 50%),
    radial-gradient(8px 8px at 68% 72%, rgba(59,255,218,.22), transparent 50%);
  mix-blend-mode: screen;
  opacity: .75;
  animation: glowTwinkle 12s linear infinite;
}*/
@keyframes glowTwinkle{
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.35); }
}


 /* Page FActoring */

/* Factoring: 3D-Bild + animierte Punkte */
/*.page-factoring-hero{
    position: relative;

  min-height: clamp(420px, 50vw, 720px); 
  display: flex;
  align-items: center;
  overflow: hidden;
  color:#fff;

  clear: both;
} */

/* Hero-Hintergrund (PNG oben, dann Glows) */
.page-factoring-hero .bg{
  position:absolute; inset:0;
   background:
          url('/assets/img/background.png') center top / cover no-repeat,
          radial-gradient(1200px 520px at 60% -10%, rgba(255,255,255,.25), transparent 60%),
          radial-gradient(900px 420px at 100% 40%, rgba(30,163,122,.35), transparent 60%),
          linear-gradient(145deg,#1a4c46,#0f2f2c 60%);
}
/*.page-factoring-hero .overlay{ position:absolute; inset:0;  z-index:1; }
.page-factoring-hero .content{ position:relative; z-index:2; } */

/* Animation als Overlay über dem Hero-Bild – nimmt keinen Platz im Layout ein */
/*.page-factoring-hero .factoring-flow{
  --accent:#66ffcc;
  position: absolute; inset: 0; z-index: 2;
  margin: 0; max-width: none; width: 100%; height: 100%;
  background: none; border-radius: 0; box-shadow: none;
  pointer-events: none;
}
.factoring-flow .flow{
  position:absolute; inset:0;
  z-index:1;                    
  pointer-events:none;
}

.factoring-flow .dot{
  fill:var(--accent);
  filter:url(#glow);
  opacity:.95;
}
.page-factoring-hero svg.flow{ width:100%; height:100%; display:block; }
.page-factoring-hero .factoring-flow .image{ display:none; } /* nur die echten Pfade nutzen */
footer { clear: both; }


/* =====================================================================
   Factoring Services (page-specific): Wide card layout
   ===================================================================== */
.fs-services {
  /* Einstellbare Maximalbreite der Card */
  --fs-card-max: 980px;
  --fs-card-pad: 24px;
}

/* Section-Grid hier auf 1 Spalte zwingen, damit die Card Platz hat */
.fs-services .container.grid {
  grid-template-columns: 1fr;
  align-items: start;
}

/* Card-Container: zentriert, volle Breite, Abstand */
.fs-services .service-cards {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 24px;
  margin-top: 16px; /* optional, etwas Luft zum Titelblock */
}
.fs-services .service-cards .p{
   margin: 0;
  line-height: 1.55;
}

/* Breite & Optik NUR für die Factoring-Card, globale .card bleibt unberührt */
.fs-services .fs-card {
  width: min(100%, var(--fs-card-max));
  padding: var(--fs-card-pad);
  border-radius: 16px;
  background: var(--surface, #0f2f2c);
  color: var(--text, #e8f5f0);
  box-shadow: 0 12px 36px rgba(0,0,0,.28);
}

/* Optional: etwas großzügiger auf sehr großen Screens */
@media (min-width: 1200px) {
  .fs-services { --fs-card-max: 1040px; }
}
/* ============================
   Factoring – Vorteile (grid)
   ============================ */

.fs-benefits { 
  padding: 72px 0;
}

.fs-benefits .container {
  /* Container bleibt mittig – Karten starten links und füllen die Breite */
  max-width: 1320px;     /* 1400–1440px geht auch, wenn du mehr Breite willst */
 
}

.fs-benefits .cards {
  /* Statt zentriertem Flex: Grid über volle Containerbreite */
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr)); /* 5 gleich breite Spalten */
  gap: 56px 24px;   
  /* vertikal / horizontaler Abstand */
  align-items: stretch;           /* alle Kacheln gleiche Höhe */
  justify-items: start;           /* Inhalt in jeder Kachel links */
  width: 100%;
  overflow: visible;              /* kein Horizontal-Scroll */
}

.fs-benefits .card {
  /* einheitliche Boxen */
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: transparent;        /* falls die globale .card einen Hintergrund hat */
  box-shadow: none;               /* ggf. globale Schatten neutralisieren */
  border: 0;                      /* optional – je nach globaler .card */
  padding: 0;	
  min-width: 400;                   /* verhindert Überlauf */
}

.fs-benefits .card .ico-wrap {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(102,255,204,.12);
  display: grid; place-items: center;
  margin-bottom: 14px;
}

.fs-benefits .card h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  line-height: 1.35;
}

.fs-benefits .card p {
  margin: 0;
  line-height: 1.55;
}

/* Responsive Spaltenanzahl */
@media (max-width: 1280px){
  .fs-benefits .cards { grid-template-columns: repeat(4, minmax(220px, 1fr)); }
}
@media (max-width: 1024px){
  .fs-benefits .cards { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
}
@media (max-width: 768px){
  .fs-benefits .cards { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 520px){
  .fs-benefits .cards { grid-template-columns: 1fr; }
}





/* ===== Debitorenmanagement ====================================== */


.page-debitoren-hero{ 
position:relative;min-height:86vh;color:#fff;display:flex;align-items:center;overflow:hidden;
}


/* ===== 3D Debitoren-Flow Overlay ====================================== */

.page-debitoren-hero .bg{
  position:absolute; inset:0;
   background:
          url('/assets/img/background-dmgm.png') center top / cover no-repeat,
          radial-gradient(1200px 520px at 60% -10%, rgba(255,255,255,.25), transparent 100%),
			radial-gradient(900px 420px at 100% 40%, rgba(30,163,122,.35), transparent 100%),
			linear-gradient(145deg,#1a4c46,#0f2f2c 60%);
		opacity:.9;
}

/* ===== 3D Debitoren-Flow (canonical) ================================ */

/*
.page-debitoren-hero .dm-flow3d{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  display:grid; place-items:center; perspective:1200px;
}
.dm-flow3d__pipes{
  width:var(--dm3d-size); height:var(--dm3d-size);
  transform: translateZ(0) rotateX(12deg); opacity:.95;

}
.page-debitoren-hero .dm-flow3d__pipes #dmFlowLoop{
  stroke-width: 60px;   
}

@keyframes dm-flow-enter{
  0%{offset-distance:-5%; transform:translateZ(50px) scale(.8); opacity:0}
  60%{offset-distance:-1%; transform:translateZ(30px) scale(.9); opacity:.9}
  100%{offset-distance:0%; transform:translateZ(50px) scale(1); opacity:1}
}
@keyframes dm-flow-move{
  0%{offset-distance:0%; transform:translateZ(50px) scale(1)}
  50%{offset-distance:50%; transform:translateZ(10px) scale(.92)}
  100%{offset-distance:100%; transform:translateZ(50px) scale(1)}
}
@keyframes dm-flow-color{
  0%,20%   { background:#69e3c7; box-shadow:0 0 0 4px rgba(105,227,199,.15), 0 0 24px rgba(111,255,228,.45), 0 0 48px rgba(47,185,159,.35) }
  20%,40%  { background:#8df7a9; box-shadow:0 0 0 4px rgba(141,247,169,.12), 0 0 24px rgba(141,247,169,.45), 0 0 48px rgba(74,214,141,.35) }
  40%,60%  { background:#ffcf66; box-shadow:0 0 0 4px rgba(255,207,102,.12), 0 0 24px rgba(255,207,102,.40), 0 0 48px rgba(255,180,0,.30) }
  60%,80%  { background:#ff7a59; box-shadow:0 0 0 4px rgba(255,122,89,.12), 0 0 24px rgba(255,122,89,.40), 0 0 48px rgba(255,82,50,.30) }
  80%,100% { background:#5fe1ff; box-shadow:0 0 0 4px rgba(95,225,255,.12), 0 0 24px rgba(95,225,255,.40), 0 0 48px rgba(0,170,220,.30) }
}
.dm-flow3d__particle{
  position:absolute; width:30px; height:30px; border-radius:999px;
  will-change:transform; offset-rotate:0deg; transform:translateZ(50px);
  offset-path: path("M500,170 A330,330 0 1,1 499.9,170 Z");
  animation:
    dm-flow-enter 1.1s ease-out both,
    dm-flow-move var(--dur,16s) linear infinite 1.1s,
    dm-flow-color 16s linear infinite 1.1s;
}
.dm-flow3d__particle.p1{ --dur:16s;  animation-delay:0s,   0s,   0s }
.dm-flow3d__particle.p2{ --dur:18s;  animation-delay:0s,  -3s,  -3s }
.dm-flow3d__particle.p3{ --dur:20s;  animation-delay:0s,  -6s,  -6s }
.dm-flow3d__particle.p4{ --dur:22s;  animation-delay:0s,  -9s,  -9s }
.dm-flow3d__particle.p5{ --dur:24s;  animation-delay:0s, -12s, -12s }
.dm-flow3d__particle.p6{ --dur:26s;  animation-delay:0s, -15s, -15s }
.dm-flow3d__particle.p7{ --dur:24s;  animation-delay:0s, -18s, -18s }


@media (prefers-reduced-motion: reduce){
  html:not(.force-motion) .dm-flow3d__particle,
  html:not(.force-motion) .dm-flow3d__report{
    animation: none !important;
    offset-path: none;
  }
}

@media (max-width: 600px){
  .page-debitoren-hero{ --dm3d-size: clamp(320px, 86vw, 560px); }
}*/
/* ==================================================================== */
/*.page-debitoren-hero .dm-flow3d{
  transform: rotateX(12deg);
  transform-style: preserve-3d;
}

/* 2) Das SVG selbst nicht zusätzlich neigen (verhindert doppelten Tilt) */
.page-debitoren-hero .dm-flow3d__pipes{
  transform: translateZ(0) !important;
}*/

/* 3) Skalierungsfeste Motion-Path-Kurve in Prozent (passt sich --dm3d-size an) */
/*.page-debitoren-hero .dm-flow3d__particle{

	offset-path: path("M 50% 17% A 33% 33% 0 1 1 49.99% 17% Z"); !important;
}*/

/* 4) Keyframes: Neigung in der Animation beibehalten, damit transform nicht die Rotation überschreibt */
@keyframes dm-flow-enter{
  0%   { offset-distance:-5%;  transform: rotateX(12deg) translateZ(50px) scale(.8); opacity:0; }
  60%  { offset-distance:-1%;  transform: rotateX(12deg) translateZ(30px) scale(.9); opacity:.9; }
  100% { offset-distance: 0%;  transform: rotateX(12deg) translateZ(50px) scale(1);  opacity:1; }
}
@keyframes dm-flow-move{
  0%   { offset-distance: 0%;  transform: rotateX(12deg) translateZ(50px) scale(1);   }
  50%  { offset-distance:50%;  transform: rotateX(12deg) translateZ(10px) scale(.92); }
  100% { offset-distance:100%; transform: rotateX(12deg) translateZ(50px) scale(1);   }
}

/* === Motion-Referenz der Particles = exakt die Ringfläche ================= */
/* 1) Partikel-Element wird zum (unsichtbaren) Anker in Ringgröße */
.page-debitoren-hero .dm-flow3d__particle{
  position: absolute;
  /* Anker = so groß wie der Ring */
  width: var(--dm3d-size);
  height: var(--dm3d-size);
  /* exakt zentriert über dem Ring */
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotateX(12deg); /* gleiche Neigung wie der Ring */
  transform-style: preserve-3d;

  /* Pfad in Prozent (= identisch zum SVG mit viewBox 1000×1000) */
  offset-path: path("M 50% 17% A 33% 33% 0 1 1 49.99% 17% Z");
  offset-anchor: 50% 50%;

  /* nur Bewegung auf dem Anker; Farbe/Glow kommen auf ::after */
  animation:
    dm-flow-enter 1.1s ease-out both,
    dm-flow-move  var(--dur,16s) linear infinite 1.1s;
  background: none !important;
  box-shadow: none !important;
}

/* 2) Sichtbarer Punkt sitzt im Zentrum des Ankers und nimmt die Farb-Animation mit */
.page-debitoren-hero .dm-flow3d__particle::after{
  content:"";
  position: absolute; left:50%; top:50%;
  width:100px; height:100px; border-radius:50%;
  transform: translate(-50%, -50%);
  background:#69e3c7;
  box-shadow:
    0 0 0 4px rgba(105,227,199,.15),
    0 0 24px rgba(111,255,228,.45),
    0 0 48px rgba(47,185,159,.35);
  /* Farbübergänge wie gehabt */
  animation: dm-flow-color 16s linear infinite;
 opacity: .55;
}

/* Laufzeiten/Delays bleiben wie bei dir */
.page-debitoren-hero .dm-flow3d__particle.p2::after{ animation-duration:18s; animation-delay:-3s; }
.page-debitoren-hero .dm-flow3d__particle.p3::after{ animation-duration:20s; animation-delay:-6s; }
.page-debitoren-hero .dm-flow3d__particle.p4::after{ animation-duration:22s; animation-delay:-9s; }
.page-debitoren-hero .dm-flow3d__particle.p5::after{ animation-duration:24s; animation-delay:-12s; }

/* WICHTIG: Die Move-/Enter-Keyframes behalten den 12°-Tilt,
   damit die Animation den Drehwinkel nicht überschreibt. */
@keyframes dm-flow-enter{
  0%   { offset-distance:-5%;  transform: translate(-50%, -50%) rotateX(12deg) translateZ(50px) scale(.8); opacity:0; }
  60%  { offset-distance:-1%;  transform: translate(-50%, -50%) rotateX(12deg) translateZ(30px) scale(.9); opacity:.9; }
  100% { offset-distance: 0%;  transform: translate(-50%, -50%) rotateX(12deg) translateZ(50px) scale(1);  opacity:1; }
}
@keyframes dm-flow-move{
  0%   { offset-distance: 0%;  transform: translate(-50%, -50%) rotateX(12deg) translateZ(50px) scale(1);   }
  50%  { offset-distance:50%;  transform: translate(-50%, -50%) rotateX(12deg) translateZ(10px) scale(.92); }
  100% { offset-distance:100%; transform: translate(-50%, -50%) rotateX(12deg) translateZ(50px) scale(1);   }
}

.page-debitoren-hero .dm-flow3d__particle{
  left: 49%;
  top: 48%;
  transform: translate(calc(-50% + 100.10%), calc(-50% + 100.00%)) rotateX(12deg);
}

/* (B) Minimal kleinerer Radius:
   33%  -> 32.6%  (entspricht Start oben bei 50% - 32.6% = 17.4%)
   Damit rücken die Punkte tick nach innen und decken sich mit der Röhre. */
.page-debitoren-hero .dm-flow3d__particle{
  offset-path: path("M 50% 17.4% A 32.6% 32.6% 0 1 1 49.99% 17.4% Z") !important;
}

.page-debitoren-hero{
  --dm-tilt: 12deg;     /* Ring-Neigung   */
  --dm-shift-x: -0.20%;  /* seitlicher Versatz (+ rechts / − links) */
  --dm-shift-y: 0.00%;  /* vertikaler  Versatz (+ runter / − rauf) */
  --dm-z-near: 50px;    /* Z für "vorn"  */
  --dm-z-far:  10px;    /* Z für "hinten"*/
}

/* === Keyframes überschreiben (gleiche Namen, stehen am Ende => gewinnen) === */
@keyframes dm-flow-enter{
  0%   { offset-distance:-1%;
         transform: translate(calc(-50% + var(--dm-shift-x)),
                               calc(-50% + var(--dm-shift-y)))
                    rotateX(var(--dm-tilt)) translateZ(var(--dm-z-near)) scale(.8);
         opacity:0; }
  60%  { offset-distance:-1%;
         transform: translate(calc(-50% + var(--dm-shift-x)),
                               calc(-50% + var(--dm-shift-y)))
                    rotateX(var(--dm-tilt)) translateZ(30px) scale(.9);
         opacity:.9; }
  100% { offset-distance:0%;
         transform: translate(calc(-50% + var(--dm-shift-x)),
                               calc(-50% + var(--dm-shift-y)))
                    rotateX(var(--dm-tilt)) translateZ(var(--dm-z-near)) scale(1);
         opacity:1; }
}

@keyframes dm-flow-move{
  0%   { offset-distance:0%;
         transform: translate(calc(-50% + var(--dm-shift-x)),
                               calc(-50% + var(--dm-shift-y)))
                    rotateX(var(--dm-tilt)) translateZ(var(--dm-z-near)) scale(1); }
  50%  { offset-distance:50%;
         transform: translate(calc(-50% + var(--dm-shift-x)),
                               calc(-50% + var(--dm-shift-y)))
                    rotateX(var(--dm-tilt)) translateZ(var(--dm-z-far))  scale(.92); }
  100% { offset-distance:100%;
         transform: translate(calc(-50% + var(--dm-shift-x)),
                               calc(-50% + var(--dm-shift-y)))
                    rotateX(var(--dm-tilt)) translateZ(var(--dm-z-near)) scale(1); }
}

/* === Debitoren-Hero: Ring ausblenden, Partikel zentrieren (Radius unverändert) === */

/* 1) Ring (SVG/Pipes) ausblenden */
/*.page-debitoren-hero .dm-flow3d__pipes{
  display: none !important;
}*/

/* 2) Partikel exakt zentrieren, Radius beibehalten (32.6%) */
/* 1) Ring (SVG/Pipes) ausblenden */
/*.page-debitoren-hero{
 
  --dm-shift-x: 0%;
  --dm-shift-y: 0%;
}

.page-debitoren-hero .dm-flow3d{ 
  place-items: center; 
}
*/

.page-debitoren-hero .dm-flow3d__particle{
  /* Anker in die absolute Mitte legen */
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) rotateX(var(--dm-tilt)) !important;

  /* gleiche Kreisgröße wie zuvor */
  width: var(--dm3d-size) !important;
  height: var(--dm3d-size) !important;

  /* unveränderter Bewegungsradius (Start oben, Zentrum in der Mitte) */
  offset-path: path("M 50% 17.4% A 32.6% 32.6% 0 1 1 49.99% 17.4% Z") !important;
  offset-anchor: 50% 50% !important;
}

/* === Debitoren-Hero: Zentrales Status-Label, ohne Hintergrund; Farbe = Partikelphase === */
/* Dauer an die vorhandene Farb-Animation der Partikel anpassen */
.page-debitoren-hero {
  position: relative; /* nur Referenz fürs Overlay; Partikel bleiben unverändert */
  --dm-color-cycle-duration: var(--dm-particle-hue-duration, 20s);
}

/* Overlay-Text exakt im Zentrum der Hero-Sektion */
.page-debitoren-hero::after {
  content: "Einspielung Belege";               /* Phase 1 (Grün) */
  position: absolute;
  inset: 0;                                    /* füllt die Section */
  display: grid;
  place-items: center;                          /* zentriert genau */
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;   
 font-family: "Playfair Display", serif;
  font-size: clamp(28px, 3.6vw, 44px);
  margin: 0 0 10px;                                /* über dem Ring/Partikeln, ohne sie zu beeinflussen */
 white-space: pre-line;   /* erlaubt \A als Zeilenumbruch */
  text-align: center;
  /* Farbe + Text wechseln phasengenau (diskret) */
  animation:
    dm-status-text  var(--dm-color-cycle-duration) steps(1, end) infinite,
    dm-status-color var(--dm-color-cycle-duration) steps(1, end) infinite;
}

/* Text je Phase */
@keyframes dm-status-text {
  0%, 20%        { content: "Kreditmanagement"; } 			/* Grün */
  20.0001%, 40%  { content: "Zahlungsverarbeitung"; } 					/* Blau */
  60.0001%, 80%  { content: "Segmentiertes\A  Mahnwesen "; }            /* Orange */
  80.0001%, 100% { content: "Inkasso"; }

 					/* Rot */
}

/* Farbe je Phase (keine Hintergründe) */
@keyframes dm-status-color {
  0%, 20%        { color: #ffffff; } /* weiß */
  20.0001%, 40%  { color: #ffffff; } /* Blau */
  40.0001%, 60%  { color: #ffffff; } /* Gelb */
  60.0001%, 80%  { color: #ffffff; } /* Orange */
  80.0001%, 100% { color: #ffffff; } /* Rot */

}

 /* PROCESS Debt-Mgm */
    .process-debtmgm{background:#113a37;color:#eaf6f3;padding:72px 0}
    .process-debtmgm .row{display:grid;grid-template-columns:1.1fr 1.2fr;gap:36px;align-items:center}
    .process-debtmgm h2{font-family:"Playfair Display",serif;font-size:clamp(28px,3.6vw,44px);margin:0 0 10px}
    .process-debtmgm .debtmgm-steps{position:relative;border-left:2px dashed rgba(255,255,255,.18);padding-left:28px}
    .debtmgm-step{margin:22px 0}.step strong{display:block;margin-bottom:6px;color:#fff}
    .debtmgm-badge{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);font-size:12px;margin-left:-43px;margin-right:10px}

/* === Process: debtmgm – Zahlen-Badges als kleine farbige Kugeln === */
.process-debtmgm .debtmgm-badge{
  /* Größe der Kugel kannst du hier zentral ändern */
  --badge-size: 14px;
  --badge-outline: 2px;           /* optionaler weißer Ring */
  --badge-color: currentColor;     /* wird pro Step überschrieben */

  display: inline-block;
  width: var(--badge-size);
  height: var(--badge-size);
  border-radius: 999px;
  background: var(--badge-color);
  box-shadow: 0 0 0 var(--badge-outline) #fff;  /* feiner Kontrast */
  vertical-align: middle;

  /* Zahlen unsichtbar machen, ohne Layout zu verschieben */
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  overflow: hidden;

  /* etwas Abstand zum Text rechts */
  margin-right: .6rem;
}

/* Farben passend zu den Partikel-Phasen: 
   1 Grün, 2 Blau, 3 Gelb, 4 Orange, 5 Rot */
.process-debtmgm .debtmgm-steps > .debtmgm-step:nth-of-type(1) .debtmgm-badge{ --badge-color: #00a651; } /* Grün */
.process-debtmgm .debtmgm-steps > .debtmgm-step:nth-of-type(2) .debtmgm-badge{ --badge-color: #0072ce; } /* Blau */
.process-debtmgm .debtmgm-steps > .debtmgm-step:nth-of-type(3) .debtmgm-badge{ --badge-color: #ffd200; } /* Gelb */
.process-debtmgm .debtmgm-steps > .debtmgm-step:nth-of-type(4) .debtmgm-badge{ --badge-color: #ff7f00; } /* Orange */
.process-debtmgm .debtmgm-steps > .debtmgm-step:nth-of-type(5) .debtmgm-badge{ --badge-color: #d0021b; } /* Rot */


/* About HERO */
    
	.page-about-hero{position:relative;min-height:86vh;color:#fff;display:flex;align-items:center;overflow:hidden;}
    .page-about-hero .bg{
      position:absolute;inset:0;
      /* Animated background + gradients */
      background:
        url('/assets/img/ueberuns-bg.png') center top / cover no-repeat,
        radial-gradient(1200px 520px at 60% -10%, rgba(255,255,255,.25), transparent 100%),
        radial-gradient(900px 420px at 100% 40%, rgba(30,163,122,.35), transparent 100%),
        linear-gradient(145deg,#1a4c46,#0f2f2c 60%);
      opacity:.9;
    }
	
   @media (max-width: 1024px){
  .page-about-hero .bg{
    /* Wert nach Bedarf anpassen (z. B. 80–160px) */
    --img-shift: 170px;
    background:
      url('/assets/img/ueberuns-bg.png') center var(--img-shift) / cover no-repeat,
      radial-gradient(1200px 520px at 60% -10%, rgba(255,255,255,.25), transparent 100%),
      radial-gradient(900px 420px at 100% 40%, rgba(30,163,122,.35), transparent 100%),
      linear-gradient(145deg,#1a4c46,#0f2f2c 60%);
  }
}
@media (max-width: 1200px){
  .page-about-hero .bg{ --img-shift: 180px; }
}
/* Optional: noch etwas mehr Versatz auf sehr kleinen Screens */
@media (max-width: 640px){
  .page-about-hero .bg{ --img-shift: 180px; }
}
    }
    .page-about-hero .overlay{position:absolute;inset:0;}
    .page-about-hero .content{position:relative;z-index:2}
    .page-about-hero .eyebrow{letter-spacing:.2em;text-transform:uppercase;font-size:12px;color:#c7efe0;font-weight:700}
    .page-about-hero .title{font-family:"Playfair Display",serif;font-weight:700;font-size: clamp(34px, 5vw, 64px); line-height:1.1; margin:.5rem 0 1rem;max-width:20ch}
    .page-about-hero .cta-row{display:flex;gap:16px;flex-wrap:wrap}







/* Kontaktformular */

.page-contact-hero{position:relative;min-height:86vh;color:#fff;display:flex;align-items:center;overflow:hidden;}
    .page-contact-hero .bg{
      position:absolute;inset:0;
      /* Animated background + gradients */
      background:
        url('/assets/img/ueberuns-bg.png') center top / cover no-repeat,
        radial-gradient(1200px 520px at 60% -10%, rgba(255,255,255,.25), transparent 100%),
        radial-gradient(900px 420px at 100% 40%, rgba(30,163,122,.35), transparent 100%),
        linear-gradient(145deg,#1a4c46,#0f2f2c 60%);
      opacity:.9;
    }
	
    @media (prefers-reduced-motion: reduce){
      .page-contact-hero .bg{
        background:
          url('/assets/img/ueberuns-bg.png') center top / cover no-repeat,
          radial-gradient(1200px 520px at 60% -10%, rgba(255,255,255,.25), transparent 60%),
          radial-gradient(900px 420px at 100% 40%, rgba(30,163,122,.35), transparent 60%),
          linear-gradient(145deg,#1a4c46,#0f2f2c 60%);
      }
    }
    .page-contact-hero .overlay{position:absolute;inset:0;}
    .page-contact-hero .content{position:relative;z-index:2}

@media (max-width: 768px){

  .page-contact-hero{
    min-height: 620px;
    align-items: flex-start;
    padding-top: 110px;
  }

  .page-contact-hero .content{
    position: relative;
    z-index: 2;
  }

  .page-contact-hero .bg{
    background:
      url('/assets/img/ueberuns-bg.png') center bottom / 100% auto no-repeat,
      radial-gradient(
        1200px 520px at 60% -10%,
        rgba(255,255,255,.25),
        transparent 100%
      ),
      radial-gradient(
        900px 420px at 100% 40%,
        rgba(30,163,122,.35),
        transparent 100%
      ),
      linear-gradient(
        145deg,
        #1a4c46,
        #0f2f2c 60%
      );
  }

}


.contact-section { padding: clamp(32px, 6vw, 72px) 0; }
.contact-section h2 { margin-bottom: 1rem; }

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px clamp(16px, 4vw, 24px);
  max-width: 860px;
}
.contact-form .form-row { display: flex; flex-direction: column; gap: 6px; }
.contact-form .form-row--full { grid-column: 1 / -1; }

.contact-form label { font-weight: 600; }
.contact-form input,
.contact-form textarea {
  appearance: none; outline: none; border: 1px solid #c9d6d2;
  background: #fff; color: #0f2f2c; border-radius: 8px;
  padding: 12px 14px; font: inherit;
}
.contact-form input:focus,
.contact-form textarea:focus { border-color: #16a085; box-shadow: 0 0 0 3px rgba(22,160,133,.15); }

.contact-form .form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.contact-form .btn.primary { background:#16a085; color:#fff; border-radius: 999px; padding:.8rem 1.25rem; border: none; }
.contact-form .btn.primary[disabled] { opacity:.6; cursor: not-allowed; }

#cf-status { min-height: 1.25rem; font-size: .95rem; color: #0f2f2c; }
#cf-status.error { color: #b00020; }
#cf-status.success { color: #0a7a5c; }

/* Honeypot verstecken */
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; opacity: 0; }

/* Mobile */
@media (max-width: 720px){
  .contact-form { grid-template-columns: 1fr; }
}