:root{
  --orange:#ea580c; --orange-700:#c2410c;
  --apricot:#fff4ea; --apricot-2:#fff0e2;
  --ink:#0f172a; --quiet:#475569; --quiet-2:#334155;
  --border:#ffe3c9; --border-soft:rgba(253,146,64,.10);
  --card:#ffffff;
  --i-green:#059669; --i-orange:#ea580c; --i-blue:#2563eb; --i-rest:#475569;
  --shadow1:0 12px 28px rgba(0,0,0,.06);
  --shadow2:0 26px 60px rgba(234,88,12,.22);
  --shadow-apricot: 0 16px 28px rgba(234,88,12,.14);
  --container:1160px; --r-xxl:28px; --r-xl:22px; --r-lg:16px;
  --focus:0 0 0 3px rgba(234,88,12,.28);
  --section-pad: clamp(52px, 8vw, 88px);
  --divider: linear-gradient(90deg, rgba(234,88,12,0) 0%, rgba(234,88,12,.10) 22%, rgba(234,88,12,.10) 78%, rgba(234,88,12,0) 100%);
}
*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:'Nunito Sans',system-ui,Segoe UI,Roboto,Arial;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 50% -200px, #fff9f3 0%, rgba(255,249,243,0) 70%),
    linear-gradient(180deg, #fff9f3 0%, #f5f9ff 100%);
  line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--orange-700); text-decoration:none}
a:focus-visible{outline:none; box-shadow:var(--focus); border-radius:12px}
.container{max-width:var(--container); margin:0 auto; padding:0 clamp(18px,4vw,28px)}

/* Typo tweaks */
h1,h2{ text-wrap: balance}
.lead{ font-size: clamp(18px, 2.8vw, 22px); line-height: 1.5; font-weight:800; color:var(--quiet-2)}

/* ===== ICONS ===== */
.icon-badge{
  --size:64px;
  width:var(--size); height:var(--size);
  border-radius:20px;
  display:grid; place-items:center; margin:0 auto 16px; position:relative;
  background:#fff;
  border:1px solid var(--border);
  box-shadow: var(--shadow-apricot);
}
.icon-badge::after{
  content:""; position:absolute; inset:0; border-radius:20px;
  background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 60%);
  pointer-events:none;
}
.icon-badge svg{width:42px; height:42px; display:block}
.stroke{stroke-linecap:round; stroke-linejoin:round; fill:none; stroke-width:2.4; vector-effect: non-scaling-stroke;}
.stroke.green{stroke:var(--i-green)}
.stroke.orange{stroke:var(--i-orange)}
.stroke.blue{stroke:var(--i-blue)}
.stroke.rest{stroke:var(--i-rest)}

/* Small mono icon before H2 */
.h2-icon{width:18px; height:18px; margin-right:10px; vertical-align:-3px}

/* ===== Skiplink ===== */
.skiplink{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skiplink:focus{left:16px; top:16px; width:auto; height:auto; padding:10px 14px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow1)}

/* ===== HERO ===== */
header.hero{ text-align:center; padding: clamp(44px, 7vw, 92px) 0 28px; position:relative;}
.hero h1{font-family:'Nunito'; color:var(--orange); font-weight:900; font-size:clamp(36px,6.2vw,50px); margin:0 0 12px; letter-spacing:0.1px}
.hero .lead{font-weight:800; color:var(--quiet-2); max-width:900px; margin:0 auto 16px; line-height:1.45}

/* Bigger centered team image + stage */
.family{display:flex; justify-content:center; margin: clamp(48px, 7vw, 96px) 0; perspective:1000px; position:relative;}
.family img{
  width: min(92%, 1060px);
  max-width: 1060px;
  height:auto; display:block;
  border-radius:18px; object-fit:cover;
  filter: drop-shadow(0 12px 18px rgba(2,6,23,.10));
  transform: translateY(16px) scale(.982);
  opacity:0;
  will-change: transform, filter, opacity;
  transition: transform .8s cubic-bezier(.2,.6,.2,1), filter .8s ease, opacity .8s ease;
}
.family.in-view img{ transform: translateY(0) scale(1); filter: drop-shadow(0 24px 44px rgba(234,88,12,.18)); opacity:1; }
.family::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-24px;
  width:min(100%,1100px); height:140px;
  background: radial-gradient(60% 60% at 50% 30%, rgba(234,88,12,.10), rgba(234,88,12,0) 65%);
  filter: blur(4px); pointer-events:none; z-index:-1;
}

