/* =========================================================
   INTAT Homepage — production styles (static)
   Hybrid: premium navy dark-bands + light content.
   Tokens: blue #003896 (primary), cyan #00b4d8 (accent),
   orange #b03800 (CTA, sparing). Space Grotesk + Inter.
   ========================================================= */

:root{
  /* Blue (primary, fixed) */
  --blue-900:#002257; --blue-800:#002d75; --blue-700:#003896; --blue-600:#1a4ca6;
  --blue-500:#3464ba; --blue-300:#8fa9d8; --blue-100:#dde6f4; --blue-50:#eef3fb;
  /* Cyan (tech accent) */
  --cyan-700:#0083a0; --cyan-600:#009cc0; --cyan-500:#00b4d8; --cyan-300:#7ad8ec;
  --cyan-100:#d3f0f8; --cyan-50:#ebf9fc;
  /* Orange (CTA pop) */
  --orange-700:#8a2c00; --orange-600:#b03800; --orange-500:#cc4a0d; --orange-50:#fcf0e9;
  /* Cool anthracite neutrals */
  --ink-900:#0d1b2e; --ink-800:#16273d; --ink-700:#29384c; --ink-600:#45566c;
  --ink-500:#647386; --ink-400:#8a97a8; --ink-300:#b7c1cd; --ink-200:#d8dfe8;
  --ink-100:#eaeef3; --ink-50:#f4f6fa; --white:#fff;
  /* Premium navy (dark bands) */
  --navy-deep:#010a20; --navy:#021637; --navy-soft:#04204d; --navy-glow:#0a356f;

  /* Semantic */
  --brand-primary:var(--blue-700); --brand-accent:var(--cyan-500); --brand-cta:var(--orange-600);
  --text-strong:var(--ink-900); --text-heading:var(--blue-900); --text-body:var(--ink-700);
  --text-muted:var(--ink-500); --text-faint:var(--ink-400);
  --surface-page:var(--white); --surface-tint:var(--ink-50);
  --border-subtle:var(--ink-100); --border-default:var(--ink-200); --border-brand:var(--blue-300);

  /* Type */
  --font-display:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --text-2xs:.75rem; --text-xs:.8125rem; --text-sm:.9375rem; --text-base:1rem;
  --text-md:1.125rem; --text-lg:1.375rem; --text-xl:1.75rem; --text-2xl:2.25rem; --text-3xl:3rem;
  --leading-snug:1.25; --leading-relaxed:1.7;
  --tracking-tight:-.02em; --tracking-snug:-.01em; --tracking-caps:.12em;

  /* Space / radius / shadow / layout */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:2.5rem; --space-8:3rem; --space-9:4rem; --space-10:5rem;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;
  --shadow-sm:0 2px 8px rgba(13,27,46,.06); --shadow-md:0 8px 24px rgba(13,27,46,.08);
  --shadow-lg:0 18px 48px rgba(13,27,46,.12); --shadow-cta:0 10px 26px rgba(176,56,0,.28);
  --container-max:1200px; --container-pad:24px; --nav-height:76px;
  --section-y:clamp(64px,9vw,120px);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--nav-height)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-relaxed);
  color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-heading);font-weight:700;
  line-height:var(--leading-snug);letter-spacing:var(--tracking-snug);margin:0 0 .5em;text-wrap:balance}
h2{font-size:var(--text-2xl)} h3{font-size:var(--text-lg);font-weight:600}
p{margin:0 0 1em;text-wrap:pretty}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--cyan-100);color:var(--ink-900)}
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,180,216,.5);border-radius:6px}
.ico{display:inline-block;vertical-align:middle;flex:none}
.mono{font-family:var(--font-mono)}

