/* ===================================================================
   DIC – Digital Imaging Corporation GmbH
   Premium redesign · brand colors + scanline (X-ray) design language
   =================================================================== */

/* ---------- Self-hosted fonts (no third-party requests, revDSG) ---------- */
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/SpaceGrotesk-var.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/Inter-var.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:italic; font-weight:500; font-display:swap;
  src:url('../fonts/CormorantGaramond-500i.woff2') format('woff2');
}

:root{
  /* brand */
  --blue:        #3d82c9;   /* logo stripes, brightened */
  --blue-bright: #528acf;
  --blue-deep:   #2b5672;   /* petrol navy */
  --blue-mid:    #116089;
  --mint:        #6dd2b2;   /* decorative accent */
  --ca:          #5a9bd6;   /* DIC logo blue – links, hovers, focus states */
  --ink:         #16202c;
  --slate:       #5a6b7b;
  --line:        #e4ecf3;
  --bg:          #ffffff;
  --bg-soft:     #f4f8fc;
  --bg-deep:     #0f1b28;   /* dark sections / hero */

  --grad: linear-gradient(120deg, var(--blue-bright), var(--mint));
  --grad-deep: linear-gradient(135deg, var(--blue-deep) 0%, #0e2030 60%, #0a1722 100%);

  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 24px 60px -28px rgba(20,50,80,.35);
  --shadow-sm: 0 12px 30px -18px rgba(20,50,80,.4);
  --ease: cubic-bezier(.22,.61,.36,1);
  --container: 1200px;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:17px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

.container{ width:min(var(--container), 92vw); margin-inline:auto; }

h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.08; letter-spacing:-.02em; color:var(--ink); }
h2{ font-size:clamp(1.9rem, 3.6vw, 3rem); }
h3{ font-size:1.2rem; letter-spacing:-.01em; }

.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:300;
  background:var(--blue-deep); color:#fff; font-family:var(--font-display); font-weight:600;
  padding:.7rem 1.2rem; border-radius:0 0 12px 12px; transition:top .3s var(--ease);
}
.skip-link:focus{ top:0; }

.eyebrow{
  display:inline-block; font-family:var(--font-display);
  font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue-mid); margin-bottom:1rem;
  padding-left:2.4rem; position:relative;
}
.eyebrow::before{
  content:""; position:absolute; left:0; top:50%; width:1.8rem; height:2px;
  background:var(--grad); transform:translateY(-50%);
}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--blue-deep);
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  padding:.85rem 1.5rem; border-radius:100px; border:1px solid transparent;
  cursor:pointer; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s, color .3s;
  white-space:nowrap;
}
.btn--lg{ padding:1.05rem 1.9rem; font-size:1rem; }
.btn__arrow{ transition:transform .35s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(5px); }

