/* ═══════════════════════════════════════════════════════════════
   01PC — STYLES
   Dark · Minimal · Editorial · Architectural
   Boutique IT Consultancy & Digital Solutions Studio
   ═══════════════════════════════════════════════════════════════ */

/* ─── RESET ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ─── DESIGN TOKENS ─── */
:root{
  /* Surface — deep black spectrum */
  --bg-0:#0A0A0C;
  --bg-1:#0E0E11;
  --bg-2:#131316;
  --bg-3:#1A1A1E;
  --bg-4:#222226;
  --bg-5:#2A2A2F;

  /* Text hierarchy */
  --text-0:rgba(255,255,255,.92);
  --text-1:rgba(255,255,255,.60);
  --text-2:rgba(255,255,255,.35);
  --text-3:rgba(255,255,255,.14);

  /* Accent — muted cool blue-grey, used sparingly */
  --accent:#6E8CA0;
  --accent-bright:#8BADC4;
  --accent-dim:rgba(110,140,160,.15);

  /* Lines & borders */
  --line:rgba(255,255,255,.07);
  --line-accent:rgba(110,140,160,.25);

  /* Typography */
  --sans:'Space Grotesk',system-ui,-apple-system,sans-serif;

  /* Spacing scale */
  --s-xs:8px;
  --s-sm:16px;
  --s-md:28px;
  --s-lg:48px;
  --s-xl:80px;
  --s-2xl:120px;
  --s-3xl:180px;

  /* Layout */
  --col:min(1140px, 100% - 48px);
  --col-narrow:min(780px, 100% - 48px);

  /* Motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.33,1,.68,1);
  --dur:500ms;
  --dur-slow:800ms;

  /* Radius */
  --radius:4px;
}

/* ─── BASE ─── */
html{
  scroll-behavior:smooth;
  scroll-padding-top:100px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body{
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  color:var(--text-0);
  background:var(--bg-0);
  overflow-x:hidden;
}
::selection{background:rgba(110,140,160,.22);color:#fff}

a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img{display:block;max-width:100%}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
input,textarea,select{font:inherit;color:inherit}

/* ─── GRAIN OVERLAY ─── */
.grain{
  position:fixed;inset:0;z-index:9998;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:256px 256px;
  opacity:.03;
  mix-blend-mode:overlay;
}

/* ─── VIGNETTE ─── */
.vignette{
  position:fixed;inset:0;z-index:9997;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 50%, transparent 0%, rgba(0,0,0,.4) 100%);
}

/* ─── LAYOUT ─── */
.col{
  width:var(--col);
  margin:0 auto;
}
.col--narrow{
  width:var(--col-narrow);
  margin:0 auto;
}

/* ─── SECTIONS ─── */
.section{
  padding:var(--s-2xl) 0;
  position:relative;
}
.section--tight{
  padding:var(--s-xl) 0;
}
.section--spacious{
  padding:var(--s-3xl) 0;
}

.section-divider{
  width:var(--col);
  margin:0 auto;
  height:1px;
  background:var(--line);
}

/* ═══════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:20px 0;
  transition:background var(--dur) var(--ease), padding var(--dur) var(--ease), 
             backdrop-filter var(--dur) var(--ease);
}
.site-header.scrolled{
  background:rgba(10,10,12,.85);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  padding:14px 0;
}
.nav{
  width:var(--col);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav__logo{
  font-size:22px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--text-0);
  transition:color .3s;
}
.nav__logo span{
  color:var(--accent);
}
.nav__links{
  display:flex;
  gap:var(--s-lg);
  align-items:center;
}
.nav__link{
  font-size:14px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-1);
  transition:color .3s;
  position:relative;
}
.nav__link::after{
  content:'';
  position:absolute;
  bottom:-4px;left:0;
  width:0;height:1px;
  background:var(--accent);
  transition:width .4s var(--ease);
}
.nav__link:hover,
.nav__link.active{
  color:var(--text-0);
}
.nav__link:hover::after,
.nav__link.active::after{
  width:100%;
}
.nav__link--cta{
  color:var(--accent-bright);
  border:1px solid var(--line-accent);
  padding:8px 20px;
  transition:background .3s, color .3s, border-color .3s;
}
.nav__link--cta::after{display:none}
.nav__link--cta:hover{
  background:var(--accent-dim);
  border-color:var(--accent);
  color:#fff;
}

/* Burger */
.nav__burger{
  display:none;
  flex-direction:column;
  gap:6px;
  width:28px;
  padding:4px 0;
}
.nav__burger-line{
  display:block;
  height:1.5px;
  background:var(--text-0);
  transition:transform .4s var(--ease), opacity .3s;
}
.nav__burger.open .nav__burger-line:first-child{
  transform:translateY(3.75px) rotate(45deg);
}
.nav__burger.open .nav__burger-line:last-child{
  transform:translateY(-3.75px) rotate(-45deg);
}

/* Mobile menu */
.mobile-menu{
  position:fixed;inset:0;z-index:999;
  background:rgba(10,10,12,.97);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .5s var(--ease);
}
.mobile-menu.open{
  opacity:1;
  pointer-events:auto;
}
.mobile-menu__links{
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:var(--s-lg);
}
.mobile-menu__link{
  font-size:clamp(28px, 6vw, 42px);
  font-weight:500;
  letter-spacing:.04em;
  color:var(--text-1);
  transition:color .3s;
}
.mobile-menu__link:hover{
  color:var(--text-0);
}

/* ═══════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════ */
.t-display{
  font-size:clamp(42px, 7vw, 96px);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--text-0);
}
.t-heading{
  font-size:clamp(32px, 4.5vw, 56px);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.015em;
  color:var(--text-0);
}
.t-subheading{
  font-size:clamp(22px, 2.5vw, 32px);
  font-weight:500;
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--text-0);
}
.t-label{
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
}
.t-body{
  font-size:17px;
  line-height:1.75;
  color:var(--text-1);
  max-width:640px;
}
.t-body--large{
  font-size:clamp(18px, 1.8vw, 22px);
  line-height:1.65;
  color:var(--text-1);
}
.t-caption{
  font-size:14px;
  line-height:1.6;
  color:var(--text-2);
}