.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad);width:100%}
.section{padding:var(--section-y) 0}
.section--tint{background:var(--surface-tint)}
.lead{font-size:var(--text-md);color:var(--text-muted);line-height:var(--leading-relaxed)}
.muted{color:var(--text-muted)}
.on-dark{color:#fff}
.on-dark-muted{color:rgba(255,255,255,.78)}

/* ---- Section header ---- */
.section-head{max-width:680px;margin-bottom:var(--space-9)}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.6rem);margin:0 0 var(--space-4)}
.section-head--center{margin-inline:auto;text-align:center}
.brand-kicker{display:inline-block;font-family:var(--font-display);font-size:var(--text-2xs);
  font-weight:600;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--cyan-300);margin-bottom:var(--space-4)}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);line-height:1;
  padding:12px 20px;border-radius:var(--radius-md);border:1.5px solid transparent;
  cursor:pointer;transition:transform .2s var(--ease-out),background .2s var(--ease-out),
  box-shadow .2s var(--ease-out),border-color .2s var(--ease-out);white-space:nowrap}
.btn--lg{padding:15px 28px;font-size:var(--text-base)}
.btn--sm{padding:9px 16px}
.btn--cta{background:var(--brand-cta);color:#fff;box-shadow:var(--shadow-cta)}
.btn--cta:hover{background:var(--orange-700);transform:translateY(-2px)}
.btn--primary{background:var(--brand-primary);color:#fff}
.btn--primary:hover{background:var(--blue-600);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--text-strong);border-color:var(--border-default)}
.btn--ghost:hover{border-color:var(--brand-primary);color:var(--brand-primary)}
.dark-band .btn--ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.dark-band .btn--ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}

/* ---- Pill / badge / chip ---- */
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--radius-pill);
  background:rgba(0,180,216,.12);border:1px solid rgba(0,180,216,.35);color:var(--cyan-300);
  font-size:var(--text-2xs);font-weight:600;letter-spacing:var(--tracking-caps);text-transform:uppercase}
.pill__dot{width:7px;height:7px;border-radius:50%;background:var(--cyan-500);box-shadow:0 0 10px var(--cyan-500)}
.badge{display:inline-block;padding:5px 12px;border-radius:var(--radius-pill);font-size:var(--text-xs);
  font-weight:600;letter-spacing:.02em}
.badge--cta{background:var(--orange-50);color:var(--orange-700);border:1px solid #f3d9c9}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--radius-pill);
  background:var(--white);border:1px solid var(--border-default);font-size:var(--text-sm);
  font-weight:500;color:var(--text-body)}
.chip .ico{color:var(--brand-accent)}

/* ---- Dark band + constellation ---- */
.dark-band{position:relative;overflow:hidden;isolation:isolate;color:#fff;
  background:radial-gradient(120% 90% at 75% 8%,var(--navy-glow) 0%,var(--navy-soft) 30%,var(--navy) 60%,var(--navy-deep) 100%)}
.dark-band::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(140% 120% at 50% 50%,transparent 55%,rgba(1,6,18,.55) 100%)}
.constellation{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
.band-inner{position:relative;z-index:1}

/* ---- Navigation ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--nav-height);
  border-bottom:1px solid transparent;transition:background .35s var(--ease-out),border-color .35s var(--ease-out)}
.nav.scrolled{background:linear-gradient(rgba(247,250,253,.66),rgba(247,250,253,.66)),url('../assets/img/leistungen-bg.jpg') center 60%/cover no-repeat;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom-color:var(--border-subtle)}
.nav__inner{max-width:var(--container-max);margin:0 auto;height:100%;padding:0 var(--container-pad);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.nav__logo{display:flex;align-items:center}
.nav__logo img{height:28px}
.nav__logo-dark{display:none}
.nav.scrolled .nav__logo-light{display:none}
.nav.scrolled .nav__logo-dark{display:block}
.nav__links{display:flex;align-items:center;gap:var(--space-1)}
.nav__links a{padding:9px 14px;font-size:var(--text-sm);font-weight:500;border-radius:var(--radius-sm);
  color:rgba(255,255,255,.88);transition:color .2s,background .2s}
.nav__links a:hover{background:rgba(255,255,255,.12);color:#fff}
.nav.scrolled .nav__links a{color:var(--text-body)}
.nav.scrolled .nav__links a:hover{background:var(--ink-100);color:var(--brand-primary)}
.nav__actions{display:flex;align-items:center;gap:var(--space-3)}
.nav__toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;border:none;
  background:transparent;color:#fff;cursor:pointer}
.nav.scrolled .nav__toggle{color:var(--text-strong)}
.nav__drawer{background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-subtle);padding:var(--space-4) var(--container-pad) var(--space-5);
  display:grid;gap:4px}
.nav__drawer a{padding:12px 8px;font-size:var(--text-md);font-weight:600;color:var(--text-strong);border-radius:var(--radius-sm)}
.nav__drawer .btn{margin-top:8px}
.nav__drawer[hidden]{display:none}

/* ---- Hero ---- */
.hero{min-height:94vh;display:flex;align-items:center}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-9);align-items:center;
  padding-top:calc(var(--nav-height) + clamp(40px,7vw,88px));padding-bottom:clamp(56px,8vw,104px)}