.btn--primary{
  background:linear-gradient(120deg, var(--blue-deep), var(--blue-mid));
  color:#fff; box-shadow:0 16px 30px -14px rgba(17,96,137,.6);
}
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 22px 40px -14px rgba(17,96,137,.7); }
/* ---------- Header ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:1.1rem 0; transition:padding .4s var(--ease), background .4s, box-shadow .4s, backdrop-filter .4s;
}
.header.scrolled{
  padding:.55rem 0; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 1px 0 var(--line), 0 10px 30px -22px rgba(20,50,80,.5);
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; }
.header__logo img{ height:38px; width:auto; transition:height .4s var(--ease); }
.header.scrolled .header__logo img{ height:32px; }

/* hero is dark → logo stays as-is (logo has dark text on transparent, so wrap on dark) */
.header:not(.scrolled) .header__logo img{
  filter:brightness(0) invert(1);
}
.header:not(.scrolled) .nav__link{ color:rgba(255,255,255,.85); }
.header:not(.scrolled) .nav__link:hover{ color:#fff; }

.nav{ display:flex; align-items:center; gap:1.5rem; }
.nav__link{
  font-family:var(--font-display); font-weight:500; font-size:.95rem;
  color:var(--ink); position:relative; transition:color .3s;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px;
  background:var(--ca); transition:width .35s var(--ease);
}
.nav__link:hover{ color:var(--ca); }
.nav__link:hover::after,.nav__link.active::after{ width:100%; }
.nav__link.active{ color:var(--ca); }
.header:not(.scrolled) .nav__link.active{ color:#fff; }
body.nav-locked{ overflow:hidden; }
.nav__cta{ margin-left:.5rem; }
.header:not(.scrolled) .nav__cta{ color:#fff; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; z-index:110; }
.nav-toggle span{ width:26px; height:2px; background:var(--ink); border-radius:2px; transition:.35s var(--ease); }
.header:not(.scrolled) .nav-toggle span{ background:#fff; }

/* scroll progress */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--grad); z-index:200; transition:width .1s linear;
}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding:7rem 0 4rem; color:#fff; overflow:hidden; isolation:isolate;
  background:#0a1622;
}

/* media layers */
.hero__media{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.hero__xray{
  position:absolute; inset:0 0 0 0;
  background:url("../assets/hero-xray.webp") right center / cover no-repeat;
  transform:scale(1.06); transform-origin:70% 50%;
  animation:heroZoom 24s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroZoom{ from{ transform:scale(1.06) translateX(0); } to{ transform:scale(1.14) translateX(-1.5%); } }
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, #0a1622 0%, rgba(10,22,34,.96) 30%, rgba(10,22,34,.62) 55%, rgba(10,22,34,.12) 80%, rgba(10,22,34,.45) 100%),
    linear-gradient(0deg, #0a1622 0%, rgba(10,22,34,0) 26%, rgba(10,22,34,0) 70%, rgba(10,22,34,.7) 100%),
    linear-gradient(180deg, rgba(10,22,34,.5) 0%, transparent 18%);
}
.hero__grain{
  position:absolute; inset:0; opacity:.5; mix-blend-mode:soft-light;
  background-image:repeating-linear-gradient(0deg, rgba(150,195,235,.16) 0 1px, transparent 1px 6px);
}
.hero__scan{
  position:absolute; left:0; right:0; height:2px; top:0;
  background:linear-gradient(90deg, transparent, rgba(150,205,255,.9) 45%, rgba(109,210,178,.9) 55%, transparent);
  box-shadow:0 0 26px 7px rgba(120,190,255,.35);
  animation:heroScan 7s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes heroScan{ 0%{ top:8%; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ top:92%; opacity:0; } }

/* diagnostic HUD */
.hero__hud{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero__hud-corner{ position:absolute; width:46px; height:46px; border:1px solid rgba(150,195,235,.35); }
.hero__hud-corner--tr{ top:7rem; right:3.2rem; border-left:0; border-bottom:0; }
.hero__hud-corner--br{ bottom:3.2rem; right:3.2rem; border-left:0; border-top:0; }
.hero__hud-label{
  position:absolute; right:2.1rem; top:50%; transform:translateY(-50%);
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--font-display); font-size:.66rem; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(170,205,240,.5); white-space:nowrap;
}

/* content */
.hero__inner{ position:relative; z-index:2; }
.hero__content{ max-width:680px; }
.hero__content > *{ opacity:0; animation:heroIn .9s var(--ease) forwards; }
.hero__eyebrow{ animation-delay:.05s; }
.hero__title{ animation-delay:.16s; }
.hero__lead{ animation-delay:.28s; }
.hero__actions{ animation-delay:.40s; }
.hero__meta{ animation-delay:.52s; }
@keyframes heroIn{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:.7rem; margin-bottom:1.8rem;
  font-family:var(--font-display); font-size:.78rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(190,222,250,.85);
}
.hero__eyebrow-dot{ width:8px; height:8px; border-radius:50%; background:var(--mint);
  box-shadow:0 0 0 0 rgba(109,210,178,.5); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(109,210,178,.5);} 70%{ box-shadow:0 0 0 9px rgba(109,210,178,0);} 100%{ box-shadow:0 0 0 0 rgba(109,210,178,0);} }

.hero__title{
  font-size:clamp(2.5rem, 5.3vw, 4.2rem); font-weight:600; line-height:1.06;
  letter-spacing:-.035em; color:#fff; margin-bottom:1.4rem;
  text-shadow:0 2px 40px rgba(0,0,0,.45);
}
.hero__title em{
  font-family:'Cormorant Garamond', Georgia, serif; font-style:italic; font-weight:500;
  font-size:1.12em; letter-spacing:-.01em;
  background:linear-gradient(100deg,#bcd9f6,#6dd2b2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero__lead{
  font-size:1.13rem; line-height:1.65; color:rgba(214,230,244,.82); max-width:48ch; margin-bottom:2rem;
}
.hero__actions{ display:flex; align-items:center; gap:1.8rem; flex-wrap:wrap; margin-bottom:2.4rem; }
.hero__link{
  position:relative; display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-weight:500; font-size:1rem; color:#fff; padding:.4rem 0;
}
.hero__link span{ transition:transform .35s var(--ease); }
.hero__link::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:rgba(255,255,255,.4); transform-origin:left; transform:scaleX(.6); transition:transform .4s var(--ease), background .3s; }
.hero__link:hover::after{ transform:scaleX(1); background:var(--ca); }
.hero__link:hover span{ transform:translateX(5px); }

.hero__meta{ display:flex; gap:2.2rem; flex-wrap:wrap; }
.hero__meta li{ display:flex; flex-direction:column; gap:.15rem; position:relative; padding-left:2.2rem; }
.hero__meta li::before{ content:""; position:absolute; left:0; top:.1rem; bottom:.1rem; width:1px; background:linear-gradient(var(--mint),transparent); }
.hero__meta strong{ font-family:var(--font-display); font-weight:600; font-size:1.5rem; color:#fff; line-height:1; letter-spacing:-.01em; }
.hero__meta span{ font-size:.82rem; color:rgba(190,210,230,.6); }

.hero__scroll{
  position:absolute; left:50%; bottom:1.8rem; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-family:var(--font-display); font-size:.66rem; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(190,210,230,.55);
}
.hero__scroll-line{ width:1px; height:46px; background:linear-gradient(rgba(190,210,230,.1), rgba(190,210,230,.6)); position:relative; overflow:hidden; }
.hero__scroll-line::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--mint); animation:scrollDot 2s var(--ease) infinite; }
@keyframes scrollDot{ 0%{ top:-50%; } 100%{ top:100%; } }

/* ---------- Stats ---------- */
.stats{ background:var(--bg-deep); color:#fff; padding:3rem 0; position:relative; }
.stats::before{
  content:""; position:absolute; inset:0; opacity:.4;
  background-image:repeating-linear-gradient(0deg, rgba(120,170,220,.07) 0 1px, transparent 1px 8px);
}
/* Drei Kennzahlen nebeneinander; die Siegel brauchen je rund 290px und passen
   damit nicht in eine Zahlenspalte – sie bekommen eine eigene Zeile darunter. */
.stats__grid{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; text-align:center; }
.stat strong{ display:block; font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3.2rem); font-weight:700;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat span{ color:rgba(226,238,248,.7); font-size:.95rem; }

/* ---------- Sections ---------- */
section[id]{ scroll-margin-top:72px; }
.section{ padding:6.5rem 0; position:relative; }
.section__head{ max-width:640px; margin-bottom:3.5rem; }
.section__lead{ color:var(--slate); font-size:1.1rem; }
.about,.process,.team{ background:var(--bg-soft); }

/* About */
.about__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:4rem; align-items:center; }
.scan-frame{
  position:relative; border-radius:var(--radius); overflow:hidden; padding:2px;
  background:linear-gradient(135deg, var(--blue-bright), var(--mint));
  box-shadow:var(--shadow);
}
.scan-frame__line{
  position:absolute; left:0; right:0; top:0; height:50%; z-index:3; pointer-events:none;
  background:linear-gradient(180deg, rgba(109,210,178,.0), rgba(109,210,178,.22));
  border-bottom:2px solid rgba(109,210,178,.7);
  animation:scanFrame 4.5s var(--ease) infinite;
}
@keyframes scanFrame{ 0%{ transform:translateY(-100%);} 100%{ transform:translateY(200%);} }
.about__photo{
  position:relative; border-radius:calc(var(--radius) - 2px); overflow:hidden;
  aspect-ratio:5/5.4; background:#0c1c2c;
}
.about__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.about__cap{
  position:absolute; left:1rem; bottom:1rem; display:flex; align-items:center; gap:.7rem;
  padding:.7rem 1.05rem; border-radius:12px; color:#fff;
  background:rgba(10,22,34,.55); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.14);
}
.about__cap-dot{ width:9px; height:9px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 0 rgba(109,210,178,.5); animation:pulse 2.4s infinite; flex:none; }
.about__cap b{ display:block; font-family:var(--font-display); font-size:.95rem; line-height:1.2; }
.about__cap span span,.about__cap > span:last-child{ font-size:.8rem; color:rgba(214,230,244,.7); }
.ticks{ margin:1.6rem 0 2rem; display:grid; gap:.7rem; }
.ticks li{ position:relative; padding-left:2rem; color:var(--ink); }
.ticks li::before{
  content:""; position:absolute; left:0; top:.45em; width:16px; height:16px; border-radius:50%;
  background:var(--grad);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Services */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem;
  position:relative; overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.card::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .4s;
  background:repeating-linear-gradient(0deg, rgba(82,138,207,.05) 0 1px, transparent 1px 6px);
}
.card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); border-color:transparent; }
.card:hover::before{ opacity:1; }
.card__icon{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin-bottom:1.2rem;
  color:#15314a; background:linear-gradient(135deg, rgba(43,86,114,.16), rgba(17,96,137,.14));
  transition:transform .4s var(--ease);
}
.card:hover .card__icon{ transform:scale(1.08) rotate(-4deg); }
.card__icon svg{ width:26px; height:26px; }
.card h3{ margin-bottom:.5rem; position:relative; }
.card p{ font-size:.95rem; color:var(--slate); position:relative; }