/* ═══════════════════════════════════════
   HERO
   ═══════════════════════════════════════ */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:var(--s-3xl) 0 var(--s-2xl);
  position:relative;
}
.hero__content{
  width:var(--col);
  margin:0 auto;
}
.hero__label{
  margin-bottom:var(--s-md);
}
.hero__title{
  margin-bottom:var(--s-lg);
}
.hero__subtitle{
  max-width:600px;
  margin-bottom:var(--s-xl);
}
.hero__scroll-hint{
  position:absolute;
  bottom:40px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s-xs);
  color:var(--text-2);
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  animation:floatHint 2.5s ease-in-out infinite;
}
.hero__scroll-line{
  width:1px;
  height:32px;
  background:linear-gradient(to bottom, var(--text-2), transparent);
}
@keyframes floatHint{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(8px)}
}

/* Page hero (subpages) */
.page-hero{
  padding:var(--s-3xl) 0 var(--s-xl);
}
.page-hero .col{
  display:flex;
  flex-direction:column;
  gap:var(--s-md);
}

/* ═══════════════════════════════════════
   IMAGE PLACEHOLDER
   ═══════════════════════════════════════ */
.img-placeholder{
  background:var(--bg-2);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:var(--s-lg);
  color:var(--text-2);
  font-size:14px;
  line-height:1.6;
  letter-spacing:.02em;
  position:relative;
  overflow:hidden;
}
.img-placeholder--hero{
  width:100%;
  aspect-ratio:16/7;
  margin-top:var(--s-xl);
}
.img-placeholder--wide{
  width:100%;
  aspect-ratio:16/9;
}
.img-placeholder--square{
  width:100%;
  aspect-ratio:1/1;
}
.img-placeholder--service{
  width:100%;
  aspect-ratio:3/2;
}
.img-placeholder::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(110,140,160,.04) 0%, transparent 60%);
  pointer-events:none;
}
.img-placeholder__text{
  position:relative;
  z-index:1;
  max-width:400px;
}
.img-placeholder__icon{
  width:32px;
  height:32px;
  margin:0 auto var(--s-sm);
  opacity:.3;
}

/* ═══════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:14px 32px;
  border:1px solid var(--line-accent);
  color:var(--accent-bright);
  background:transparent;
  transition:background .35s var(--ease), color .3s, border-color .3s, transform .3s var(--ease);
}
.btn:hover{
  background:var(--accent-dim);
  border-color:var(--accent);
  color:#fff;
  transform:translateY(-1px);
}
.btn--primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.btn--primary:hover{
  background:var(--accent-bright);
  border-color:var(--accent-bright);
}
.btn__arrow{
  transition:transform .3s var(--ease);
}
.btn:hover .btn__arrow{
  transform:translateX(3px);
}

/* ═══════════════════════════════════════
   SERVICE CARDS (Home teaser grid)
   ═══════════════════════════════════════ */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
}
.service-card{
  background:var(--bg-1);
  padding:var(--s-lg) var(--s-md);
  display:flex;
  flex-direction:column;
  gap:var(--s-sm);
  transition:background .4s var(--ease);
}
.service-card:hover{
  background:var(--bg-2);
}
.service-card__number{
  font-size:13px;
  font-weight:600;
  color:var(--accent);
  letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
}
.service-card__title{
  font-size:20px;
  font-weight:600;
  line-height:1.3;
  color:var(--text-0);
}
.service-card__desc{
  font-size:15px;
  line-height:1.6;
  color:var(--text-1);
}