.hero__title{font-family:var(--font-display);color:#fff;font-size:clamp(2.5rem,5vw,4.25rem);
  line-height:1.05;letter-spacing:var(--tracking-tight);font-weight:700;margin:var(--space-6) 0 var(--space-5)}
.hero__accent{color:var(--cyan-300)}
.hero__lead{font-size:var(--text-md);color:rgba(255,255,255,.78);max-width:540px;margin:0 0 var(--space-7)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-bottom:var(--space-8)}
.hero__trust{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6)}
.hero__trust li{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);color:rgba(255,255,255,.85);font-weight:500}
.hero__trust .ico{color:var(--cyan-300)}
.hero__visual{position:relative;min-height:360px;display:flex;flex-direction:column;justify-content:center;gap:var(--space-4)}
.hero__glow{position:absolute;inset:0;border-radius:var(--radius-xl);
  background:radial-gradient(120% 120% at 30% 20%,rgba(0,180,216,.14),rgba(0,56,150,.05) 60%,transparent);
  border:1px solid rgba(255,255,255,.08)}
.glass{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius-lg)}
.hero__card-main{position:relative;padding:var(--space-5);display:flex;align-items:center;gap:var(--space-4)}
.hero__card-icon{width:48px;height:48px;flex:none;border-radius:var(--radius-md);background:rgba(0,180,216,.18);
  border:1px solid rgba(0,180,216,.4);color:var(--cyan-300);display:flex;align-items:center;justify-content:center}
.hero__card-title{font-family:var(--font-display);font-weight:600;color:#fff;font-size:var(--text-md)}
.hero__card-sub{font-size:var(--text-sm);color:rgba(255,255,255,.7)}
.hero__card-row{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.hero__chip{padding:var(--space-4);display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.9);
  font-size:var(--text-sm);font-weight:500;border-radius:var(--radius-md)}
.hero__chip .ico{color:var(--cyan-300)}

/* ---- Cards (services / network) ---- */
.cards{display:grid;gap:var(--space-5);margin-top:var(--space-9)}
.cards--services{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.cards--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--white);border:1px solid var(--border-default);border-radius:var(--radius-lg);
  padding:var(--space-6);transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .25s var(--ease-out);
  display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-brand)}
.card__icon{width:52px;height:52px;border-radius:var(--radius-md);background:var(--cyan-50);color:var(--cyan-600);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-5)}
.card p{font-size:var(--text-sm);color:var(--text-muted);margin:0 0 var(--space-5)}
.card__feats{display:grid;gap:10px}
.card__feats li{display:flex;align-items:center;gap:10px;font-size:var(--text-sm);color:var(--text-body)}
.card__feats .ico{color:var(--brand-accent)}
.card--link{cursor:pointer}
.card--link:hover{border-color:var(--brand-accent)}
.card__more{display:inline-flex;align-items:center;gap:6px;margin-top:var(--space-5);color:var(--brand-primary);
  font-weight:600;font-size:var(--text-sm)}

/* Network cards on dark */
.net-card{padding:var(--space-6)}
.net-card__icon{width:52px;height:52px;border-radius:var(--radius-md);background:rgba(0,180,216,.16);
  border:1px solid rgba(0,180,216,.4);color:var(--cyan-300);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-5)}
