/* =============================================
   Infinitia Digital — DirektFlow Landingpage
   Eigenständige Seite, bewusst getrennt von ogency.css
   (siehe direktflow_css.md in der Memory für die
   Begründung). Farb-/Font-Variablen kommen aus
   id-tokens.css. id-shared.css wird NICHT geladen —
   die zwei Regelgruppen, die DirektFlow bis 27.07.2026
   von dort bezog (Footer-CTA-Buttons, Footer-Text-
   Farbe), stehen jetzt unten und behalten exakt die
   bis dahin live gerenderten Werte.
   ============================================= */
*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:#101010;color:#fff;font-family:var(--font-sans);font-size:15px;line-height:1.45;font-weight:400;}
.df-page-wrapper{overflow-x:hidden;}
a{text-decoration:none;}
.id-link{transition:color .18s ease;}
.id-link:hover{color:#F5900D !important;}
.id-btn{transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;}
.id-btn-primary:hover{background:#C8740A !important;box-shadow:0 10px 30px rgba(245,144,13,.28);}
.id-btn-ghost:hover{border-color:rgba(255,255,255,.4) !important;color:#fff !important;}
.id-card{transition:border-color .2s ease,transform .2s ease;}
.id-card:hover{border-color:rgba(245,144,13,.45) !important;transform:translateY(-3px);}
/* Branchen + Vorteile + Probleme: Umbrüche + Silbentrennung */
#branchen .id-card p,
#vorteile .id-card p,
#probleme .id-card p{
  font-weight:400;
  line-height:1.875;
}
/* Branchen + Vorteile: keine Silbentrennung (Chrome bricht sonst z.B. ein-fach / Pro-zente) */
#branchen .id-card p,
#vorteile .id-card p{
  text-wrap:wrap;
  hyphens:none;
  -webkit-hyphens:none;
}
#probleme .id-card p{
  text-wrap:pretty;
  hyphens:auto;
  -webkit-hyphens:auto;
}
#branchen .id-card,
#vorteile .id-card{
  padding:28px 24px 28px 28px;
}
/* Kartenhöhe folgt dem Inhalt (kein Stretch → kein Leerraum in Safari) */
#branchen .df-card-grid .id-card,
#vorteile .df-card-grid .id-card{
  height:auto;
  display:block;
}
br.df-br-desktop{display:none;}
br.df-br-mobile{display:none;}
@media(min-width:768px){
  br.df-br-desktop{display:unset;}
  .df-final-cta__hl-line2{white-space:nowrap;}
}
@media(max-width:767px){
  br.df-br-mobile{display:unset;}
  .df-eyebrow-sep{display:none;}
}
.df-page-wrapper h1,
.df-page-wrapper h2{font-weight:700;line-height:1.2;}
.df-page-wrapper h2{font-size:52px;}
.df-page-wrapper h3{font-weight:700;line-height:1.3;}
.df-page-wrapper h4{font-weight:700;line-height:1.3;font-size:24px;}
.df-page-wrapper #probleme .id-card h4,
.df-page-wrapper #vorteile .id-card h4{
  font-size:20px;
  white-space:nowrap;
}
.df-page-wrapper .fs-heading{
  font-weight:700;
  line-height:1.3;
  font-size:clamp(28px, 3.4vw, 40px);
}
.df-hero-eyebrow{font-size:12px;}
.df-cta-line{font-size:18px !important;font-weight:400;line-height:1.45;}
.df-page-wrapper .id-btn-primary{font-size:17px !important;}
@media(max-width:767px){
  .df-page-wrapper .id-btn-primary{font-size:16px !important;}
}
.id-textlink:hover{color:#fff !important;}
/* Nav ohne Aufzaehlungspunkte (27.07.2026 entfernt, war ein 5px-Dot via ::after) */
.df-nav-link{position:relative;color:rgba(255,255,255,.92);transition:color .18s ease;}
.df-nav-link:hover,
.df-nav-link.is-active{color:#F5900D;}
/* Custom cursor — transform + kein System-Cursor (Fine-Pointer) */
@media (hover: hover) and (pointer: fine) {
  body.custom-cursor,
  body.custom-cursor * { cursor: none !important; }
}
@media (hover: none), (pointer: coarse) {
  .custom-cursor__cursor,
  .custom-cursor__cursor-two { display: none !important; }
}
.custom-cursor__cursor{
  width:25px;height:25px;border-radius:100%;border:1px solid #f5900d;
  position:fixed;left:0;top:0;pointer-events:none;z-index:999991;
  transform:translate3d(-50%,-50%,0);will-change:transform;
  transition:background-color .2s ease-out,opacity .2s ease-out,border-color .2s ease-out;
}
.custom-cursor__cursor-two{
  width:10px;height:10px;border-radius:100%;background-color:#f5900d;opacity:.3;
  position:fixed;left:0;top:0;pointer-events:none;z-index:999991;
  transform:translate3d(-50%,-50%,0);will-change:transform;
  transition:width .3s,height .3s,opacity .3s;
}
.custom-cursor__hover{background-color:#f5900d;opacity:.4;}
.custom-cursor__innerhover{width:25px;height:25px;opacity:.4;}
/* Bootstrap grid (footer only) */
.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;max-width:1140px;}
.row{display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px;}
[class*="col-"]{position:relative;width:100%;padding-right:15px;padding-left:15px;box-sizing:border-box;}
@media(min-width:768px){.col-md-3{flex:0 0 25%;max-width:25%;}.col-md-6{flex:0 0 50%;max-width:50%;}}
@media(min-width:992px){.col-lg-2{flex:0 0 16.666667%;max-width:16.666667%;}.col-lg-3{flex:0 0 25%;max-width:25%;}.col-lg-5{flex:0 0 41.666667%;max-width:41.666667%;}.col-lg-8{flex:0 0 66.666667%;max-width:66.666667%;}}
/* Footer styles */
.main-footer{background-color:var(--ogency-black2);position:relative;padding:60px 0 105px;background-size:cover;background-position:center;background-repeat:no-repeat;}
@media(max-width:767px){.main-footer{padding-bottom:60px;}}
.main-footer__top{position:relative;display:flex;align-items:center;justify-content:space-between;padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:88px;}
@media(max-width:767px){.main-footer__top{margin-bottom:50px;}}
.main-footer__about{position:relative;}
.main-footer__about p{font-size:24px;font-weight:400;letter-spacing:-.96px;line-height:40px;margin-bottom:9px;}
@media(max-width:767px){.main-footer__about p{font-size:22px;}}
.main-footer__navmenu{position:relative;}
@media(max-width:767px){.main-footer__navmenu{margin-top:30px;}}
.main-footer__navmenu ul{margin:0;padding:0;}
.main-footer__navmenu ul li{list-style:none;display:block;font-size:16px;line-height:36px;font-weight:400;color:#5d5d5d;}
.main-footer__navmenu ul li a{color:inherit;display:inline-block;}
.main-footer__navmenu ul li a:hover{color:#F5900D;}
.main-footer__copyright{font-size:16px;color:#5d5d5d;margin-top:48px;}
.main-footer__copyright a{color:inherit;}
.main-footer__copyright a:hover{color:#F5900D;}
/* Footer-Widget-Text + CTA-Buttons — bis 27.07.2026 aus id-shared.css bezogen, Werte 1:1 übernommen */
.footer-widget__text{color:#5d5d5d;}
.footer-cta-buttons{display:flex;flex-direction:column;gap:10px;margin-top:20px;width:fit-content;}
.footer-cta-btn{display:flex;align-items:center;gap:16px;padding:13px 20px;border-radius:12px;background:transparent;text-decoration:none;transition:border-color .2s ease,background .2s ease;white-space:nowrap;min-width:260px;}
.footer-cta-btn--wa{border:1px solid rgba(37,211,102,.15);}
.footer-cta-btn--mail{border:1px solid rgba(245,144,13,.15);}
.footer-cta-btn--wa:hover{border-color:rgba(37,211,102,.45);background:rgba(37,211,102,.06);}
.footer-cta-btn--mail:hover{border-color:rgba(245,144,13,.45);background:rgba(245,144,13,.06);}
@media(max-width:767px){
  .footer-cta-buttons{width:100%;}
  .footer-cta-btn{min-width:0;width:100%;}
}
/* Typografie: Card-Fließtext nicht mehr über LH-1.75 auf 500 heben */
/* (entfernt: p[style*="line-height:1.75"]{font-weight:500;}) */
/* Header nav: right-aligned, compact, no overlap with CTA */
header > div{padding:0 24px !important;}
/* Nav mittig zwischen Logo und CTA. Ab 981px bekommt der rechte Block kein
   margin-left:auto mehr, damit die beiden auto-Margins der Nav sie zentrieren.
   Darunter ist die Nav ausgeblendet und das inline margin-left:auto des rechten
   Blocks schiebt CTA + Burger wieder an den Rand. */
header nav{padding-left:0 !important;margin-left:auto;margin-right:auto;}
@media(min-width:981px){header nav + div{margin-left:0 !important;}}
@media(max-width:1199px){header > div{padding:0 16px !important;}}
@media(max-width:980px){
  header > div{padding:10px 16px !important;}
  header nav{display:none;}
  #df-burger{display:flex !important;}
  .df-header-cta{display:none !important;}
}
/* Mobil: Logo kleiner, sonst schiebt Logo(200) + CTA(145) den Burger aus dem Bild.
   max-width statt width, damit der JS-gesteuerte 38px-Wechsel unberuehrt bleibt. */
@media(max-width:767px){
  #df-logo{max-width:130px;}
}
/* Mobile side drawer — analog Home (300px), nicht volle Header-Breite */
.df-mobile-nav{
  position:fixed;inset:0;z-index:1000;
  pointer-events:none;visibility:hidden;
}
.df-mobile-nav.is-open{
  pointer-events:auto;visibility:visible;
}
.df-mobile-nav__overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.55);
  opacity:0;transition:opacity .35s ease;
}
.df-mobile-nav.is-open .df-mobile-nav__overlay{opacity:1;}
.df-mobile-nav__panel{
  position:absolute;top:0;left:0;bottom:0;
  width:300px;max-width:86vw;
  background:#101010;
  padding:30px 18px;
  overflow-y:auto;
  transform:translateX(-100%);
  transition:transform .35s ease;
  display:flex;flex-direction:column;
  border-right:1px solid rgba(255,255,255,.08);
}
.df-mobile-nav.is-open .df-mobile-nav__panel{transform:translateX(0);}
.df-mobile-nav__close{
  position:absolute;top:18px;right:14px;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid rgba(255,255,255,.18);
  border-radius:9px;cursor:pointer;padding:0;
}
.df-mobile-nav__logo{margin:8px 0 36px;padding-right:40px;}
.df-mobile-nav__logo img{width:150px;height:auto;display:block;}
.df-mobile-nav__links{display:flex;flex-direction:column;gap:0;margin-bottom:28px;}
.df-mobile-nav__links a{
  font-size:15px;font-weight:600;color:rgba(255,255,255,.88);
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);
  text-decoration:none;
}
.df-mobile-nav__links a.is-active,
.df-mobile-nav__links a:hover{color:#F5900D;}
.df-mobile-nav__ctas{display:flex;flex-direction:column;gap:10px;margin-top:auto;}
.df-mobile-nav__cta{
  display:flex;align-items:center;gap:12px;
  padding:12px 18px;border-radius:12px;text-decoration:none;
  transition:border-color .2s ease,background .2s ease;
}
.df-mobile-nav__cta i{font-size:18px;flex-shrink:0;}
.df-mobile-nav__cta span{font-size:15px;font-weight:700;color:#fff;}
.df-mobile-nav__cta--wa{
  border:1.5px solid rgba(37,211,102,.45);
  background:rgba(37,211,102,.07);
}
.df-mobile-nav__cta--wa i{color:#25D366;}
.df-mobile-nav__cta--mail{
  border:1px solid rgba(245,144,13,.3);
  background:rgba(245,144,13,.06);
}
.df-mobile-nav__cta--mail i{color:#F5900D;}
.df-mobile-nav__cta--mail span{font-weight:600;color:rgba(255,255,255,.75);}
/* Card grids responsive */
@media(max-width:991px){
  div[style*="grid-template-columns:repeat(3,minmax(0,1fr))"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  div[style*="grid-template-columns:repeat(4,minmax(0,1fr))"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:600px){
  div[style*="grid-template-columns:repeat(3,minmax(0,1fr))"]{grid-template-columns:minmax(0,1fr) !important;}
  div[style*="grid-template-columns:repeat(4,minmax(0,1fr))"]{grid-template-columns:minmax(0,1fr) !important;}
}
/* Mobil-Typo: intentional <br> behalten (2 Zeilen), Schrift so,
   dass jede Zeile auf 375px (iPhone 11 Pro) nicht weiter umbricht */
@media(max-width:767px){
  .df-page-wrapper > section{
    padding-left:20px !important;
    padding-right:20px !important;
  }
  .df-page-wrapper > section#top{padding-top:52px !important;padding-bottom:46px !important;}
  .df-page-wrapper > section#probleme{padding-bottom:48px !important;}
  .df-page-wrapper > section#branchen{padding-top:48px !important;padding-bottom:48px !important;}
  .df-page-wrapper > section#funktionen{padding-top:40px !important;}
  .df-page-wrapper > section#vorteile{padding-top:48px !important;padding-bottom:48px !important;}
  .df-page-wrapper > section:last-of-type{padding-top:52px !important;padding-bottom:52px !important;}
  .df-page-wrapper h1{
    font-size:clamp(30px, 9vw, 34px) !important;
    line-height:1.2 !important;
    font-weight:700 !important;
    letter-spacing:-0.03em !important;
  }
  .df-page-wrapper h2{
    font-size:clamp(24px, 7.2vw, 28px) !important;
    line-height:1.2 !important;
    font-weight:700 !important;
    letter-spacing:-0.025em !important;
  }
  .df-page-wrapper > section:last-of-type h2{
    font-size:22px !important;
  }
  .df-page-wrapper h4,
  .df-page-wrapper .id-card h4{
    font-size:18px !important;
    font-weight:700 !important;
    line-height:1.3 !important;
    letter-spacing:-0.015em !important;
    white-space:normal !important;
  }
  .df-page-wrapper .fs-heading{
    font-size:clamp(22px, 5.8vw, 26px) !important;
    font-weight:700 !important;
    line-height:1.3 !important;
  }
  .df-hero-eyebrow{
    font-size:10px !important;
    letter-spacing:.08em !important;
    padding:8px 12px !important;
    max-width:100%;
    white-space:normal;
    justify-content:center;
    text-align:center;
    line-height:1.4 !important;
    display:inline-flex !important;
    flex-wrap:wrap;
  }
  .df-cta-line{
    font-size:15px !important;
    font-weight:400 !important;
    line-height:1.45 !important;
  }
  .df-page-wrapper .id-card{
    padding:24px !important;
  }
  .df-page-wrapper #branchen .id-card,
  .df-page-wrapper #vorteile .id-card{
    padding:24px 12px 24px 24px !important;
  }
  /* Hero lead */
  .df-page-wrapper #top p[style*="font-size:18px"]{
    font-size:16px !important;
    font-weight:400 !important;
    line-height:1.45 !important;
  }
  /* Section intros + branchen footer + other 16px leads */
  .df-page-wrapper > section > div > p[style*="font-size:16px"],
  .df-page-wrapper #branchen > div > p[style*="font-size:16px"]{
    font-size:15px !important;
    font-weight:400 !important;
    line-height:1.45 !important;
  }
  /* Card body */
  .df-page-wrapper .id-card p{
    font-size:14px !important;
    font-weight:400 !important;
    line-height:1.875 !important;
  }
  /* Punchline h4 outside cards */
  .df-page-wrapper #probleme > div > h4{
    font-size:18px !important;
    font-weight:700 !important;
    line-height:1.3 !important;
  }
}