/* ============================================================
   MEKISKA Consulting & Engineering — Startseite
   Setzt assets/basis.css voraus. Enthaelt keine eigenen
   Farbwerte: alle Farben kommen aus den Tokens in basis.css.
   ============================================================ */

/* ---------- Blattaufbau ---------- */

.sheet{
  position:relative;
  scroll-margin-top:var(--kopf);
  padding-top:clamp(64px,9vw,128px);
  padding-bottom:clamp(64px,9vw,128px);
  border-top:1px solid var(--linie);
}

.sheet-head{ display:grid; grid-template-columns:minmax(0,1fr); gap:18px; margin-bottom:clamp(38px,5vw,68px); }
@media(min-width:900px){
  .sheet-head{ grid-template-columns:minmax(0,.86fr) minmax(0,1fr); gap:48px; align-items:end; }
}

.sheet-erstes{ border-top:0; }
.fliesstext{ margin-top:20px; color:var(--anthrazit-2); max-width:62ch; }

/* ---------- Zahnrad-Wasserzeichen ---------- */

.hat-wz{ overflow:hidden; }
/* Ohne das legt sich das positionierte Zahnrad ueber den Text. */
.hat-wz > .wrap{ position:relative; z-index:2; }

/* Zwei kaemmende Zahnraeder mit Evolventenflanke (DIN 867, Eingriffswinkel 20
   Grad). Zaehnezahlen 16 und 8, Modul 10, Achsabstand 120 -> Uebersetzung
   genau 2:1. Das kleine Rad steht um eine halbe Teilung (22,5 Grad) versetzt,
   damit Zahn auf Luecke trifft, und dreht doppelt so schnell gegenlaeufig. */
.wz{
  position:absolute;
  pointer-events:none;
  aspect-ratio:268/188;
  height:auto;
  fill:var(--gruen);
  z-index:0;
}
.zr-gross,.zr-klein{ transform-box:fill-box; transform-origin:50% 50%; }
.zr-gross{ animation:zr-a 90s linear infinite; }
.zr-klein{ animation:zr-b 45s linear infinite reverse; }
@keyframes zr-a{ from{ transform:rotate(0deg);    } to{ transform:rotate(360deg);   } }
@keyframes zr-b{ from{ transform:rotate(22.5deg); } to{ transform:rotate(382.5deg); } }
/* Dunkle Flaechen: Gruen auf Anthrazit vertraegt mehr Deckkraft */
.wz-hero{
  width:min(96vw,860px);
  left:-13%; bottom:-26%;
  opacity:.14;
}
.wz-dz{
  width:min(88vw,760px);
  right:-11%; top:-15%;
  opacity:.16;
}
.wz-kontakt{
  width:min(90vw,780px);
  left:-15%; bottom:-24%;
  opacity:.12;
}
/* Helle Blaetter: nur eine Andeutung */
.wz-hell{
  width:min(82vw,680px);
  right:-13%; top:6%;
  opacity:.08;
}
.wz-hell-links{
  width:min(82vw,680px);
  left:-15%; bottom:-14%;
  opacity:.08;
}

/* Auf schmalen Displays greifen Prozentwerte ins Leere, weil die
   Abschnitte dort sehr hoch werden. Deshalb feste Viewport-Masse. */
@media(max-width:820px){
  .wz-hero       { width:125vw; left:-32vw; bottom:-16vw; opacity:.13; }
  .wz-dz         { width:125vw; right:-46vw; top:-12vw;   opacity:.15; }
  .wz-kontakt    { width:125vw; left:-42vw; bottom:-14vw; opacity:.11; }
  .wz-hell       { width:115vw; right:-44vw; top:4vw;     opacity:.075; }
  .wz-hell-links { width:115vw; left:-44vw;  bottom:-8vw; opacity:.075; }
}


/* ---------- Hero ---------- */

.hero{
  position:relative;
  background:var(--anthrazit);
  color:var(--blatt);
  padding-top:clamp(46px,9vh,96px);
  padding-bottom:0;
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(120% 90% at 30% 20%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 30% 20%, #000 30%, transparent 78%);
  pointer-events:none;
}
.hero .wrap{ position:relative; z-index:2; }

.hero-grid{ display:grid; gap:clamp(34px,5vw,56px); align-items:center; }
@media(min-width:1040px){ .hero-grid{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); } }