.net-card h3{color:#fff}
.net-card p{color:rgba(255,255,255,.72);font-size:var(--text-sm);margin:0}
.net-pill-wrap{display:flex;justify-content:center;margin-top:var(--space-8)}
.net-pill{display:inline-flex;align-items:center;gap:10px;padding:10px 20px;border-radius:var(--radius-pill);
  background:rgba(0,180,216,.1);border:1px solid rgba(0,180,216,.3);color:var(--cyan-300);
  font-family:var(--font-display);font-weight:600;font-size:var(--text-sm)}

/* ---- Split (about / zeiterfassung) ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-9);align-items:center}
.about__photo{position:relative}
.about__frame{aspect-ratio:3/2;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-lg);background:linear-gradient(150deg,var(--blue-50),var(--cyan-50))}
.about__frame img{width:100%;height:100%;object-fit:cover;object-position:60% 32%}
.about__badge{position:absolute;left:var(--space-5);bottom:var(--space-5);background:var(--white);
  border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:12px 18px}
.about__badge-name{font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);color:var(--text-heading)}
.about__badge-role{font-size:var(--text-xs);color:var(--text-muted)}
.about__text h2{font-size:clamp(1.7rem,3vw,2.3rem);margin:0 0 var(--space-5)}
.about__text p{max-width:560px}
.about__text .chips{margin-top:var(--space-6)}

/* ---- Zeiterfassung feats + mockup ---- */
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);margin:var(--space-7) 0}
.feat{display:flex;gap:var(--space-3)}
.feat__ico{color:var(--brand-accent);display:flex;margin-top:2px}
.feat b{display:block;color:var(--text-strong);font-size:var(--text-sm)}
.feat span{font-size:var(--text-xs);color:var(--text-muted)}
.badge--cta+h2{margin-top:var(--space-4)}
.mockup{background:var(--white);border-radius:var(--radius-xl);border:1px solid var(--border-default);box-shadow:var(--shadow-lg);overflow:hidden}
.mockup__bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--border-subtle);background:var(--ink-50)}
.mockup__bar .dot{width:10px;height:10px;border-radius:50%;background:var(--ink-300)}
.mockup__url{margin-left:10px;font-size:var(--text-xs);color:var(--text-faint);font-family:var(--font-mono)}
.mockup__body{padding:var(--space-6)}
.mockup__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-5)}
.mockup__day{font-family:var(--font-display);font-weight:600;color:var(--text-heading)}
.mockup__total{display:flex;align-items:center;gap:8px;color:var(--brand-primary)}
.mockup__total b{font-family:var(--font-display);font-size:var(--text-xl);font-variant-numeric:tabular-nums}
.mockup__row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;margin-bottom:8px;
  border-radius:var(--radius-md);background:var(--ink-50);border:1px solid transparent}
.mockup__row span:first-child{display:flex;align-items:center;gap:10px;font-size:var(--text-sm);color:var(--text-body)}
.mockup__row .d{width:8px;height:8px;border-radius:50%;background:var(--ink-300)}
.mockup__row .t{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-muted);font-weight:600}
.mockup__row.is-active{background:var(--cyan-50);border-color:var(--cyan-300)}
.mockup__row.is-active .d{background:var(--brand-accent)}
.mockup__row.is-active .t{color:var(--cyan-700)}
.mockup__sum{display:flex;justify-content:space-between;padding-top:var(--space-4);margin-top:var(--space-2);
  border-top:1px solid var(--border-subtle);font-size:var(--text-sm);color:var(--text-muted)}
.mockup__sum b{font-family:var(--font-mono);color:var(--text-strong)}

/* ---- Contact / QR ---- */
.qr-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);max-width:860px;margin:var(--space-10) auto 0}
.qr-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--space-6);
  transition:transform .25s var(--ease-out),border-color .25s var(--ease-out),background .25s var(--ease-out)}