/* Products */
.prodcat{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; margin-bottom:4.5rem; }
.prodcat__card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.prodcat__card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); border-color:transparent; }
.prodcat__media{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#0c1c2c; }
.prodcat__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.prodcat__card:hover .prodcat__media img{ transform:scale(1.07); }
.prodcat__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,22,34,.05) 0%, rgba(10,22,34,.55) 100%); }
.prodcat__scan{
  position:absolute; left:0; right:0; top:0; height:2px; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(150,205,255,.9), rgba(109,210,178,.9), transparent);
  box-shadow:0 0 18px 5px rgba(120,190,255,.3); opacity:0; transform:translateY(0);
}
.prodcat__card:hover .prodcat__scan{ animation:prodScan 1.6s var(--ease); }
@keyframes prodScan{ 0%{ top:0; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ top:100%; opacity:0; } }
.prodcat__no{
  position:absolute; right:1rem; top:.85rem; z-index:2; font-family:var(--font-display); font-weight:700;
  font-size:.85rem; letter-spacing:.1em; color:rgba(255,255,255,.85);
  width:34px; height:34px; display:grid; place-items:center; border-radius:50%;
  background:rgba(10,22,34,.4); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(4px);
}
.prodcat__body{ padding:1.7rem 1.7rem 1.9rem; flex:1; display:flex; flex-direction:column; }
.prodcat__tag{
  align-self:flex-start; font-family:var(--font-display); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue-mid); background:rgba(82,138,207,.1); padding:.32rem .75rem; border-radius:100px; margin-bottom:.85rem;
}
.prodcat__body h3{ font-size:1.3rem; margin-bottom:.55rem; }
.prodcat__body > p{ color:var(--slate); font-size:.96rem; margin-bottom:1.2rem; }
.prodcat__list{ display:grid; gap:.5rem; margin-top:auto; }
.prodcat__list li{ position:relative; padding-left:1.7rem; font-size:.92rem; color:var(--ink); }
.prodcat__list li::before{
  content:""; position:absolute; left:0; top:.35em; width:14px; height:14px; border-radius:50%;
  background:var(--grad);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* partner brands sub-block */
.brands{ border-top:1px solid var(--line); padding-top:3rem; }
.brands__head{ text-align:center; margin-bottom:2.2rem; }
.brands__kicker{ display:inline-block; font-family:var(--font-display); font-size:.74rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--blue-mid); margin-bottom:.5rem; }
.brands__head p{ color:var(--slate); font-size:1rem; }
.products__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.product{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:2rem 1.6rem; text-align:center; transition:transform .4s var(--ease), box-shadow .4s;
}
.product:hover{ transform:translateY(-6px); box-shadow:var(--shadow-sm); }
/* Feste Box statt fester Hoehe: bei freier Breite wirken Wortmarken sonst um ein
   Vielfaches groesser als kompakte Logos. Das Seitenverhaeltnis der Box (150/46)
   liegt im geometrischen Mittel der vorkommenden Logo-Verhaeltnisse (1.7 bis 6.1),
   dadurch beanspruchen alle etwa gleich viel Flaeche. */