/* ═══════════════════════════════════════
   SERVICE BLOCKS (Leistungen page)
   ═══════════════════════════════════════ */
.service-block{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s-xl);
  align-items:start;
  padding:var(--s-2xl) 0;
}
.service-block:not(:last-child){
  border-bottom:1px solid var(--line);
}
.service-block--reverse .service-block__content{
  order:2;
}
.service-block--reverse .service-block__visual{
  order:1;
}
.service-block__meta{
  display:flex;
  flex-direction:column;
  gap:var(--s-xs);
  margin-bottom:var(--s-md);
}
.service-block__number{
  font-size:13px;
  font-weight:600;
  color:var(--accent);
  letter-spacing:.1em;
}
.service-block__title{
  font-size:clamp(24px, 3vw, 36px);
  font-weight:600;
  line-height:1.2;
  color:var(--text-0);
}
.service-block__body{
  font-size:16px;
  line-height:1.75;
  color:var(--text-1);
  margin-bottom:var(--s-md);
}
.service-block__list{
  display:flex;
  flex-direction:column;
  gap:var(--s-xs);
}
.service-block__list-item{
  font-size:15px;
  color:var(--text-1);
  padding-left:20px;
  position:relative;
}
.service-block__list-item::before{
  content:'—';
  position:absolute;
  left:0;
  color:var(--accent);
}
.service-block__questions{
  margin-top:var(--s-md);
  padding:var(--s-md);
  background:var(--bg-2);
  border-left:2px solid var(--accent);
}
.service-block__questions-title{
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:var(--s-sm);
}
.service-block__question{
  font-size:15px;
  color:var(--text-1);
  font-style:italic;
  line-height:1.6;
}
.service-block__question + .service-block__question{
  margin-top:var(--s-xs);
}

/* ═══════════════════════════════════════
   PHILOSOPHY / EDITORIAL BLOCKS
   ═══════════════════════════════════════ */
.editorial{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s-xl);
  align-items:center;
}
.editorial--reverse .editorial__text{order:2}
.editorial--reverse .editorial__visual{order:1}
.editorial__text{
  display:flex;
  flex-direction:column;
  gap:var(--s-md);
}

/* ═══════════════════════════════════════
   PRINCIPLE BLOCKS (Über uns)
   ═══════════════════════════════════════ */
.principles{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--line);
}
.principle{
  background:var(--bg-0);
  padding:var(--s-lg);
  display:flex;
  flex-direction:column;
  gap:var(--s-sm);
}
.principle__number{
  font-size:48px;
  font-weight:700;
  color:var(--bg-3);
  line-height:1;
  letter-spacing:-.04em;
}
.principle__title{
  font-size:20px;
  font-weight:600;
  color:var(--text-0);
}
.principle__desc{
  font-size:15px;
  line-height:1.7;
  color:var(--text-1);
}

/* ═══════════════════════════════════════
   VALUES (Über uns)
   ═══════════════════════════════════════ */
.values{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--s-lg);
}
.value{
  text-align:center;
  padding:var(--s-lg) var(--s-md);
}
.value__label{
  font-size:13px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:var(--s-xs);
}
.value__primary{
  font-size:clamp(22px, 2.5vw, 28px);
  font-weight:600;
  color:var(--text-0);
  margin-bottom:var(--s-xs);
}
.value__versus{
  font-size:14px;
  color:var(--text-2);
}

/* ═══════════════════════════════════════
   TARGET CLIENTS (Über uns)
   ═══════════════════════════════════════ */
.clients-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s-xl);
}
.clients-col__title{
  font-size:14px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:var(--s-md);
}
.clients-col--not .clients-col__title{
  color:var(--text-2);
}
.clients-col__list{
  display:flex;
  flex-direction:column;
  gap:var(--s-sm);
}
.clients-col__item{
  font-size:16px;
  color:var(--text-1);
  padding-left:24px;
  position:relative;
  line-height:1.6;
}
.clients-col__item::before{
  content:'';
  position:absolute;
  left:0;top:10px;
  width:8px;height:1px;
  background:var(--accent);
}
.clients-col--not .clients-col__item::before{
  background:var(--text-2);
}

/* ═══════════════════════════════════════
   CONTACT FORM
   ═══════════════════════════════════════ */
.form{
  display:flex;
  flex-direction:column;
  gap:var(--s-md);
}
.form__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s-md);
}
.form__group{
  display:flex;
  flex-direction:column;
  gap:var(--s-xs);
}
.form__label{
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-2);
}
.form__input,
.form__textarea{
  background:var(--bg-2);
  border:1px solid var(--line);
  padding:14px 16px;
  color:var(--text-0);
  font-size:16px;
  transition:border-color .3s;
  outline:none;
}
.form__input:focus,
.form__textarea:focus{
  border-color:var(--accent);
}
.form__textarea{
  resize:vertical;
  min-height:160px;
}
.form__submit{
  align-self:flex-start;
}