.hero .eyebrow{ color:rgba(var(--blatt-rgb),.58); }
.hero .h-xl{ margin-top:26px; color:#fff; }
.hero .h-xl em{ font-style:normal; color:var(--gruen-licht); }
.hero-sub{
  margin-top:26px; max-width:52ch;
  font-size:clamp(1.02rem,1.35vw,1.2rem);
  color:rgba(var(--blatt-rgb),.8); font-weight:300;
}
.hero-cta{ margin-top:36px; display:flex; flex-wrap:wrap; gap:14px; }
.hero .btn{ color:#fff; border-color:rgba(255,255,255,.38); }
.hero .btn:hover{ background:var(--gruen); border-color:var(--gruen); }
.hero .btn-solid{ background:var(--gruen); border-color:var(--gruen); }
.hero .btn-solid:hover{ background:#fff; color:var(--anthrazit); border-color:#fff; }

.hero-facts{
  position:relative; z-index:2;
  margin-top:clamp(48px,6vw,80px);
  border-top:1px solid rgba(255,255,255,.15);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(min-width:820px){ .hero-facts{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.fact{ padding:26px 22px 30px 0; border-right:1px solid rgba(255,255,255,.11); }
.fact:last-child{ border-right:0; }
@media(max-width:819px){
  .fact:nth-child(2n){ border-right:0; padding-right:0; }
  .fact:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.11); }
}
.fact b{
  display:block; font-family:var(--disp); font-stretch:100%; font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:-.02em; color:#fff; line-height:1;
}
.fact span{
  display:block; margin-top:10px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(var(--blatt-rgb),.52); line-height:1.5;
}

/* ---------- Verfahrensfliessbild ---------- */

.pid{ width:100%; height:auto; }
.pid .ln{ fill:none; stroke:rgba(var(--blatt-rgb),.5); stroke-width:1.4; }
.pid .eq{ fill:none; stroke:rgba(var(--blatt-rgb),.82); stroke-width:1.6; }
.pid .fl{ fill:rgba(255,255,255,.045); }
.pid .ins{ fill:none; stroke:rgba(var(--blatt-rgb),.36); stroke-width:1.1; stroke-dasharray:4 4; }
.pid .pfeil{ fill:rgba(var(--blatt-rgb),.82); }
.pid .tag{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; fill:rgba(var(--blatt-rgb),.58); }
.pid .tag-hot{ fill:var(--gruen-licht); }
.pid .flow{
  fill:none; stroke:var(--gruen-licht); stroke-width:2.2; stroke-dasharray:12 10;
  opacity:0;
  animation:einblenden .6s ease 1.4s forwards, fliessen 1.7s linear 1.4s infinite;
}
@keyframes fliessen{ to{ stroke-dashoffset:-44; } }

.dr{ stroke-dasharray:1400; stroke-dashoffset:1400; animation:zeichnen 1.5s cubic-bezier(.25,.8,.3,1) forwards; }
@keyframes zeichnen{ to{ stroke-dashoffset:0; } }

.ein{ opacity:0; animation:einblenden .7s ease forwards; }
@keyframes einblenden{ to{ opacity:1; } }

.laufrad{
  transform-origin:355px 300px; opacity:0;
  animation:einblenden .6s ease 1.1s forwards, laufrad-dreh 4.5s linear 1.1s infinite;
}
@keyframes laufrad-dreh{ to{ transform:rotate(360deg); } }

/* ---------- Leistungsphasen ---------- */

.rail{ display:flex; overflow-x:auto; border-top:1px solid var(--linie); border-bottom:1px solid var(--linie); scrollbar-width:thin; }
.phase{
  flex:1 0 auto; min-width:132px;
  background:transparent; border:0; border-right:1px solid var(--linie-2);
  padding:20px 16px 22px; text-align:left; cursor:pointer;
  font-family:var(--mono); color:var(--grau); position:relative;
  transition:background .25s, color .25s;
}
.phase:last-child{ border-right:0; }
.phase::before{
  content:""; position:absolute; left:0; top:-1px; height:2px; width:0;
  background:var(--gruen); transition:width .4s cubic-bezier(.2,.7,.3,1);
}
.phase em{ font-style:normal; display:block; font-size:10.5px; letter-spacing:.16em; margin-bottom:10px; opacity:.75; }
.phase strong{ display:block; font-family:var(--body); font-weight:500; font-size:14.5px; letter-spacing:0; color:var(--anthrazit); line-height:1.3; }
.phase:hover{ background:rgba(var(--gruen-rgb),.06); }
.phase.is-active{ background:var(--blatt); color:var(--anthrazit); }
.phase.is-active::before{ width:100%; }

.phase-body{ display:grid; gap:26px; padding:clamp(28px,4vw,46px) 0 0; }
@media(min-width:900px){ .phase-body{ grid-template-columns:minmax(0,.5fr) minmax(0,1fr); gap:56px; } }
.phase-num{
  font-family:var(--disp); font-stretch:115%; font-weight:900;
  font-size:clamp(3.4rem,8vw,6rem); line-height:.8; color:var(--linie); letter-spacing:-.04em;
}
.phase-text{ margin-top:16px; color:var(--anthrazit-2); max-width:64ch; }
.phase-list{ list-style:none; margin:22px 0 0; padding:0; columns:1; column-gap:40px; }
@media(min-width:640px){ .phase-list{ columns:2; } }
.phase-list li{ break-inside:avoid; padding:7px 0 7px 20px; position:relative; font-size:.94rem; color:var(--anthrazit-2); }
.phase-list li::before{ content:""; position:absolute; left:0; top:16px; width:9px; height:2px; background:var(--gruen); }

/* ---------- Leistungen ---------- */

.svc{ border-top:1px solid var(--linie); }
.svc-item{ display:grid; gap:20px; padding:clamp(30px,4vw,48px) 0; border-bottom:1px solid var(--linie); transition:background .3s; }
@media(min-width:940px){ .svc-item{ grid-template-columns:64px minmax(0,.7fr) minmax(0,1.3fr); gap:40px; align-items:start; } }
.svc-item:hover{ background:rgba(255,255,255,.45); }
.svc-key{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--gruen); padding-top:6px; }
.svc-item p{ margin:0 0 14px; }
.svc-sub{ margin-top:12px; }
.svc-scope{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:1px; background:var(--linie-2); border:1px solid var(--linie-2); }
@media(min-width:600px){ .svc-scope{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.svc-scope li{ background:var(--film); padding:11px 14px; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--anthrazit-2); transition:background .2s, color .2s; }
.svc-item:hover .svc-scope li{ background:var(--blatt); }
/* Muss spezifischer sein als die Zeile darueber, sonst bleibt nur die
   Schriftfarbe stehen und der Text wird unlesbar. */
.svc .svc-item:hover .svc-scope li:hover,
.svc .svc-scope li:hover{
  background:rgba(var(--gruen-rgb),.16);
  color:var(--anthrazit);
  box-shadow:inset 3px 0 0 var(--gruen);
}

/* ---------- Branchen ---------- */

.branchen{ display:grid; gap:1px; background:var(--linie); border:1px solid var(--linie); }
@media(min-width:700px){ .branchen{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:1080px){ .branchen{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.branche{ background:var(--film); padding:clamp(24px,2.6vw,34px); position:relative; overflow:hidden; transition:background .35s; }
.branche::after{ content:""; position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--gruen); transition:width .5s cubic-bezier(.2,.7,.3,1); }
.branche:hover{ background:var(--blatt); }
.branche:hover::after{ width:100%; }
.branche svg{ margin-bottom:20px; }
.branche svg *{ stroke:var(--grau); fill:none; stroke-width:1.3; transition:stroke .35s; }
.branche:hover svg *{ stroke:var(--gruen); }
.branche h3{ font-family:var(--disp); font-stretch:100%; font-weight:700; font-size:1.06rem; letter-spacing:-.005em; text-transform:uppercase; margin:0 0 12px; }
.branche p{ margin:0; font-size:.92rem; color:var(--anthrazit-2); }
.branche .tagline{ display:block; margin-top:16px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--grau); }

/* ---------- Arbeitsweise ---------- */

.prinzipien{ display:grid; gap:clamp(26px,3vw,44px); }
@media(min-width:760px){ .prinzipien{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.prinzip{ border-top:2px solid var(--anthrazit); padding-top:22px; }
.prinzip h3{ font-family:var(--disp); font-stretch:102%; font-weight:700; font-size:1.25rem; text-transform:uppercase; letter-spacing:-.01em; margin:0 0 12px; }
.prinzip p{ margin:0; color:var(--anthrazit-2); font-size:.96rem; }

/* ---------- Disziplinen ---------- */

.disziplinen{ background:var(--gruen-tief); color:var(--blatt); border-top:0; overflow:hidden; }
.disziplinen .wrap{ position:relative; z-index:2; }
.disziplinen .eyebrow{ color:rgba(var(--blatt-rgb),.6); }
.disziplinen .eyebrow::before{ background:var(--gruen-licht); }
.disziplinen .h-lg{ color:#fff; }
.disziplinen .lead{ color:rgba(var(--blatt-rgb),.78); }
.dz-grid{ margin-top:clamp(34px,4vw,54px); display:grid; gap:1px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14); }
@media(min-width:620px){ .dz-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:960px){ .dz-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.dz{ background:var(--gruen-tief); padding:16px 18px; font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; display:flex; align-items:center; gap:12px; transition:background .22s; }
.dz i{ font-style:normal; color:var(--gruen-licht); font-size:9px; letter-spacing:.1em; flex:none; }
.dz:hover{ background:rgba(255,255,255,.08); }

/* ---------- Kontakt ---------- */

.kontakt{ background:var(--anthrazit); color:var(--blatt); border-top:0; }
.kontakt .eyebrow{ color:rgba(var(--blatt-rgb),.55); }
.kontakt .h-lg{ color:#fff; }
.kontakt .lead{ color:rgba(var(--blatt-rgb),.75); }
.kontakt-grid{ margin-top:clamp(36px,4vw,58px); display:grid; gap:clamp(34px,4vw,64px); }
@media(min-width:960px){ .kontakt-grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); } }

.kachel{ display:block; border:1px solid rgba(255,255,255,.16); padding:20px 22px; margin-bottom:14px; text-decoration:none; position:relative; transition:border-color .25s, background .25s; }
.kachel:hover{ border-color:var(--gruen); background:rgba(var(--gruen-rgb),.1); }
.kachel em{ font-style:normal; display:block; font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(var(--blatt-rgb),.5); margin-bottom:8px; }
.kachel b{ font-family:var(--disp); font-stretch:100%; font-weight:600; font-size:1.12rem; letter-spacing:-.01em; color:#fff; }
.kachel-fest{ cursor:default; }
.kachel-fest:hover{ border-color:rgba(255,255,255,.16); background:transparent; }
.kachel .copy-hint{ position:absolute; right:20px; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gruen-licht); opacity:0; transition:opacity .25s; }
.kachel:hover .copy-hint{ opacity:1; }
.kontakt-adresse{ color:rgba(var(--blatt-rgb),.45); margin-top:22px; line-height:1.8; }

.form{ display:grid; gap:1px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.16); }
.field{ background:var(--anthrazit); padding:16px 18px; }
@media(min-width:640px){ .form{ grid-template-columns:repeat(2,minmax(0,1fr)); } .field-full{ grid-column:1 / -1; } }
.field label{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(var(--blatt-rgb),.5); margin-bottom:8px; }
.field input,.field textarea,.field select{ width:100%; background:transparent; border:0; color:#fff; font-family:var(--body); font-size:.98rem; font-weight:300; padding:0; resize:vertical; }
.field select option{ background:var(--anthrazit); color:#fff; }
.field input::placeholder,.field textarea::placeholder{ color:rgba(var(--blatt-rgb),.26); }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; }
.field:focus-within{ background:var(--anthrazit-2); }
.form-foot{ grid-column:1 / -1; background:var(--anthrazit); padding:18px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; }
.form-note{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:rgba(var(--blatt-rgb),.42); max-width:46ch; line-height:1.6; margin:0; }
.form-note a{ color:var(--gruen-licht); }

/* ---------- Schriftfeld ---------- */

.schriftfeld-bereich{ padding-top:clamp(48px,6vw,80px); padding-bottom:clamp(48px,6vw,80px); }
.schriftfeld{ border:1px solid var(--linie); border-bottom:0; background:var(--blatt); font-family:var(--mono); font-size:11px; letter-spacing:.06em; }
.sf-row{ display:grid; border-bottom:1px solid var(--linie); }
@media(min-width:760px){
  .sf-a{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr); }
  .sf-b{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .sf-c{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
.sf-cell{ padding:16px; border-right:1px solid var(--linie); }
.sf-cell:last-child{ border-right:0; }
@media(max-width:759px){ .sf-cell{ border-right:0; border-bottom:1px solid var(--linie-2); } .sf-cell:last-child{ border-bottom:0; } }
.sf-cell em{ font-style:normal; display:block; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--grau); margin-bottom:8px; }
.sf-cell strong{ font-weight:500; color:var(--anthrazit); font-size:12px; }
.sf-logo{ height:66px; width:auto; }
.sf-links{ display:flex; flex-wrap:wrap; gap:20px; }
.sf-links a{ text-decoration:none; color:var(--anthrazit); border-bottom:1px solid var(--linie); padding-bottom:2px; transition:border-color .2s,color .2s; }
.sf-links a:hover{ color:var(--gruen); border-color:var(--gruen); }

/* ---------- Statusleiste und Hinweis ---------- */

.status{
  position:fixed; right:14px; bottom:14px; z-index:70;
  display:none; gap:14px; align-items:center;
  background:rgba(var(--anthrazit-rgb),.88); backdrop-filter:blur(8px);
  color:rgba(var(--blatt-rgb),.7); border:1px solid rgba(255,255,255,.14);
  padding:7px 12px; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  pointer-events:none;
}
@media(min-width:1100px){ .status{ display:flex; } }
.status i{ font-style:normal; color:var(--gruen-licht); }

.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); z-index:120;
  background:var(--gruen); color:#fff; padding:12px 22px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s;
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* ---------- Einblenden beim Scrollen ---------- */

.rv{ opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.rv.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .dr{ stroke-dashoffset:0; }
  .ein,.laufrad,.pid .flow{ opacity:1; }
  .rv{ opacity:1; transform:none; }
}