@font-face{
    font-family:'Inter';
    font-style:normal;
    font-weight:400 600;
    font-display:swap;
    src:url('fonts/inter-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face{
    font-family:'Space Grotesk';
    font-style:normal;
    font-weight:500 700;
    font-display:swap;
    src:url('fonts/space-grotesk-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  :root{
    --petrol:#125C52;
    --petrol-dark:#0B4038;
    --koralle:#E2622D;
    --amber:#F2A93B;
    --anthrazit:#2B2B28;
    --offwhite:#F6F3EC;
    --white:#FFFFFF;
    --border:#E4E1D8;
    --muted:#8A877C;
    --maxw:1080px;
  }
  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--offwhite);
    color:var(--anthrazit);
    font-family:'Inter',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3{
    font-family:'Space Grotesk',system-ui,sans-serif;
    font-weight:700;
    line-height:1.15;
    margin:0;
  }
  a{color:inherit;}
  img,svg{max-width:100%;display:block;}
  .skip-link{
    position:absolute; left:-999px; top:0;
    background:var(--petrol); color:var(--offwhite);
    padding:10px 16px; border-radius:0 0 8px 0; z-index:100;
  }
  .skip-link:focus{left:0;}
  :focus-visible{outline:3px solid var(--koralle); outline-offset:2px;}

  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

  /* Header */
  header.site{
    position:sticky; top:0; z-index:20;
    background:rgba(246,243,236,0.9);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--border);
  }
  header.site .wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:64px;
  }
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
  .brand svg{width:32px;height:32px;}
  .brand span{
    font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px;
    color:var(--anthrazit);
  }
  .brand span b{color:var(--koralle); font-weight:700;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--petrol); color:var(--offwhite);
    font-family:'Inter',sans-serif; font-weight:600; font-size:15px;
    padding:10px 20px; border-radius:999px; text-decoration:none;
    border:1px solid var(--petrol);
    transition:background .15s ease, transform .15s ease;
  }
  .btn:hover{background:var(--petrol-dark); transform:translateY(-1px);}
  .btn.ghost{
    background:transparent; color:var(--petrol); border:1px solid var(--petrol);
  }
  .btn.ghost:hover{background:var(--petrol); color:var(--offwhite);}

  /* Hero */
  .hero{padding:64px 0 40px;}
  .hero .wrap{
    display:grid; grid-template-columns:1fr; gap:40px; align-items:center;
  }
  .eyebrow{
    font-size:13px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--koralle); font-weight:600; margin:0 0 14px;
  }
  .hero h1{
    font-size:clamp(30px,5.5vw,46px);
    max-width:16ch;
  }
  .hero p.sub{
    margin:18px 0 26px; font-size:17px; color:var(--anthrazit);
    max-width:46ch;
  }
  .hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
  .hero-graphic{
    position:relative; height:260px; display:flex;
    align-items:center; justify-content:center;
  }
  .hero-graphic svg{width:220px; height:220px; overflow:visible;}
  .part{
    transform-box:fill-box; transform-origin:center;
    transition:transform .55s cubic-bezier(.22,1.61,.36,1), opacity .4s ease;
  }
  .part.body{
    transition-delay:0s;
    transform:translate(calc((1 - var(--p,1)) * -90px), calc((1 - var(--p,1)) * 90px)) scale(calc(.7 + var(--p,1) * .3)) rotate(calc((1 - var(--p,1)) * -12deg));
    opacity:calc(.2 + var(--p,1) * .8);
  }
  .part.beak{
    transition-delay:.09s;
    transform:translate(calc((1 - var(--p,1)) * 110px), calc((1 - var(--p,1)) * -95px)) rotate(calc((1 - var(--p,1)) * 65deg));
    opacity:calc(.08 + var(--p,1) * .92);
  }
  .part.comb{
    transition-delay:.16s;
    transform:translate(calc((1 - var(--p,1)) * -50px), calc((1 - var(--p,1)) * -110px)) rotate(calc((1 - var(--p,1)) * -50deg));
    opacity:calc(.08 + var(--p,1) * .92);
  }
  .part.particle{
    transform:translate(calc((1 - var(--p,1)) * var(--dx)), calc((1 - var(--p,1)) * var(--dy))) rotate(calc((1 - var(--p,1)) * var(--dr)));
    opacity:calc((1 - var(--p,1)) * var(--po,.9));
  }

  /* Bausteine */
  .section{padding:56px 0;}
  .section-head{max-width:56ch; margin-bottom:32px;}
  .section-head h2{font-size:clamp(22px,3.5vw,28px);}
  .section-head p{color:var(--muted); margin:10px 0 0; font-size:15px;}

  /* Kunden */
  .clients{
    display:flex; flex-wrap:wrap; gap:10px;
  }
  .pill{
    display:inline-block;
    font-size:13px; color:var(--anthrazit); text-decoration:none;
    background:var(--white); border:1px solid var(--border);
    border-radius:999px; padding:8px 14px;
    transition:border-color .15s ease, color .15s ease;
  }
  .pill:hover{ border-color:var(--petrol); color:var(--petrol); }

  /* Warum */
  .why-list{
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:1fr; gap:14px;
  }
  .why-list li{
    display:flex; gap:10px; font-size:15px; align-items:flex-start;
  }
  .why-list li::before{
    content:"";
    width:8px; height:8px; margin-top:7px; flex:none;
    background:var(--koralle); border-radius:50%;
  }

  /* CTA / Kontakt */
  .cta{
    background:var(--petrol); color:var(--offwhite);
    border-radius:20px; padding:44px 32px; text-align:center;
    margin:0 24px;
  }
  .cta h2{font-size:clamp(22px,4vw,30px); color:var(--offwhite); max-width:28ch; margin:0 auto;}
  .cta p{color:#CFE7DF; margin:12px 0 26px; font-size:15px;}
  .cta .btn.light{background:var(--offwhite); color:var(--petrol); border-color:var(--offwhite);}
  .cta .btn.light:hover{background:var(--amber); border-color:var(--amber); color:var(--anthrazit);}

  footer.site{padding:32px 24px 40px; font-size:13px; color:var(--muted);}
  footer.site .wrap{
    display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
  }
  footer.site a{text-decoration:none; color:var(--muted);}
  footer.site a:hover{color:var(--petrol);}
  .foot-links{display:flex; gap:16px;}

  @media (min-width:760px){
    .hero .wrap{grid-template-columns:1.1fr .9fr;}
    .why-list{grid-template-columns:1fr 1fr;}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    .part{transform:none !important; opacity:1 !important;}
    .part.particle{opacity:0 !important;}
    .clients{transition:none; opacity:1; transform:none;}
  }

/* Nav (Mehrseiten-Ergänzung) */
.nav-actions{display:flex; align-items:center; gap:26px;}
.nav{display:flex; gap:22px;}
.nav a{
  font-size:15px; font-weight:500; text-decoration:none; color:var(--anthrazit);
}
.nav a:hover, .nav a[aria-current="page"]{color:var(--petrol);}
.nav a[aria-current="page"]{font-weight:600;}
@media (max-width:639px){
  .nav{display:none;}
}

/* Unterseiten-Hero (schlanker als Startseiten-Hero) */
.page-hero{padding:112px 0 8px;}
.page-hero .eyebrow{margin-bottom:12px;}
.page-hero h1{font-size:clamp(28px,5vw,40px); max-width:22ch;}
.page-hero p.sub{margin:16px 0 0; max-width:58ch; font-size:16.5px; color:var(--anthrazit);}

/* Zitat (Über mich) */
.quote{
  border-left:3px solid var(--koralle);
  background:var(--white); border-radius:0 12px 12px 0;
  padding:16px 22px; margin:28px 0; font-size:15px;
}
.quote p{margin:0;}
.quote cite{display:block; margin-top:10px; font-size:13px; color:var(--muted); font-style:normal;}

.person{display:flex; align-items:center; gap:16px; margin-bottom:8px;}
.person svg{width:52px; height:52px; flex:none;}
.person .name{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px;}
.person .role{font-size:14px; color:var(--muted); margin-top:2px;}

/* Kontaktkarten */
.contact-grid{
  display:grid; grid-template-columns:1fr; gap:16px; margin-top:8px;
}
.contact-card{
  background:var(--white); border:1px solid var(--border); border-radius:14px;
  padding:24px; text-align:center;
}
.contact-card .label{font-size:13px; color:var(--muted); margin-bottom:8px;}
.contact-card .value{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px;}
.contact-card a.value{text-decoration:none; color:var(--petrol);}
.contact-card a.value:hover{color:var(--koralle);}
@media (min-width:640px){
  .contact-grid{grid-template-columns:1fr 1fr;}
}

.note{
  font-size:14px; color:var(--muted); max-width:56ch; margin:24px auto 0; text-align:center;
}

/* Leistungen als Editorial-Schrittfolge (Konzept 3) */
.editorial-steps{ margin:0; }
.e-step{
  display:flex; align-items:flex-start; gap:6px;
  margin-bottom:40px;
}
.e-step:last-child{ margin-bottom:0; }
.e-step .num{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:clamp(56px,9vw,110px); line-height:.75;
  color:var(--petrol); opacity:.14; flex:none;
  user-select:none;
}
.e-step .num-icon{
  flex:none; color:var(--petrol); opacity:.8;
  width:clamp(56px,8vw,92px); height:clamp(56px,8vw,92px);
}
.e-step .num-icon svg{ width:100%; height:100%; display:block; }
.e-step .body{ padding-top:10px; max-width:46ch; }
.e-step .body h3{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px;
  color:var(--anthrazit); margin:0 0 8px;
}
.e-step .rule{ width:48px; height:3px; background:var(--koralle); margin:0 0 12px; }
.e-step .body p{ margin:0; font-size:14.5px; color:var(--anthrazit); }

@media (min-width:760px){
  .e-step:nth-child(even){ flex-direction:row-reverse; text-align:right; }
  .e-step:nth-child(even) .rule{ margin-left:auto; }
}
@media (prefers-reduced-motion:reduce){
  .e-step{ opacity:1 !important; transform:none !important; }
}

/* Scroll-Fade-in: nur aktiv, wenn JS nachweislich läuft (siehe reveal.js). */
/* Ohne diese Klasse bleibt alles regulär sichtbar - kein Risiko von "unsichtbaren" Inhalten. */
.js-reveal .clients,
.js-reveal .contact-grid,
.js-reveal .e-step,
.js-reveal .client-grid{
  opacity:0; transform:translateY(16px);
  transition:opacity .5s ease, transform .5s ease;
}
.js-reveal .clients.in,
.js-reveal .contact-grid.in,
.js-reveal .e-step.in,
.js-reveal .client-grid.in{
  opacity:1; transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
  .js-reveal .clients,
  .js-reveal .contact-grid,
  .js-reveal .e-step,
  .js-reveal .client-grid{
    opacity:1 !important; transform:none !important;
  }
}

/* Kunden-Cards mit Vorschau-Platzhalter (Screenshots lassen sich später einsetzen, */
/* siehe .shot img-Hinweis) */
.client-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px;
}
.client-card{
  background:var(--white); border:1px solid var(--border); border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column;
}
.client-card .shot{
  position:relative; aspect-ratio:16/10; background:var(--offwhite);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
.client-card .shot .bar{
  position:absolute; top:0; left:0; right:0; height:20px;
  background:var(--white); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:5px; padding:0 10px;
}
.client-card .shot .bar span{
  width:6px; height:6px; border-radius:50%; background:var(--border);
}
.client-card .shot .letter{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:40px;
  color:var(--petrol); opacity:.22; margin-top:10px;
}
.client-card .shot img{ width:100%; height:100%; object-fit:cover; }
.client-card .info{ padding:16px 18px; }
.client-card .info h3{ font-size:15.5px; margin:0 0 6px; }
.client-card .info p{ font-size:13.5px; color:var(--anthrazit); margin:0 0 12px; }
.client-card .info a.link{
  font-size:13px; font-weight:600; color:var(--petrol); text-decoration:none;
}
.client-card .info a.link:hover{ color:var(--koralle); }

/* Rechtstexte (Impressum, Datenschutz) */
.legal{ max-width:72ch; }
.legal h2{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px;
  margin:36px 0 12px;
}
.legal h2:first-child{ margin-top:0; }
.legal p{ font-size:15px; margin:0 0 14px; }
.legal address{ font-style:normal; font-size:15px; margin:0 0 14px; }
.legal a{ color:var(--petrol); text-decoration:underline; }
.legal a:hover{ color:var(--koralle); }

/* ---------- Fixed Logo (gleiche Marke wie im 3D-Prototyp) ---------- */
.fixed-logo{
  position:fixed; top:14px; left:16px; z-index:60;
  display:flex; align-items:center; gap:11px;
  padding:9px 22px 9px 9px; perspective:700px;
  background:rgba(246,243,236,.92); backdrop-filter:blur(8px);
  border:1px solid rgba(43,43,40,.12); border-radius:999px;
  box-shadow:0 3px 14px rgba(0,0,0,.22);
  overflow:visible;
}
.fixed-logo svg{ width:42px; height:42px; flex:none; display:block; }
.fixed-logo .wordmark{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px;
  line-height:1; color:var(--anthrazit); white-space:nowrap;
}
.fixed-logo .wordmark b{ color:var(--koralle); font-weight:700; }
.fixed-logo .beak{
  transform-box:fill-box; transform-origin:0% 0%;
  animation:beakTwitch 7s ease-in-out infinite;
}
@keyframes beakTwitch{
  0%, 84%, 100% { transform:rotate(0deg); }
  88% { transform:rotate(-22deg); }
  91% { transform:rotate(10deg); }
  94% { transform:rotate(-8deg); }
  97% { transform:rotate(0deg); }
}

/* ---------- Dots-Navigation (verweist zurück auf die passende Sektion der Startseite) ---------- */
.dots{
  position:fixed; right:20px; top:50%; transform:translateY(-50%);
  z-index:60; display:flex; flex-direction:column; gap:6px;
  background:rgba(246,243,236,.92); backdrop-filter:blur(8px);
  border:1px solid rgba(43,43,40,.12);
  padding:12px 14px; border-radius:16px;
  box-shadow:0 3px 14px rgba(0,0,0,.22);
}
.dots a{
  display:flex; align-items:center; justify-content:flex-end; gap:9px;
  padding:5px 0; font-size:12.5px; color:var(--muted); text-decoration:none;
}
.dots a::after{
  content:""; width:9px; height:9px; border-radius:50%; flex:none;
  border:1.5px solid var(--petrol); background:transparent;
}
.dots a:hover{ color:var(--petrol); }
.dots a span{ white-space:nowrap; }

/* ---------- Burger-Menü (nur auf schmalen Bildschirmen) ---------- */
.nav-toggle{
  display:none;
  position:fixed; top:16px; right:18px; z-index:70;
  width:44px; height:44px; align-items:center; justify-content:center;
  background:rgba(246,243,236,.92); backdrop-filter:blur(8px);
  border:1px solid rgba(43,43,40,.12); border-radius:50%;
  box-shadow:0 3px 14px rgba(0,0,0,.22);
  cursor:pointer; padding:0; color:var(--petrol);
}
.nav-toggle svg{ width:20px; height:20px; }
.nav-toggle .icon-close{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-menu{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:block; }

@media (max-width:639px), (orientation:landscape) and (max-height:500px){
  .nav-toggle{ display:flex; }
  .dots{
    opacity:0; pointer-events:none; transform:translateY(-50%) translateX(14px);
    transition:opacity .2s ease, transform .2s ease;
  }
  .dots.is-open{
    opacity:1; pointer-events:auto; transform:translateY(-50%) translateX(0);
  }
}

/* ---------- Rechtliches (dezent, immer sichtbar) ---------- */
.legal-links{
  position:fixed; left:18px; bottom:16px; z-index:60;
  display:flex; gap:11px;
  background:rgba(246,243,236,.85); backdrop-filter:blur(8px);
  border:1px solid rgba(43,43,40,.1);
  padding:6px 13px; border-radius:999px;
}
.legal-links a{ font-size:11px; color:var(--muted); text-decoration:none; }
.legal-links a:hover{ color:var(--petrol); }
.legal-links a[aria-current="page"]{ color:var(--petrol); font-weight:600; }