/* Contact direct info */
.contact-direct{
  display:flex;
  flex-direction:column;
  gap:var(--s-md);
  padding:var(--s-lg);
  background:var(--bg-2);
  border:1px solid var(--line);
}
.contact-direct__label{
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-2);
}
.contact-direct__value{
  font-size:18px;
  color:var(--text-0);
}
.contact-direct__value a{
  color:var(--accent-bright);
  transition:color .3s;
}
.contact-direct__value a:hover{
  color:#fff;
}

/* Contact layout */
.contact-layout{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:var(--s-xl);
  align-items:start;
}

/* Contact note */
.contact-note{
  margin-top:var(--s-md);
  padding:var(--s-md);
  border-left:2px solid var(--accent);
  background:var(--bg-2);
}
.contact-note p{
  font-size:15px;
  color:var(--text-1);
  line-height:1.65;
}

/* ═══════════════════════════════════════
   CTA SECTION
   ═══════════════════════════════════════ */
.cta-section{
  text-align:center;
  padding:var(--s-3xl) 0;
}
.cta-section__title{
  margin-bottom:var(--s-md);
}
.cta-section__subtitle{
  margin:0 auto var(--s-lg);
  max-width:520px;
}

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
.site-footer{
  border-top:1px solid var(--line);
  padding:var(--s-xl) 0 var(--s-lg);
}
.footer__inner{
  width:var(--col);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.footer__logo{
  font-size:18px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--text-2);
}
.footer__logo span{
  color:var(--accent);
}
.footer__links{
  display:flex;
  gap:var(--s-md);
}
.footer__link{
  font-size:13px;
  color:var(--text-2);
  transition:color .3s;
  letter-spacing:.02em;
}
.footer__link:hover{
  color:var(--text-0);
}
.footer__copy{
  font-size:13px;
  color:var(--text-3);
  letter-spacing:.02em;
}

/* ═══════════════════════════════════════
   SCROLL REVEAL
   ═══════════════════════════════════════ */
.fade-in{
  opacity:0;
  transform:translateY(28px);
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.fade-in.visible{
  opacity:1;
  transform:translateY(0);
}
.fade-in-delay-1{transition-delay:100ms}
.fade-in-delay-2{transition-delay:200ms}
.fade-in-delay-3{transition-delay:300ms}
.fade-in-delay-4{transition-delay:400ms}
.fade-in-delay-5{transition-delay:500ms}

/* ═══════════════════════════════════════
   HORIZONTAL RULE (accent)
   ═══════════════════════════════════════ */
.accent-rule{
  width:48px;
  height:1px;
  background:var(--accent);
}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media(max-width:1024px){
  .services-grid{
    grid-template-columns:repeat(2, 1fr);
  }
  .service-block{
    grid-template-columns:1fr;
    gap:var(--s-lg);
  }
  .service-block--reverse .service-block__content,
  .service-block--reverse .service-block__visual{
    order:unset;
  }
  .editorial{
    grid-template-columns:1fr;
    gap:var(--s-lg);
  }
  .editorial--reverse .editorial__text,
  .editorial--reverse .editorial__visual{
    order:unset;
  }
  .contact-layout{
    grid-template-columns:1fr;
  }
}

@media(max-width:768px){
  :root{
    --s-xl:56px;
    --s-2xl:80px;
    --s-3xl:120px;
  }
  .nav__links{
    display:none;
  }
  .nav__burger{
    display:flex;
  }
  .services-grid{
    grid-template-columns:1fr;
  }
  .principles{
    grid-template-columns:1fr;
  }
  .values{
    grid-template-columns:1fr;
    gap:var(--s-md);
  }
  .clients-grid{
    grid-template-columns:1fr;
    gap:var(--s-lg);
  }
  .form__row{
    grid-template-columns:1fr;
  }
  .footer__inner{
    flex-direction:column;
    gap:var(--s-md);
    text-align:center;
  }
  .footer__links{
    flex-wrap:wrap;
    justify-content:center;
  }
}

@media(max-width:480px){
  :root{
    --col:min(1140px, 100% - 32px);
    --col-narrow:min(780px, 100% - 32px);
    --s-xl:40px;
    --s-2xl:64px;
    --s-3xl:96px;
  }
  .hero{
    min-height:90vh;
    padding-top:var(--s-2xl);
  }
}

/* ═══════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
  }
  .fade-in{
    opacity:1;
    transform:none;
  }
  .hero__scroll-hint{
    animation:none;
  }
}