.product img{ width:150px; height:46px; max-width:100%; margin:0 auto 1.1rem; object-fit:contain; opacity:1; transition:transform .4s var(--ease); }
/* Feinabgleich je Logo: gleiche Flaeche statt gleicher Hoehe. Ohne das wirken
   Logos, deren Verhaeltnis zufaellig zur Box passt, deutlich groesser als der Rest.
   Masse aus dem Seitenverhaeltnis der zugeschnittenen Datei gerechnet. */
.product img[src*="ref-xline"]{ width:84px; height:50px; }
.product img[src*="ref-fona"]{ width:89px; height:47px; }
.product img[src*="ref-duerr"]{ width:102px; height:41px; }
.product img[src*="ref-zawin"]{ width:125px; height:34px; }
.product img[src*="ref-ergodent"]{ width:92px; height:46px; }
.product img[src*="ref-sovique"]{ width:160px; height:26px; }
.product:hover img{ transform:scale(1.05); }
.product__tag{
  display:inline-block; font-family:var(--font-display); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue-mid); background:rgba(82,138,207,.1); padding:.3rem .7rem; border-radius:100px; margin-bottom:.6rem;
}
.product p{ font-size:.9rem; color:var(--slate); }

/* Product catalog (coming soon) */
.catalog{ background:var(--bg-deep); color:#fff; position:relative; overflow:hidden; --ca:#5a9bd6; }
.catalog::before{
  content:""; position:absolute; inset:0; opacity:.4; pointer-events:none;
  background-image:repeating-linear-gradient(0deg, rgba(120,170,220,.06) 0 1px, transparent 1px 8px);
}
.section__head--center{ text-align:center; max-width:680px; margin-left:auto; margin-right:auto; }
.section__head--center .eyebrow{ padding-left:0; }
.section__head--center .eyebrow::before{ display:none; }
.catalog .eyebrow{ color:var(--ca); }
.catalog h2{ color:#fff; }
.catalog .section__lead{ color:rgba(214,230,244,.8); }
.catalog .section__lead strong{ color:#fff; }
.catalog__cta{ position:relative; display:flex; flex-direction:column; align-items:center; gap:1.1rem; text-align:center; }
.catalog__cta p{ color:rgba(214,230,244,.78); }

/* feature list (dark showcase) */
.pcard__list{ display:grid; gap:.55rem; }
.pcard__list li{ position:relative; padding-left:1.7rem; font-size:.95rem; color:rgba(226,238,248,.86); }
.pcard__list li::before{
  content:""; position:absolute; left:0; top:.34em; width:15px; height:15px; border-radius:50%; background:var(--grad);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cflow__brand{ display:inline-block; font-family:var(--font-display); font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ca,#5a9bd6); margin-bottom:.5rem; }

/* product photo showcase — clean white studio card */
.viewer3d{ display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; margin-bottom:4.8rem; }
.viewer3d__stage{
  position:relative; min-height:480px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(168deg, #ffffff 0%, #f2f6fa 100%);
  border-radius:var(--radius); border:1px solid rgba(255,255,255,.55);
  box-shadow:0 44px 90px -40px rgba(0,0,0,.75), inset 0 1px 0 #fff;
  overflow:hidden;
}
.viewer3d__stage::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(70% 55% at 50% 18%, rgba(255,255,255,.9), transparent 70%); }
.viewer3d__stage::after{ content:""; position:absolute; left:50%; bottom:7%; transform:translateX(-50%); z-index:0;
  width:52%; height:26px; background:radial-gradient(ellipse, rgba(20,40,70,.18), transparent 72%); filter:blur(8px); pointer-events:none; }
.pshot{
  position:relative; z-index:1; width:auto; height:auto; max-width:74%; max-height:420px; object-fit:contain;
  opacity:0; transition:opacity .24s var(--ease);
  filter:drop-shadow(0 24px 26px rgba(20,40,70,.16));
  animation:pfloat 6s ease-in-out infinite; will-change:transform;
}
.pshot.is-on{ opacity:1; }
@keyframes pfloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.viewer3d__badge{
  position:absolute; top:1.1rem; left:1.1rem; z-index:2; font-family:var(--font-display); font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue-mid);
  border:1px solid rgba(17,96,137,.28); background:rgba(17,96,137,.07); padding:.32rem .75rem; border-radius:100px;
}
.viewer3d__info .cflow__brand{ margin-bottom:.5rem; }
.viewer3d__info h3{ color:#fff; font-size:1.7rem; margin-bottom:.6rem; }
.viewer3d__info > p{ color:rgba(214,230,244,.78); margin-bottom:1.3rem; }
.viewer3d__info .pcard__list{ margin-bottom:1.7rem; }
.vsel{ display:flex; flex-wrap:wrap; gap:.6rem; }
.vsel__btn{
  font-family:var(--font-display); font-weight:500; font-size:.9rem; color:rgba(226,238,248,.8);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:100px;
  padding:.6rem 1.15rem; cursor:pointer; transition:transform .3s var(--ease), background .3s, border-color .3s, color .3s;
}
.vsel__btn:hover{ border-color:rgba(109,210,178,.5); color:#fff; transform:translateY(-2px); }
.vsel__btn.is-active{ background:linear-gradient(120deg,var(--blue-mid),var(--blue-deep)); border-color:transparent; color:#fff; box-shadow:0 12px 24px -12px rgba(17,96,137,.7); }

/* Process timeline */
.timeline{ position:relative; display:grid; gap:2.2rem; }
.timeline::before{ content:""; position:absolute; left:31px; top:10px; bottom:10px; width:2px; background:var(--line); }
.timeline__progress{ position:absolute; left:31px; top:10px; width:2px; height:0; background:var(--grad); transition:height .2s linear; }
.step{ position:relative; display:flex; gap:1.6rem; align-items:flex-start; padding:.4rem 0; }
.step__num{
  flex:0 0 64px; width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--blue-deep);
  background:#fff; border:2px solid var(--line); position:relative; z-index:2; transition:.4s var(--ease);
}
.step.in-view .step__num{ border-color:transparent; color:#fff; background:linear-gradient(135deg,var(--blue-mid),var(--blue-deep)); box-shadow:0 12px 24px -10px rgba(17,96,137,.6); }
.step__body{ padding-top:.4rem; }
.step__body h3{ margin-bottom:.2rem; }
.step__body p{ color:var(--slate); font-size:.97rem; }

/* References marquee */
.references{ padding-bottom:7rem; }
.references .section__head{ margin-bottom:2.5rem; }
.marquee{ overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
/* spacing via margin (not gap) so the -50% loop seam is perfectly even */
.marquee__track{ display:flex; align-items:center; width:max-content; animation:marquee 34s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
/* wie bei .product img: feste Box, damit alle Referenzlogos gleich viel Raum einnehmen */
.marquee img{ width:165px; height:42px; object-fit:contain; margin-right:4rem; opacity:1; transition:transform .4s var(--ease); }
/* Feinabgleich je Logo, gleiches Prinzip wie bei .product img */
.marquee img[src*="ref-bestsmile"]{ width:179px; height:30px; }
.marquee img[src*="ref-jsdental"]{ width:118px; height:46px; }
.marquee img[src*="ref-gleisd"]{ width:169px; height:32px; }
.marquee img[src*="ref-adent"]{ width:144px; height:38px; }
.marquee img[src*="ref-centredent"]{ width:174px; height:31px; }
.marquee img[src*="ref-aegerismile"]{ width:154px; height:35px; }
.marquee img:hover{ transform:scale(1.06); }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* Team */
.team__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem; }
.member{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; text-align:center; transition:transform .4s var(--ease), box-shadow .4s; }
.member:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
.member__avatar{
  width:min(190px,100%); aspect-ratio:1; border-radius:50%; margin:0 auto 1.5rem; position:relative; overflow:hidden;
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:2.6rem; color:#fff;
  background:linear-gradient(135deg, var(--blue-deep), var(--blue-mid));
  box-shadow:0 18px 38px -16px rgba(17,96,137,.5); border:4px solid #fff;
  outline:1px solid var(--line);
}
.member__avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 22%; transition:transform .5s var(--ease), filter .5s; filter:saturate(.92); }
.member:hover .member__avatar img{ transform:scale(1.06); filter:saturate(1.05); }
.member__scan{ position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(109,210,178,.35),transparent); height:50%; transform:translateY(-120%); }
.member:hover .member__scan{ animation:scanFrame 1.4s var(--ease); }
.member h3{ margin-bottom:.1rem; }
.member__role{ display:inline-block; font-family:var(--font-display); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-mid); margin-bottom:.7rem; }
.member p{ color:var(--slate); font-size:.95rem; }

/* Contact */
.contact{ background:var(--bg-deep); color:#fff; --ca:#5a9bd6; }
.contact .eyebrow{ color:var(--ca); }
.contact .eyebrow::before{ background:var(--ca); }
.contact h2{ color:#fff; }
.contact__grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:4rem; align-items:start; }
.contact__info > p{ color:rgba(226,238,248,.7); margin-bottom:2rem; }
.contact__list{ display:grid; gap:1.4rem; }
.contact__list li{ display:flex; gap:1rem; align-items:flex-start; }
.contact__ic{ flex:0 0 52px; width:52px; height:52px; display:grid; place-items:center;
  border-radius:14px; color:var(--ca);
  background:linear-gradient(135deg, rgba(82,138,207,.22), rgba(61,130,201,.12));
  border:1px solid rgba(82,138,207,.3); }
.contact__ic svg{ width:26px; height:26px; }
.contact__list b{ display:block; font-family:var(--font-display); font-size:.95rem; color:#fff; margin-bottom:.1rem; }
.contact__list span span,.contact__list li > span:last-child{ color:rgba(226,238,248,.72); font-size:.95rem; }
.contact__list a{ color:var(--ca); }

.contact__form{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); padding:2.2rem;
  display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.field{ position:relative; }
.field--full{ grid-column:1 / -1; }
.field input,.field textarea{
  width:100%; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16); border-radius:12px;
  padding:1.05rem 1rem .55rem; color:#fff; font-family:var(--font-body); font-size:.97rem; resize:vertical;
  transition:border-color .3s, background .3s;
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--ca); background:rgba(255,255,255,.07); }
.field label{
  position:absolute; left:1rem; top:.95rem; color:rgba(226,238,248,.55); font-size:.97rem;
  pointer-events:none; transition:.25s var(--ease);
}
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{
  top:.32rem; font-size:.7rem; letter-spacing:.04em; color:var(--ca);
}
.form-note{ grid-column:1/-1; color:var(--ca); font-weight:500; }
.form-req{ font-size:.8rem; color:rgba(214,230,244,.55); }
.hp-field{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }

/* consent checkbox */
.consent{ display:flex; gap:.8rem; align-items:flex-start; }
.consent input{
  flex:none; width:19px; height:19px; margin-top:.2rem; accent-color:var(--ca); cursor:pointer;
}
.consent label{ font-size:.85rem; line-height:1.55; color:rgba(214,230,244,.75); cursor:pointer; }
.consent a{ color:var(--ca); text-decoration:underline; text-underline-offset:2px; }

/* route link */
.contact__route{ display:inline-block; margin-top:.3rem; font-size:.88rem; font-weight:500; }

/* official seals (BAG / BAKOM) */
.seals{ display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; }
/* Rand im selben Verlauf wie die Kennzahlen (--grad). Der Verlauf liegt auf einem
   Pseudo-Element, damit die Maske nur den Rahmen trifft und nicht das Logo darin.
   Fallback fuer Browser ohne mask-composite: Volltonfarbe aus dem Verlauf. */
.seal{ position:relative; display:inline-flex; background:transparent; border:1px solid var(--blue-bright); border-radius:9px; padding:.45rem .65rem; }
@supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  .seal{ border-color:transparent; }
  .seal::before{
    content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
    background:var(--grad); pointer-events:none;
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite:exclude;
  }
}
.seal img{ display:block; height:42px; width:auto; }

.stat--seals{ grid-column:1 / -1; margin-top:1.4rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.09); }
.stat .seals{ justify-content:center; margin:0 0 .7rem; gap:1rem; }
.stat .seal{ box-sizing:border-box; flex:0 1 290px; max-width:290px; padding:.5rem .7rem; justify-content:center; }
.stat .seal img{ height:auto; width:100%; }

.footer .seals{ margin-top:1.4rem; gap:.7rem; }
.footer .seal{ padding:.5rem .7rem; border-radius:8px; }
.footer .seal img{ height:54px; }

/* sticky mobile CTA */
.mobile-cta{
  position:fixed; right:1rem; bottom:1rem; z-index:90;
  display:none; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-weight:600; font-size:.95rem; color:#fff;
  background:linear-gradient(120deg, var(--blue-mid), var(--blue-deep));
  padding:.9rem 1.5rem; border-radius:100px;
  box-shadow:0 16px 34px -12px rgba(17,96,137,.75);
  transform:translateY(0); opacity:1; transition:transform .35s var(--ease), opacity .35s;
}
.mobile-cta.is-hidden{ transform:translateY(140%); opacity:0; pointer-events:none; }

/* legal pages */
.subpage{ background:var(--bg-soft); }
.legal{ padding:9rem 0 5rem; min-height:70vh; }
.legal__inner{ max-width:760px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:3rem clamp(1.4rem,4vw,3rem); box-shadow:var(--shadow-sm); }
.legal h1{ font-size:clamp(1.9rem,4vw,2.6rem); margin-bottom:1.6rem; }
.legal h2{ font-size:1.15rem; margin:2rem 0 .6rem; }
.legal p{ color:var(--slate); margin-bottom:.8rem; }
.legal a{ color:var(--blue-mid); text-decoration:underline; text-underline-offset:2px; }
.legal__intro{ font-size:1.05rem; }
.legal__stand{ margin-top:2rem; font-size:.9rem; color:var(--slate); }
.footer--slim{ padding:1.5rem 0; }
.footer--slim .footer__bottom{ padding-top:0; }
.footer--slim a:hover{ color:var(--ca); }

/* Footer */
.footer{ background:#0a141e; color:rgba(226,238,248,.7); padding:4rem 0 1.5rem; }
.footer__inner{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.08); }
.footer__brand > img{ height:34px; width:auto; filter:brightness(0) invert(1); margin-bottom:1rem; }
.footer__brand p{ max-width:34ch; font-size:.95rem; }
/* haelt "Ihr X-Ray Integrator in der Zahnmedizin." zusammen: als inline-block
   rutscht der Satz komplett in die naechste Zeile, statt dass "Ihr" oben haengt */
.footer__brand p span{ display:inline-block; }
.footer__nav{ display:flex; flex-direction:column; gap:.7rem; }
.footer__nav a,.footer__contact a{ transition:color .3s; }
.footer__nav a:hover,.footer__contact a:hover{ color:var(--ca); }
.footer__contact p{ margin-bottom:.5rem; font-size:.95rem; }
.footer__bottom{ display:flex; justify-content:space-between; padding-top:1.5rem; font-size:.85rem; color:rgba(226,238,248,.45); }

/* ---------- Reveal animations ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease), transform .8s var(--ease); will-change:opacity,transform; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__content > *{ opacity:1 !important; animation:none !important; }
  .hero__xray,.hero__scan,.hero__scroll-line::after,.scan-frame__line,.marquee__track,.pshot{ animation:none !important; }
}

/* ---------- Responsive ---------- */
/* collapse to hamburger before the wide logo + nav collide */
@media (max-width:1100px){
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(340px,82vw); flex-direction:column; align-items:flex-start;
    justify-content:center; gap:1.4rem; padding:2.5rem; background:#0e1c2a;
    transform:translateX(100%); transition:transform .45s var(--ease); box-shadow:-30px 0 60px -30px rgba(0,0,0,.6);
  }
  .nav.open{ transform:none; }
  .nav__link{ color:#fff !important; font-size:1.15rem; }
  .nav__link::after{ display:none; }
  .nav__cta{ margin-left:0; }
  .header:not(.scrolled) .nav__cta{ color:#fff; }
  .nav-toggle{ display:flex; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .header.scrolled .nav-toggle span,.nav-toggle.open span{ background:#fff; }
}

@media (max-width:980px){
  .hero__veil{ background:
    linear-gradient(90deg, #0a1622 0%, rgba(10,22,34,.9) 38%, rgba(10,22,34,.55) 70%, rgba(10,22,34,.35) 100%),
    linear-gradient(0deg, #0a1622 0%, rgba(10,22,34,0) 30%, rgba(10,22,34,0) 66%, rgba(10,22,34,.7) 100%); }
  .hero__hud-corner--tr{ right:1.4rem; } .hero__hud-corner--br{ right:1.4rem; } .hero__hud-label{ right:1.2rem; }
  .about__grid,.contact__grid{ grid-template-columns:1fr; gap:2.5rem; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  /* bleibt dreispaltig: bei zwei Spalten stuende die dritte Kennzahl allein */
  .stats__grid{ gap:1.2rem; }
  .products__grid,.team__grid{ grid-template-columns:repeat(2,1fr); }
  .viewer3d{ grid-template-columns:1fr; gap:1.5rem; }
}
@media (max-width:680px){
  body{ font-size:16px; }
  .cards,.products__grid,.team__grid,.stats__grid,.prodcat{ grid-template-columns:1fr; }
  .viewer3d__stage{ min-height:340px; } .pshot{ max-height:300px; max-width:82%; }
  .viewer3d__info h3{ font-size:1.4rem; }
  .contact__form{ grid-template-columns:1fr; }
  .mobile-cta{ display:inline-flex; }
  .footer__inner{ grid-template-columns:1fr; gap:2rem; }
  .footer__bottom{ flex-direction:column; gap:.5rem; }
  .section{ padding:4.5rem 0; }
  .hero{ padding:7rem 0 5rem; }
  .hero__meta{ gap:1.4rem; }
  .hero__meta strong{ font-size:1.25rem; }
  .hero__hud-label{ display:none; }
  .hero__scroll{ display:none; }
}

/* Unterseiten (Impressum, Datenschutz, 404) tragen nur einen Zurueck-Link und
   haben keinen Menue-Umschalter. Ohne diese Ausnahme schiebt die Off-Canvas-
   Leiste den Link ab 1100px aus dem Bild – er waere dann nicht mehr erreichbar. */
@media (max-width:1100px){
  .subpage .nav{
    position:static; width:auto; flex-direction:row; align-items:center;
    padding:0; gap:1rem; background:none; transform:none; box-shadow:none;
  }
  .subpage .nav__link{ color:var(--ink) !important; font-size:.92rem; }
}