/* Pills (equal width) */
.pillbar{display:flex; justify-content:center; margin-top: 16px; padding-inline: clamp(18px,4vw,28px);}
.pills{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:18px; width:min(900px,100%); margin-inline:auto}
.pill{
  background:#fff; border:1px solid var(--border); border-radius:22px; padding:18px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; min-height:140px; width:100%;
  box-shadow:0 8px 18px rgba(0,0,0,.05), 0 1px 4px rgba(0,0,0,.04);
  transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.pill:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(234,88,12,.14), 0 6px 14px rgba(0,0,0,.06), inset 0 0 0 1px rgba(234,88,12,.06);
}
.pill .label{font-weight:900; color:#334155; font-size:16px}

/* ===== Scroll reveal ===== */
.reveal{opacity:0; transform:translateY(14px) scale(.995); transition:opacity .6s ease, transform .6s ease}
.no-io .reveal{opacity:1 !important; transform:none !important}
.reveal.in-view{opacity:1; transform:translateY(0) scale(1)}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none}
  .family img{transition:none}
}

/* ===== Sections / Cards ===== */
section.section{padding: var(--section-pad) 0; position:relative}
section.section::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background: var(--divider);}
.section h2{
  font-family:'Nunito'; font-weight:800; color:var(--orange);
  text-align:center; font-size:clamp(28px,4.6vw,40px); margin:0 0 16px; letter-spacing:.05px;
}
.section .lead{color:#334155; font-weight:700; text-align:center; margin:0 auto 30px; max-width:900px;}

.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:18px; align-items:stretch; padding-inline: clamp(18px,4vw,28px)}
.card{
  background:#fff; border:1px solid var(--border); border-radius:22px;
  box-shadow:0 10px 22px rgba(0,0,0,.05);
  padding:22px; text-align:center; display:flex; flex-direction:column; justify-content:flex-start; gap:10px; height:100%;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-3px); box-shadow:0 18px 44px rgba(234,88,12,.12);}