.qr-card:hover{transform:translateY(-4px);border-color:rgba(0,180,216,.5);background:rgba(255,255,255,.09)}
.qr-card__code{display:inline-flex;padding:var(--space-3);background:#fff;border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);margin-bottom:var(--space-4)}
.qr-card__code svg{width:148px;height:148px;display:block}
.qr-card__label{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:600;
  color:#fff;font-size:var(--text-md);margin-bottom:6px}
.qr-card__label .ico{color:var(--cyan-300)}
.qr-card__val{font-size:var(--text-sm);color:rgba(255,255,255,.7)}
.contact__details{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);justify-content:center;
  align-items:center;margin-top:var(--space-9)}
.contact__details span{display:inline-flex;align-items:center;gap:10px;color:rgba(255,255,255,.82);font-size:var(--text-sm)}
.contact__details .ico{color:var(--cyan-300)}
.contact__cta{display:flex;justify-content:center;margin-top:var(--space-7)}

/* ---- Footer ---- */
.footer{background:var(--navy-deep);color:rgba(255,255,255,.7);border-top:1px solid rgba(255,255,255,.08)}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:var(--space-8);
  padding:var(--space-10) var(--container-pad) var(--space-7)}
.footer__brand img{height:40px;margin-bottom:var(--space-5)}
.footer__brand p{font-size:var(--text-sm);max-width:300px;margin:0;color:rgba(255,255,255,.6)}
.footer__col h4{font-family:var(--font-display);font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cyan-300);margin:0 0 var(--space-5)}
.footer__col ul{display:grid;gap:var(--space-3)}
.footer__col a{color:rgba(255,255,255,.66);font-size:var(--text-sm);transition:color .2s}
.footer__col a:hover{color:#fff}
.footer__contact li{display:flex;align-items:flex-start;gap:10px;font-size:var(--text-sm);color:rgba(255,255,255,.66)}
.footer__contact .ico{color:var(--cyan-300);margin-top:2px}
.footer__bar{border-top:1px solid rgba(255,255,255,.1)}
.footer__bar-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);
  padding:var(--space-5) var(--container-pad);font-size:var(--text-xs);color:rgba(255,255,255,.5)}
.footer__legal{display:flex;gap:var(--space-5)}
.footer__legal a{color:rgba(255,255,255,.5)}
.footer__legal a:hover{color:#fff}

/* ---- Scroll reveal (enhances already-visible default) ---- */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
}

/* ---- Responsive ---- */
@media (max-width:920px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .nav__toggle{display:inline-flex}
  .hero__grid,.split{grid-template-columns:1fr}
  .hero{min-height:auto}
  .hero__visual{min-height:280px;margin-top:var(--space-6)}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  :root{--container-pad:18px}
  .feat-grid{grid-template-columns:1fr}
  .qr-row{grid-template-columns:1fr;max-width:320px}
  .footer__grid{grid-template-columns:1fr}
  .footer__bar-inner{flex-direction:column;align-items:flex-start}
  .section-head h2{font-size:1.7rem}
}

/* ============ Best-of-both: Fotografie aus dem Dark-Entwurf ============ */
/* Service-Karten mit Foto-Header */
.cards--services .card{padding:0;overflow:hidden;background:#eef3fa;border-color:#dce5f1}
.card__img--ph{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,var(--blue-700) 0%,var(--cyan-600) 100%)}
#leistungen{background:#f5f8fd url('../assets/img/leistungen-bg.jpg') center/cover no-repeat}
#zeiterfassung{background:#f5f8fd url('../assets/img/leistungen-bg.jpg') center/cover no-repeat}

/* Zeiterfassung-Slider */
.zf-slider-wrap{position:relative}
.zf-slider{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);border:1px solid var(--border-default);scrollbar-width:none;-ms-overflow-style:none}
.zf-slider::-webkit-scrollbar{display:none}
.zf-slide{position:relative;flex:0 0 100%;scroll-snap-align:center;aspect-ratio:16/10;
  background:var(--navy-deep);display:flex;align-items:center;justify-content:center}