.card h3{font-weight:900; font-size:17px; margin:4px 0 4px; color:#3d2b1f}
.card p{color:#374151; font-weight:600; font-size:15px; margin:0; line-height:1.5}
.card .ico{margin-top:2px}
.card .ico .icon-badge{--size:66px}

/* Technik section tweaks */
.techwrap{display:grid; grid-template-columns:1fr; gap:22px; align-items:center; padding-inline: clamp(18px,4vw,28px)}
.techimg{display:flex; justify-content:center}
.techimg img{width:min(100%,760px); height:auto; border-radius:18px; box-shadow:0 16px 40px rgba(0,0,0,.10)}
@media(min-width:900px){ .techwrap{grid-template-columns:1.1fr .9fr} .techimg{justify-content:flex-end} .techtxt{padding-left:10px} }
.techtxt h3{font-family:'Nunito'; font-weight:900; margin:0 0 8px; color:#0f172a}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:14px; background:#fff; border:1px solid var(--border); font-weight:800; color:#334155; box-shadow:0 8px 18px rgba(0,0,0,.04)}

/* CTA */
.cta{background:#fff7ef; border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:0 14px 34px rgba(234,88,12,.12);
  padding:30px 18px; text-align:center; margin: clamp(30px, 6vw, 50px) 0}
.cta h3{font-family:'Nunito'; font-weight:900; color:var(--orange-700); font-size:clamp(24px,3.8vw,32px); margin:0 0 10px}
.cta p{color:#334155; font-weight:700; font-size:clamp(16px,2.6vw,20px); max-width:900px; margin:0 auto 18px}
.cta .btns{display:flex; flex-direction:column; gap:12px; align-items:center}
.cta .btns .btn{display:inline-flex;align-items:center;gap:10px;border-radius:18px;padding:10px 16px;font-size:15px;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--orange) 0%,var(--orange-700) 100%);border:2px solid transparent;cursor:pointer;box-shadow:0 14px 32px rgba(234,88,12,.18);transition:transform .2s ease, box-shadow .2s ease, background-position .4s ease;background-size:180% 180%;}
.btn:hover{transform:translateY(-2px);background-position:100% 0;box-shadow:0 18px 40px rgba(234,88,12,.20);}

@media (min-width:640px){
  .cta .btns{flex-direction:row; justify-content:center}
  .cta .btns .btn{width:100%;max-width:320px;justify-content:center;text-align:center}
}
.btn{display:inline-flex; align-items:center; gap:10px; border-radius:18px; padding:10px 16px; font-weight:900; color:#fff; background: linear-gradient(135deg, var(--orange) 0%, var(--orange-700) 100%); border:2px solid transparent; cursor:pointer; box-shadow:0 14px 32px rgba(234,88,12,.18); transition:transform .2s ease, box-shadow .2s ease;}
.btn:hover{transform:translateY(-2px);background-position:100% 0;box-shadow:0 18px 40px rgba(234,88,12,.20);}
.btn:focus-visible{outline:none; box-shadow:var(--focus)}
.btn.ghost{background:#fff; color:var(--orange-700); border-color:#ffd6b6; box-shadow:0 10px 22px rgba(0,0,0,.06)}

/* FAQ / Testimonials */
.faq{display:grid; gap:12px}
details.faq-item{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px 16px; box-shadow:0 8px 18px rgba(0,0,0,.04)}
details.faq-item > summary{ list-style:none; cursor:pointer; font-weight:900; color:#3d2b1f; display:flex; align-items:center; gap:10px;}
details.faq-item > summary::-webkit-details-marker{display:none}
details.faq-item[open]{box-shadow:0 12px 26px rgba(0,0,0,.06)}
.faq-item p{margin:10px 2px 2px; color:#374151; font-weight:700}
.testimonials .card{min-height:auto; text-align:left}
.testimonials .card h3{font-size:18px}

/* Mobile Feinschliff */
@media (max-width:640px){
  .card{padding:18px}
  .pill{min-height:132px; padding:14px}
  .cta{padding:26px 16px}
}


/* === TECHNIK – refined (monochrom, kein Card-Rahmen) === */
.tech-section{padding-top: clamp(46px,8vw,80px)}
.tech-section .techimg{display:flex; justify-content:center; margin:6px 0 18px}
.tech-section .techimg img{
  width:min(520px, 88%);
  height:auto; display:block; border-radius:18px
}

/* Featureliste unter dem Bild */
.techfeatures{display:grid; gap:12px; max-width:820px; margin: 0 auto; padding-inline: clamp(18px,4vw,28px)}
.techitem{
  display:grid; grid-template-columns:36px 1fr; align-items:start; gap:12px;
  padding:14px 0; border-bottom:1px dashed rgba(15,23,42,.14)
}
.techitem:last-child{border-bottom:none}

/* Monochrome, runde Linien nur im Technik-Block */
.techicon svg{width:28px; height:28px; display:block}
.techicon .stroke{stroke:#1f2937; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}

.techtext b{display:block; color:#0f172a; font-weight:900; margin-bottom:4px}
.techtext span{color:#334155; font-weight:800}

/* Handy: Bild auf Mobile etwas kleiner */
@media (max-width:640px){
  .tech-section .techimg img{width:72%}
}


/* === TECHNIK – v2: kleineres Bild, sanfter Effekt, ohne Container === */
.tech-section{padding-top: clamp(40px,7vw,70px)}
.tech-section .techimg{display:flex; justify-content:center; margin:10px 0 12px}
.tech-section .techimg img{
  width:min(440px, 82%);
  height:auto; display:block; border-radius:16px;
  filter: drop-shadow(0 10px 20px rgba(2,6,23,.12));
  transform: translateY(10px) scale(.985);
  opacity:.0;
  transition: transform .6s cubic-bezier(.2,.6,.2,1), opacity .6s ease, filter .6s ease;
}
.tech-section .techimg img.appear{
  transform: translateY(0) scale(1);
  opacity:1;
  filter: drop-shadow(0 22px 44px rgba(2,6,23,.12));
}

/* Karten unter dem Bild */
.techcards{
  display:grid; gap:16px; width:min(920px,100%); margin:  26px auto 0;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  padding-inline: clamp(18px,4vw,28px);
}
.techcard{
  background:#fff; border:1px solid var(--border);
  border-radius:18px; padding:16px 16px 14px; text-align:left;
  box-shadow:0 10px 22px rgba(0,0,0,.05);
  transition: transform .18s ease, box-shadow .18s ease;
}
.techcard:hover{ transform:translateY(-2px); box-shadow:0 18px 42px rgba(234,88,12,.12) }
.techcard .ticon{width:28px; height:28px; margin-bottom:8px}
.techcard .ticon .stroke{stroke:#1f2937; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.techcard h3{margin:0 0 6px; font-weight:900; color:#0f172a; font-size:16px}
.techcard p{margin:0; color:#334155; font-weight:800; font-size:14px; line-height:1.5}

@media (max-width:640px){
  .tech-section .techimg img{width:72%}
}


/* === TECHNIK – v3: Bild ohne Container, animierte BG-Icons, Premium Cards (zentriert) === */
.tech-section{position:relative; overflow:hidden; padding-top:clamp(34px,7vw,64px)}

/* Floating monochrome background icons */
.tech-bg{position:absolute; inset:0; pointer-events:none; opacity:.08}
.tech-bg svg{position:absolute; stroke:#0f172a; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; filter:blur(.2px)}
@keyframes floatY { 0%{transform:translateY(0)} 50%{transform:translateY(-14px)} 100%{transform:translateY(0)} }
.tech-bg .laptop{left:8%; top:10%; width:100px; animation: floatY 8s ease-in-out infinite}
.tech-bg .phone{right:10%; top:16%; width:86px; animation: floatY 10s ease-in-out infinite}
.tech-bg .car{left:14%; bottom:8%; width:120px; animation: floatY 12s ease-in-out infinite}

/* Image – no card, small, subtle drop-shadow */
.tech-section .techimg{display:flex; justify-content:center; margin:6px 0 10px}
.tech-section .techimg img{
  width:min(420px,80%); height:auto; display:block;
  background:transparent !important;
  border-radius:0;
  filter: drop-shadow(0 10px 20px rgba(2,6,23,.10));
  transform: translateY(10px) scale(.985);
  opacity:.0;
  transition: transform .6s cubic-bezier(.2,.6,.2,1), opacity .6s ease, filter .6s ease;
}
.tech-section .techimg img.appear{
  transform:translateY(0) scale(1); opacity:1;
  filter: drop-shadow(0 22px 44px rgba(2,6,23,.12));
}

/* Premium cards (centered) */
.techcards{
  display:grid; gap:18px; width:min(980px,100%); margin:  26px auto 0;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  padding-inline: clamp(18px,4vw,28px);
}
.techcard{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:8px; min-height:180px;
  padding:18px 16px 16px; border-radius:20px; background:#fff;
  border:1px solid rgba(234,88,12,.18);
  box-shadow:
    0 12px 28px rgba(0,0,0,.06),
    0 2px 6px rgba(0,0,0,.04);
  transition: transform .2s ease, box-shadow .2s ease;
}
.techcard::before{
  content:""; position:absolute; inset:-1px; border-radius:22px;
  background:linear-gradient(180deg, rgba(234,88,12,.16), rgba(234,88,12,0));
  z-index:-1; opacity:.0; transition:opacity .2s ease;
}
.techcard:hover{ transform:translateY(-3px);
  box-shadow:
    0 20px 46px rgba(234,88,12,.18),
    0 6px 16px rgba(0,0,0,.06);
}
.techcard:hover::before{opacity:1}
.techcard .ticon{width:34px; height:34px; margin-bottom:6px}
.techcard .ticon .stroke{stroke:#0f172a; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.techcard h3{margin:0 0 4px; font-weight:900; color:#0f172a; font-size:16px}
.techcard p{margin:0; color:#334155; font-weight:800; font-size:14px; line-height:1.5}

@media (max-width:640px){
  .tech-section .techimg img{width:70%}
}


/* === TECHNIK – v3.1 tweaks === */
.tech-section .techimg,
.tech-section .techimg *{
  background:transparent !important;
  box-shadow:none !important;
}
.tech-section .techimg{margin:6px 0 8px}
.tech-section .techimg img{
  filter:none !important;
  border-radius:0 !important;
  transform: translateY(6px) scale(.995);
}
.tech-section .techimg img.appear{transform:translateY(0) scale(1)}

.tech-bg{opacity:.06}
.tech-bg .laptop{left: calc(50% - 360px); top:12%; width:92px}
.tech-bg .phone{right: calc(50% - 360px); top:18%; width:80px}
.tech-bg .car{left: calc(50% - 380px); bottom:10%; width:112px}


/* === TECHNIK – v3.2 (no floating BG icons, larger refined icons) === */
.tech-bg{display:none !important}
.techcard .ticon{width:42px; height:42px; margin-bottom:8px}
.techcard .ticon .stroke{stroke:#0f172a; stroke-width:2.6; fill:none; stroke-linecap:round; stroke-linejoin:round}


/* === TECHNIK – v3.3: kleiner auf Desktop + sanfter Hover ohne Schatten === */
@media (min-width: 1024px){
  .tech-section .techimg img{
    width: min(360px, 62%);
  }
}
.tech-section .techimg img{
  transition: transform .35s cubic-bezier(.2,.6,.2,1);
  will-change: transform;
}
@media (hover:hover){
  .tech-section .techimg:hover img{
    transform: translateY(-3px) scale(1.01);
  }
}
@media (prefers-reduced-motion: reduce){
  .tech-section .techimg img,
  .tech-section .techimg:hover img{
    transition: none;
    transform: none !important;
  }
}