.zf-slide img{width:100%;height:100%;object-fit:contain;display:block}
.zf-slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;
  background:linear-gradient(transparent,rgba(1,10,32,.88));color:#fff;
  font-family:var(--font-display);font-weight:600;font-size:var(--text-sm)}
.zf-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
  border:none;background:rgba(255,255,255,.92);color:var(--brand-primary);box-shadow:var(--shadow-md);
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;transition:background .2s var(--ease-out)}
.zf-arrow:hover{background:#fff}
.zf-arrow--prev{left:12px}
.zf-arrow--prev .ico{transform:rotate(180deg)}
.zf-arrow--next{right:12px}
.zf-dots{display:flex;gap:8px;justify-content:center;margin-top:var(--space-4)}
.zf-dot{width:9px;height:9px;padding:0;border-radius:50%;background:var(--ink-300);border:none;cursor:pointer;
  transition:background .25s var(--ease-out),width .25s var(--ease-out)}
.zf-dot.is-active{background:var(--brand-accent);width:24px;border-radius:5px}
.card__img{aspect-ratio:16/10;overflow:hidden;background:var(--ink-100)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease-out)}
.card:hover .card__img img{transform:scale(1.05)}
.card__body{padding:var(--space-5) var(--space-6) var(--space-6);display:flex;flex-direction:column;flex:1}
.card__body h3{margin-top:var(--space-1)}

/* Über-INTAT: kontaktiertes Portrait + MS-Partner-Badge */
.about__portrait{position:relative;max-width:470px}
.about__me{width:100%;height:auto;display:block;border-radius:var(--radius-xl);
  border:1px solid var(--border-subtle);box-shadow:var(--shadow-lg)}
.about__partner{position:absolute;top:14px;right:14px;width:76px;height:auto;background:#fff;
  border-radius:var(--radius-sm);padding:6px;box-shadow:var(--shadow-md)}
.about__portrait .about__badge{position:absolute;left:3px;bottom:3px;
  background:var(--white);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:7px 13px}

/* Foto-Atmosphäre hinter den Dark-Bands (unter Konstellation) */
.hero::before,.net-photo::before{content:"";position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;opacity:.22}
.hero::before{background-image:url('../assets/img/hero-bg.jpg')}
.net-photo::before{background-image:url('../assets/img/network-bg.jpg');opacity:.18}

/* ---- Cookie-Hinweis ---- */
.cookie{position:fixed;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);z-index:300;
  max-width:700px;margin:0 auto;display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;
  justify-content:space-between;background:var(--white);border:1px solid var(--border-default);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-4) var(--space-5)}
.cookie p{margin:0;font-size:var(--text-sm);color:var(--text-body);flex:1 1 320px;line-height:var(--leading-normal)}
.cookie a{color:var(--brand-primary);font-weight:600}
.cookie[hidden]{display:none}

/* ---- Rechtsseiten (Impressum / Datenschutz) ---- */
.legal-head{border-bottom:1px solid var(--border-subtle);background:var(--white)}
.legal-head__inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.legal-back{font-size:var(--text-sm);font-weight:600;color:var(--brand-primary)}
.legal{padding:var(--space-9) 0 var(--space-10);background:var(--surface-page)}
.legal__inner{max-width:820px}
.legal h1{font-size:clamp(1.9rem,4vw,2.6rem);margin-bottom:var(--space-7)}
.legal h4{font-size:var(--text-lg);color:var(--text-heading);margin:var(--space-7) 0 var(--space-3)}
.legal h5{font-family:var(--font-display);font-size:var(--text-base);font-weight:600;color:var(--text-strong);margin:var(--space-6) 0 var(--space-2)}
.legal p{color:var(--text-body);font-size:var(--text-sm);line-height:var(--leading-relaxed);margin:0 0 var(--space-4)}
.legal a{color:var(--brand-primary);font-weight:500;word-break:break-word}
.legal ul{margin:0 0 var(--space-4) var(--space-6);list-style:disc}
.legal li{font-size:var(--text-sm);color:var(--text-body);margin-bottom:4px}
.legal .break{height:var(--space-2)}