/* ═══════════════════════════════════════════════════════════════════════════
   ENGIMATION AI OS — arculati réteg az engimation.ch-hoz
   Forrás: Desktop\EngiAiOS\public_html\start.php élő design-tokenjei.

   Betöltési sorrend:  style.css → refined.css → platform.css → OS-SKIN.CSS
   Ez a lap fut utoljára, tehát ez dönt. A korábbi rétegeket nem töröljük,
   csak visszavezetjük őket az OS nyelvére.

   Elv: az OS-ben a NAVY az elsődleges (gombok, sötét felületek), a PIROS
   pedig ritka, pontszerű akcentus (kiemelt szó, jelölők) — nem nagy felület.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Inter, önállóan hosztolva (nincs külső kérés) ───────────────────────── */
@font-face{font-family:Inter;src:url(/assets/fonts/Inter-Regular.woff2)format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/Inter-Medium.woff2)format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/Inter-SemiBold.woff2)format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/Inter-Bold.woff2)format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/Inter-ExtraBold.woff2)format('woff2');font-weight:800;font-style:normal;font-display:swap}

/* ── Tokenek ─────────────────────────────────────────────────────────────── */
:root{
  --font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --paper:#d8d4cd;           /* Perlweiss, siehe Block weiter unten */
  --ink:#0b1524;
  /* Sötétebb másodlagos szövegszín: a korábbi #536071 világos háttéren
     fakónak hatott. Ez ~7:1 kontraszt a #f7f8fa papíron. */
  --muted:#3d4b5c;
  --line:rgba(15,30,48,.10);
  --line-strong:rgba(15,30,48,.16);
  --navy:#071525;
  --navy-soft:#14263b;
  --red:#d6231c;
  --red-dark:#b91813;
  --lime:#071525;               /* a régi akcentus-token → navy */
  --dark:#071525;
  --surface:rgba(255,255,255,.86);
  --surface-solid:#fff;
  --surface-muted:#f1f3f6;
  /* Lágyabb, kerekebb formanyelv (Orb AI mintájára). A szín marad a miénk:
     navy + svájci piros — csak a formák és az árnyékok lettek szelídebbek. */
  --radius:22px;
  --radius-control:14px;
  --radius-large:32px;
  --shadow-small:0 2px 8px rgba(12,25,42,.04);
  --shadow-card:0 10px 34px rgba(15,29,48,.07),0 2px 6px rgba(15,29,48,.03);
}

/* ── Alap ────────────────────────────────────────────────────────────────── */
body{font-family:var(--font);background:var(--paper);color:var(--ink)}
h1,h2,h3,.brand{font-family:var(--font)}
p,em{color:var(--muted)}
/* A címsorok második sora (em) korábban világosszürke volt és elveszett.
   Most navy-be hajló középtónus: elválik a fő sortól, de nem fakó. */
h1 em,h2 em,.closing em{color:#46586e}
.eyebrow,.product-kicker,.os-overline,.feature-number,.group-label{color:#2f3d4f}
.mono,.os-module p,.service-card-tags{color:#4a5666}

/* Tipográfia: az OS karakterét a szoros betűköz és a 650–760 súly adja.
   A hero mérete lejjebb jön a 92px-ről, de marad kampány-erejű. */
h1{font-size:clamp(44px,4.4vw,68px);font-weight:650;letter-spacing:-.05em;line-height:1.06}
h2{font-weight:660;letter-spacing:-.032em;line-height:1.14;text-wrap:balance}
h3{font-weight:660;letter-spacing:-.018em}
.eyebrow{font-size:11px;font-weight:740;letter-spacing:.24em;color:#4f5865}
.dot{background:var(--red)}
.mono{color:var(--muted)}

/* ── Fejléc ──────────────────────────────────────────────────────────────── */
.header{background:rgba(255,255,255,.86);backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.brand{font-weight:720;letter-spacing:-.04em}
.brand-dot{color:var(--red)}
.header nav a{color:var(--muted)}
.header nav a:hover{color:var(--ink)}
.header nav a:after{background:var(--red)}

/* ── Gombok: lekerekített téglalap, NEM pirula ───────────────────────────── */
.button{
  border-radius:var(--radius-control);
  min-height:46px;padding:0 22px;gap:13px;
  font-size:14px;font-weight:650;
  border:1px solid transparent;
  transition:transform 180ms,box-shadow 180ms,background 180ms,border-color 180ms;
}
.button:hover{transform:translateY(-2px)}
.primary,.hero-actions .primary,.lime,.popular .button,.price-card.popular .button{
  color:#fff;border-color:transparent;
  background:linear-gradient(145deg,#172a40 0%,#071321 70%);
  box-shadow:0 10px 24px rgba(8,22,37,.18),inset 0 1px 0 rgba(255,255,255,.12);
}
.primary:hover,.hero-actions .primary:hover,.lime:hover,.popular .button:hover{
  background:linear-gradient(145deg,#1d3550 0%,#0a1a2c 70%);
  box-shadow:0 16px 32px rgba(8,22,37,.25),inset 0 1px 0 rgba(255,255,255,.14);
}
.header .button{border-radius:var(--radius-control);min-height:42px;font-size:12px;padding:0 18px}
.button-large{min-height:55px;padding:0 30px}

/* Másodlagos / szöveges linkek */
.price-card .button{
  border-radius:var(--radius-control);
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.6);color:var(--ink);
}
.price-card .button:hover{background:#fff;box-shadow:var(--shadow-small)}
.text-link{color:var(--navy-soft);font-weight:650}
.text-link:hover{border-color:var(--red);color:var(--red)}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{background:radial-gradient(ellipse at 79% 40%,#eef1f6 0,transparent 48%)}
.hero-proof{color:var(--muted)}
.swiss-cross{border-color:var(--line-strong);background:#fff;color:var(--red)}
.mini-mark{color:var(--red)}
.art-label{color:var(--muted)}
.bottom-label{
  background:var(--surface);border-color:var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-small);backdrop-filter:blur(14px);
}
#motion-toggle{background:var(--surface-muted);color:var(--muted);border-radius:var(--radius-control)}
.hero-bottom{color:var(--muted);border-color:var(--line);font-weight:740;letter-spacing:.24em}
.hero-bottom>a{color:var(--ink)}

/* ── Kártyák, szekciók ───────────────────────────────────────────────────── */
.service-group,.related-card,.consulting,.investment,#contact-form,.price-card{
  background:var(--surface-solid);
  border:1px solid var(--line)!important;
  border-radius:var(--radius);
  box-shadow:var(--shadow-small);
  transition:border-color 150ms,box-shadow 150ms,transform 250ms;
}
.service-group:hover,.related-card:hover{
  background:var(--surface-solid);
  border-color:var(--line-strong)!important;
  box-shadow:0 12px 28px rgba(13,27,44,.07);
  transform:translateY(-4px);
}
.service-symbol,.result-icon,.check-list li:before,.price-card li:before{color:var(--red)}
.service-links a{border-color:var(--line)}
.service-links a span{color:var(--navy-soft)}
.results-section,.pricing-section,.leadership,.related,footer,.closing{background:var(--paper-band,var(--surface-muted))}
.closing{border-radius:var(--radius-large)}
.closing-orbit{color:rgba(16,26,41,.04)}
.step{border-color:var(--line-strong);background:#fff;color:var(--muted)}
.tags span{border-color:var(--line-strong);border-radius:var(--radius-control);background:rgba(255,255,255,.7)}

/* Kiemelt ár-kártya: navy, nem szürke-fekete */
.price-card.popular{background:linear-gradient(160deg,#14263b 0%,#071525 72%);border-color:transparent!important;box-shadow:var(--shadow-card)}
.popular-badge{background:var(--red);color:#fff;border-radius:999px;font-weight:700;letter-spacing:.06em}
.popular ul{border-color:rgba(255,255,255,.14)}
.popular li:before{color:var(--red)}
.popular>p,.popular .mono{color:#9fb0c4}
.price{font-weight:760;letter-spacing:-.045em}

/* ── Sötét szekciók: navy ────────────────────────────────────────────────── */
.ai-section{background:var(--grau-verlauf,#2a2d34);border-radius:var(--radius-large)}

/* Cégbemutató: az ezüst érem világos panelen — a sötét háttér elnyomta a fémet */
.about-emblem{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:34px 28px;border-radius:var(--radius-large);
  background:linear-gradient(170deg,#ffffff 0%,#eef1f6 100%);
  border:1px solid var(--line);box-shadow:var(--shadow-card);
  background-image:none;
}
.about-emblem .engi-seal{
  width:min(300px,76%);animation:none;transform:none;
  filter:drop-shadow(0 26px 46px rgba(11,22,36,.20));
}
.about-emblem>span{
  color:var(--text-soft);font-size:11px;font-weight:760;letter-spacing:.24em;
}
.ai-section{color:#eef2f7}
.ai-section .eyebrow{color:#b3b7bd}
.ai-section .dot{background:var(--red)}
.ai-copy>p{color:#b3b7bd}
.ai-section h2 em{color:#8fa1b6}
.workflow-node{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);border-radius:var(--radius-control)}
.workflow-node>span,.core-spark{color:var(--red)}
.workflow-node small,.workflow-core small{color:#9fb0c4}
.workflow-node strong{color:#eef2f7}
.workflow-core{
  background:linear-gradient(135deg,#1b3350,#0c1b2c);
  border:1px solid rgba(214,35,28,.35);
  border-radius:var(--radius);
  box-shadow:0 0 50px rgba(214,35,28,.08);
}
.workflow-core svg{color:#fff}
.flow-line{background:rgba(255,255,255,.22)}
.flow-line:after{background:var(--red)}
.flow-branches:before,.flow-branches:after{border-color:rgba(255,255,255,.22)}
.about-emblem{color:var(--red)}
.about-emblem>span{color:#9fb0c4}
.about-intro blockquote{border-color:var(--red)}

/* ── Űrlap ───────────────────────────────────────────────────────────────── */
input,select,textarea{
  background:#fff;border:1px solid var(--line-strong);
  border-radius:var(--radius-control);
}
input:focus,select:focus,textarea:focus{border-color:var(--navy)}
.form-notice a{color:var(--navy-soft)}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:var(--navy)}

/* ── Nyelvválasztó ───────────────────────────────────────────────────────── */
.language-options{background:rgba(255,255,255,.96);border-color:var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card)}
.language-options a{border-radius:9px}
.language-options a:hover,.language-options a[aria-current=page]{background:var(--surface-muted);color:var(--ink)}

/* ── Lábléc ──────────────────────────────────────────────────────────────── */
footer{border-color:var(--line)}
.swiss b{color:var(--red)}

/* ═══ A platform-szekció (platform.css) visszavezetése az OS nyelvére ═════ */
.product-hero{background:radial-gradient(ellipse at 50% 100%,#eaeef5,transparent 65%)}
.product-kicker{color:#4f5865;font-weight:740;letter-spacing:.24em}
.product-kicker .swiss-cross{color:var(--red)}
.eyebrow,.product-section-title .eyebrow{color:#4f5865}
.os-shell{border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.os-sidebar{background:linear-gradient(160deg,#14263b 0%,#071525 72%);color:#eef2f7}
.os-sidebar-label{color:#9fb0c4;font-weight:740;letter-spacing:.24em}
.os-sidebar [role=tab]{color:#9fb0c4;border-radius:9px;font-weight:650}
.os-sidebar [role=tab][aria-selected=true]{background:rgba(255,255,255,.10);color:#fff}
.os-sidebar-foot{color:#9fb0c4}
.os-sidebar-foot i{background:var(--red)}
.os-content{background:var(--surface-solid)}
.os-overline{color:#4f5865;font-weight:740;letter-spacing:.24em}
.os-pill{background:var(--surface-muted);color:var(--muted);border-radius:999px;font-weight:650}
.os-mini-avatar,.os-avatar{background:linear-gradient(145deg,#172a40,#071321);color:#fff}
.os-orb{color:var(--red)}
.os-metrics>div,.os-activity,.os-intelligence,.os-contact-card,.os-editor,.os-page-preview{
  border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface-solid)
}
.os-intelligence{background:linear-gradient(160deg,#14263b 0%,#071525 72%);color:#eef2f7;border-color:transparent}
.os-intelligence p{color:#9fb0c4}
.feature-dark{background:linear-gradient(160deg,#14263b 0%,#071525 72%);color:#eef2f7;border-radius:var(--radius)}
.feature-dark p{color:#9fb0c4}
.feature-spark{color:var(--red)}
.feature-number{color:#4f5865;font-weight:740;letter-spacing:.24em}
.product-feature{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-solid);box-shadow:var(--shadow-small)}
.connection-flow b{color:var(--red)}
.platform-plan-grid>article{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-solid);box-shadow:var(--shadow-small)}
/* kiemelt csomag: navy keret + mélyebb árnyék, nem kék */
.platform-plan-grid>article:nth-child(2){border-color:var(--navy);box-shadow:var(--shadow-card)}
/* a 9 agent-ikon és a hero aláírás: piros akcentus, nem kék */
.os-agent-icon{color:var(--red);border-color:var(--line)}
.product-signature b{color:var(--red)}
/* hero főcím: könnyebb vágás (Orb-formanyelv), az OS betűközével */
.product-hero h1{font-weight:600;letter-spacing:-.05em;color:var(--ink)}
.platform-plan-price{font-weight:760;letter-spacing:-.045em;color:var(--ink)}
.platform-caption{color:var(--muted)}

/* ═══ Márkajel és képek ══════════════════════════════════════════════════ */

/* A fejléc/lábléc hatszöge: az OS saját jele, képként */
.brand .brand-mark{width:30px;height:34px;object-fit:contain;display:block}
.brand svg{display:none}

/* ═══ Az ezüst érem a hero jobb oldalán ═════════════════════════════════
   Ugyanaz a fájl, ami az OS start.php-ján és az admin belépőképernyőjén van.
   Mozgás: lassú lebegés + körbefutó szkennelő gyűrű + finom egérkövetés.
   Mindegyik kikapcsol, ha a látogató kevesebb mozgást kért. */
/* A fénypára és a gyűrű szélesebb az érem hasábjánál, ezért 3px vízszintes
   görgetést okozott. A clip levágja, de nem hoz létre görgetőkonténert. */
.product-hero{overflow-x:clip}

.hero-seal{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  margin:8px 0 -18px;
  /* Egy méret vezérel mindent: az érmet és a párát mögötte. */
  --seal:min(220px,48vw);
}

/* Halk fénypára az érem mögött — állókép, nem pulzál. */
.hero-seal::after{
  content:'';position:absolute;z-index:0;
  width:calc(var(--seal) * 1.5);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(20,38,59,.08) 0%,transparent 64%);
}

/* Az érem kísérőelem: kicsi, mozdulatlan. A hangsúlyt a címsor viszi. */
.engi-seal{
  position:relative;z-index:1;
  width:var(--seal);height:auto;display:block;
  filter:drop-shadow(0 26px 50px rgba(11,22,36,.16)) drop-shadow(0 8px 18px rgba(11,22,36,.12));
}

/* ═══ A hero szerkezete ═════════════════════════════════════════════════
   Balra a szöveg, alatta a szabvány-ikonsor; jobbra a nagy, megdöntött érem,
   ami kifut a szélen; legalul a számsáv. */

.hero-proofline{margin-top:38px}
.hp-label{
  display:flex;align-items:center;gap:12px;margin-bottom:14px;
  font-size:10px;font-weight:760;letter-spacing:.24em;color:#2f3d4f;
}
.hp-label::before{content:'';width:34px;height:1px;background:var(--red);flex:none}
.hero-points{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:0;
}
.hero-points li{
  display:flex;align-items:center;gap:9px;
  padding:0 18px;border-left:1px solid var(--line);
  font-size:12.5px;font-weight:650;color:var(--text-soft);line-height:1.3;
}
.hero-points li:first-child{padding-left:0;border-left:0}
.hp-sym{color:var(--red);font-size:14px}

/* A helyjelzés az érem alatt, középen — nyugodtabb, mint lebegve mellette. */
.hero-ort{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  font-size:10px;font-weight:760;letter-spacing:.2em;color:#2f3d4f;
}
.hero-ort i{font-style:normal;color:var(--red);font-size:13px;margin-bottom:3px}
.hero-ort small{font-size:8.5px;font-weight:650;letter-spacing:.18em;color:var(--text-muted);margin-top:3px}

.hero-zahlen{
  display:flex;align-items:center;flex-wrap:wrap;gap:0 6px;
  margin-top:40px;padding-top:26px;border-top:1px solid var(--line);
}
.hero-zahlen>div{
  padding:0 30px;border-left:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px;
}
.hero-zahlen>div:first-child{padding-left:0;border-left:0}
.hero-zahlen strong{font-size:30px;font-weight:760;letter-spacing:-.04em;color:var(--text);line-height:1}
.hero-zahlen span{font-size:9.5px;font-weight:740;letter-spacing:.22em;color:var(--text-muted)}
/* A mottó a sor jobb szélére: flex:1 elnyeli a maradék helyet, a szöveg
   pedig jobbra zár. (Puszta margin-left:auto itt nem tolta ki.) */
.hero-claim{
  flex:1;min-width:200px;margin:0;padding-left:30px;text-align:right;
  font-size:13px;font-style:italic;color:var(--text-soft);
}

@media(min-width:1000px){
  .product-hero{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1.46fr) minmax(0,.54fr);
    column-gap:44px;align-items:center;
    max-width:1280px;margin-inline:auto;
    text-align:left;
    padding-bottom:0;
  }
  .product-hero>:not(.hero-seal){grid-column:1}
  .product-hero .product-kicker{justify-content:flex-start}
  .product-hero .product-actions{justify-content:flex-start}
  .product-hero h1,.product-hero>p{margin-inline:0}
  .product-hero>p{max-width:44ch}

  /* Az érem a jobb hasábot tölti ki, és túlnyúlik a szélén — ettől lesz
     nagyvonalú, mint egy tech-cég nyitóképe. A `clip` fogja a túllógást. */
  /* Az érem kicsi, teljesen látszik, és nem ő viszi a hero-t. A szöveg
     hasábja ezért szélesebb: a címsor és a gombok kapják a hangsúlyt. */
  .hero-seal{
    grid-column:2;grid-row:1/span 5;margin:0;
    justify-self:center;
    /* Az üveg érem részletgazdagabb az ezüstnél (vésett felirat, belső
       tükröződések) — 230 px-en sáros folttá vált. Ennyi kell neki. */
    --seal:min(370px,27vw);
  }

  /* A lábsáv és a számsáv a teljes szélességet kapja (a grid nem nyújtja meg
     magától a fit-content elemet). */
  .product-hero .product-signature{
    grid-column:1/-1;width:100%;justify-self:stretch;
    margin-inline:0;max-width:none;margin-top:40px;
  }
  /* A `.product-hero>:not(.hero-seal)` szabály erősebb egy puszta
     osztálynévnél, ezért a számsáv is a szülővel együtt kap címzést. */
  .product-hero .hero-zahlen{grid-column:1/-1}
}

@media(max-width:999px){
  /* Mobilon a szabvány-pontok egymás alá, elválasztó vonalak nélkül —
     a sortöréstől amúgy szedett-vedett lenne. */
  .hero-points{flex-direction:column;align-items:flex-start;gap:9px}
  .hero-points li{padding:0;border-left:0}
  .hero-proofline{margin-top:30px}
  .hero-zahlen>div{padding:0 20px}
  .hero-zahlen strong{font-size:24px}
  .hero-claim{margin:14px 0 0;padding:0;text-align:left;max-width:none}
  .hero-ort{position:static;align-items:center;text-align:center;margin-top:14px}
}

/* Mobil: a platform.css fix 58px-es hero-címe 375px-en kilóg ("Unternehmen."),
   ezért itt folyékony méretet kap. Az érem is nagyobb, hogy ne vesszen el. */
@media(max-width:760px){
  .product-hero h1{font-size:clamp(34px,8.6vw,46px);letter-spacing:-.045em}
  .product-hero>p{font-size:16px}
  .hero-seal{--seal:min(250px,66vw)}
}

/* (A hero-ban nincs animáció, ezért prefers-reduced-motion kivétel sem kell.) */

/* Szolgáltatásképek + portré: egységes keret, sarok és árnyék */
.service-figure{margin:0 0 34px;position:relative}
.service-figure img{
  width:100%;height:auto;display:block;aspect-ratio:16/7;object-fit:cover;
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-card);
}

/* Portré: kis, kerek keret. Valódi fotó — nincs rajta KI-jelölés.
   A kép már négyzetes és a fejre van középezve (portre.cjs), ezért itt NEM
   tolunk rajta. Korábban az egész alakos eredetit vágtuk körre, és a kör íve
   belemetszett a haj tetejébe — ott maradt egy szürke ék. */
.portrait{margin:26px 0 0;width:172px}
.portrait img{
  width:172px;height:172px;display:block;
  border-radius:50%;object-fit:cover;object-position:50% 50%;
  background:var(--surface-muted);
  border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(13,27,44,.12);
}

/* KI-Kennzeichnung: minden gépi képen látható jelölés (KI-VO 50. cikk) */
.service-figure figcaption{
  position:absolute;left:14px;bottom:14px;
  padding:6px 11px;border-radius:999px;
  background:rgba(7,21,37,.72);backdrop-filter:blur(8px);
  color:#eef2f7;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}

/* ═══ Szolgáltatás-kártyák (a régi engimation.ch képes kártyái) ═════════ */
.service-cat{margin-bottom:54px}
.service-cat-title{
  display:flex;align-items:center;gap:13px;margin:0 0 6px;
  font-size:11px;font-weight:760;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-soft);
}
.service-cat-sym{color:var(--red);font-size:16px;letter-spacing:0}
.service-cat-title .mono{margin-left:auto;font-size:11px;letter-spacing:.1em;color:#7a8595}
.service-cat-lead{margin:0 0 20px;font-size:15px;color:var(--text-soft)}

.service-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.service-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface-solid);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-small);
  transition:border-color 160ms,box-shadow 160ms,transform 260ms;
}
.service-card:hover{
  border-color:var(--line-strong);
  box-shadow:0 18px 40px rgba(13,27,44,.10);
  transform:translateY(-4px);
}
.service-card-img{position:relative;margin:0;line-height:0}
.service-card-img img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;display:block}
.service-card-img figcaption{
  position:absolute;left:10px;bottom:10px;
  padding:4px 8px;border-radius:999px;
  background:rgba(7,21,37,.74);backdrop-filter:blur(8px);
  color:#eef2f7;font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.service-card-body{display:flex;flex-direction:column;gap:10px;padding:18px 19px 19px;flex:1}
.service-card-body h4{
  margin:0;font-size:16px;font-weight:700;letter-spacing:-.02em;
  color:var(--text);line-height:1.28;
}
.service-card-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.service-card-tags li{
  padding:4px 9px;border-radius:999px;
  background:var(--surface-muted);border:1px solid var(--line);
  font-size:11px;font-weight:600;color:var(--text-soft);
}
.service-card-link{
  margin-top:auto;padding-top:12px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--navy-soft);
}
.service-card:hover .service-card-link{color:var(--red)}

/* ═══ Az OS bemutató: valódi képernyőképek ═══════════════════════════════ */
.os-shots{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.os-shots figure{margin:0}
.os-shots img{
  width:100%;height:auto;display:block;
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-card);background:#fff;
}
.os-shots figcaption{
  margin-top:13px;color:var(--text-soft);
  font-size:13px;line-height:1.55;max-width:42ch;
}
.os-stage-cta{margin-top:38px;display:flex;justify-content:center}

/* ═══ Modulkatalógus ═════════════════════════════════════════════════════ */
.os-modules .module-group{margin-bottom:30px}
.os-modules .module-group>h3{
  margin:0 0 12px;color:var(--text-soft);
  font-size:11px;font-weight:760;letter-spacing:.16em;text-transform:uppercase;
}
.os-modules .module-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.os-module{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:17px 19px;background:var(--surface-solid);
  border:1px solid var(--line);border-radius:var(--radius-control);
  box-shadow:var(--shadow-small);transition:border-color 150ms,box-shadow 150ms;
}
.os-module:hover{border-color:var(--line-strong);box-shadow:0 12px 28px rgba(13,27,44,.07)}
.os-module h4{margin:0 0 5px;font-size:15px;font-weight:700;letter-spacing:-.015em;color:var(--text)}
.os-module p{margin:0;font-size:12.5px;line-height:1.55;color:var(--text-muted)}
/* A címke soha ne törjön ketté: az „immer dabei" korábban két sorba esett és
   belelógott a leírásba. Inline-block + nowrap tartja egyben. */
.os-tag{
  display:inline-block;white-space:nowrap;
  margin-left:8px;padding:3px 8px;border-radius:999px;
  background:var(--surface-muted);color:var(--text-soft);
  font-size:9px;font-weight:760;letter-spacing:.12em;text-transform:uppercase;vertical-align:middle;
}
.os-preis{
  flex:none;font-size:17px;font-weight:760;letter-spacing:-.03em;color:var(--navy);white-space:nowrap;
}
.os-preis small{display:block;font-size:10px;font-weight:650;letter-spacing:.06em;color:var(--text-muted)}

/* ═══ Sechs Hauptfunktionen (Nachfolger der Preisliste) ═══════════════════
   Drei Spalten, jede Karte: Nummer, Name, ein Absatz, Fussnote mit dem
   echten Modul. Keine Preise — die stehen auf der Preisseite. */
.os-fn-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.os-fn{
  display:flex;flex-direction:column;gap:8px;
  padding:24px 24px 20px;background:var(--surface-solid);
  border:1px solid var(--line);border-radius:var(--radius-control);
  box-shadow:var(--shadow-small);transition:border-color 150ms,box-shadow 150ms;
}
.os-fn:hover{border-color:var(--line-strong);box-shadow:0 14px 32px rgba(13,27,44,.09);transform:translateY(-3px)}
.os-fn{transition:border-color 150ms,box-shadow 150ms,transform .2s}
.os-fn-nr{
  font-size:11px;font-weight:760;letter-spacing:.16em;color:var(--red);
  font-variant-numeric:tabular-nums;
}
/* 2026-09-30: Blau-Toene der Navy-Zeit (#92b7d5, #9fb0c4) in den grauen Abschnitten durch Silber (#c9ccd1/#b3b7bd) ersetzt. */
/* Farben ausdruecklich (--ink/--muted), nicht geerbt: die Karten stehen im
   dunklen #platform-Abschnitt, geerbt kaeme Weiss auf Weiss. Genau das war
   beim ersten Bau zu sehen — Titel und Fussnote kaum lesbar. */
.os-fn h4{margin:0;font-size:18px;font-weight:720;letter-spacing:-.02em;color:var(--ink);line-height:1.25}
.os-fn p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted);flex:1}
.os-fn small{
  margin-top:8px;padding-top:10px;border-top:1px solid var(--line);
  font-size:11px;line-height:1.5;color:#4a5666;letter-spacing:.01em;
}
@media(max-width:980px){.os-fn-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.os-fn-liste{grid-template-columns:1fr}}

.fuss-haltung{margin-top:10px;font-size:12px;line-height:1.55;color:var(--muted);max-width:44ch}
.fuss-haltung a{color:inherit;font-weight:600}
/* A kilenc agent */
.os-agents-strip{
  margin-top:34px;padding:30px 28px;border-radius:var(--radius);
  background:var(--grau-verlauf,#2a2d34);color:#eef2f7;
}
.os-agents-strip .eyebrow{color:#b3b7bd;margin-bottom:20px}
.os-agents-strip .dot{background:var(--red)}
.os-agent-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px 24px}
.os-agent-list strong{display:block;font-size:14px;font-weight:700;letter-spacing:-.015em}
.os-agent-list p{margin:4px 0 0;font-size:12px;line-height:1.5;color:#b3b7bd}

@media(max-width:820px){
  .os-shots{grid-template-columns:1fr;gap:28px}
  .os-agents-strip{padding:26px 20px}
}

/* ── Mobil finomhangolás ─────────────────────────────────────────────────── */
@media(max-width:720px){
  .hero-copy h1{font-size:clamp(40px,10.4vw,60px);letter-spacing:-.05em}
  h2{font-size:34px}
  .button{min-height:48px}
  .closing,.ai-section{border-radius:var(--radius)}
}

/* ═══ Orb-formanyelv ════════════════════════════════════════════════════════
   Az orbai-template.framer.website formanyelve, a MI színeinkkel.
   Átvéve: pill-badge a szekciók fölött, teljesen lekerekített gombok, lágy
   kártyák alig látható kerettel, levegősebb térközök.
   NEM átvéve: a monokróm paletta és a középre zárás — a navy és a svájci
   piros marad, a szekciók balra zártak.
   ═══════════════════════════════════════════════════════════════════════════ */

/* A szekció-felirat kapszula lett, nem csupasz szöveg. */
.eyebrow,.product-kicker,.os-overline{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 16px;border-radius:999px;
  background:var(--surface-solid);
  border:1px solid var(--line);
  box-shadow:0 1px 3px rgba(12,25,42,.04);
  font-size:10px;font-weight:740;letter-spacing:.19em;text-transform:uppercase;
  color:#2f3d4f;line-height:1;
  width:fit-content;
}
.product-hero .product-kicker{margin-bottom:26px}

/* A GOMBOK SZÁNDÉKOSAN NEM lettek pirulák.
   Az Orb AI-n teljes kapszula-gombok vannak, de ez az oldal az Engimation AI OS
   admin-felületéhez igazodik, ott pedig lekerekített téglalap a gomb — ez a
   projekt lényege. Egy pirula-gomb itt elszakadna az OS-től.
   Ha mégis kell: `.button{border-radius:999px}` — egy sor. */

/* Kártyák: lágyabb perem, alig árnyék — a hangsúly a tartalmon. */
.service-card,.os-module,.value-card,.plan-card,.price-card,.step-card,
.os-shot,.about-emblem{
  border-radius:var(--radius);
  border-color:var(--line);
  box-shadow:var(--shadow-small);
}
.service-card:hover{box-shadow:0 16px 36px rgba(13,27,44,.1);transform:translateY(-3px)}
.service-card{transition:box-shadow .2s,transform .2s}

/* Levegő: a szekciók közti szünet a lap felét adja. */
.section{padding-block:clamp(72px,8vw,124px)}
.section-heading{margin-bottom:clamp(38px,4.2vw,62px)}

/* ── Futó pill-sor a hero alatt ──────────────────────────────────────────────
   Az Orb AI jellegzetes eleme. Nálunk valódi tartalom fut benne: mind a 16
   szolgáltatás, mindegyik kattintható. A lista kétszer van kirakva, és a sáv
   a felénél ugrik vissza — így a hurok nem látszik. */
.laufband{
  position:relative;overflow:hidden;
  padding:8px 0;margin-top:40px;
  /* A két szélén elhalványul, hogy ne vágjon élesen */
  -webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.laufband-spur{
  display:flex;width:max-content;gap:12px;
  animation:laufband 64s linear infinite;
}
.laufband-spur>span{display:flex;gap:12px}
.laufband:hover .laufband-spur{animation-play-state:paused}
@keyframes laufband{to{transform:translateX(-50%)}}

.lauf-pille{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  padding:10px 18px;border-radius:999px;
  background:var(--surface-solid);border:1px solid var(--line);
  box-shadow:0 1px 3px rgba(12,25,42,.04);
  font-size:13px;font-weight:600;color:var(--text-soft);text-decoration:none;
  transition:border-color 150ms,color 150ms,box-shadow 150ms;
}
.lauf-pille>span{color:var(--red);font-size:11px}
.lauf-pille:hover{border-color:var(--line-strong);color:var(--ink);box-shadow:var(--shadow-small)}

/* A mozgás kikapcsol, ha a látogató kevesebb animációt kért. */
@media(prefers-reduced-motion:reduce){
  .laufband-spur{animation:none}
  .laufband{overflow-x:auto}
}

/* ── Kártyák: keret nélkül, lágy árnyékkal ─────────────────────────────────
   Az Orb-kártyák nem kerettel válnak el, hanem attól, hogy a fehér felület
   a világosszürke papíron ül. Ettől lesz a lap levegősebb. */
.service-card,.os-module,.plan-card,.price-card,.os-shot{
  border-radius:28px;
  border-color:transparent;
  box-shadow:0 1px 2px rgba(12,25,42,.04),0 8px 28px rgba(15,29,48,.06);
}
.service-card:hover{
  border-color:transparent;
  box-shadow:0 2px 4px rgba(12,25,42,.05),0 16px 40px rgba(15,29,48,.10);
}
.service-card-img img{border-radius:0}

/* Címsorok: könnyebb vágás az egész lapon */
.section-heading h2,.closing h2{font-weight:600}

/* ═══ Fehérebb lap ══════════════════════════════════════════════════════════
   A világosszürke papír (#f7f8fa) tompította az egészet. Most tiszta fehér.

   Következmény, amit kezelni kell: a keret nélküli FEHÉR kártyák eltűnnének a
   FEHÉR lapon. Ezért a kártyák visszakapnak egy hajszálvékony keretet — ez az
   Orb AI megoldása is: fehér felület, hajszálperem, alig árnyék.
   ═══════════════════════════════════════════════════════════════════════════ */
/* 2026-09-30, Farbentscheidung: kein reines Weiss und kein Schwarz mehr.
   Quelle (3. Runde): die glatten Lackbilder aus bikecorner_webshop/img
   (metal_creme_gross.jpg → lack-perlweiss.jpg, metal_grau_gross.jpg →
   lack-grau.jpg?v=13): dort wurde die Koernung schon einmal geloest — die Bilder
   sind reine Lichtverlaeufe ohne Metallflitter. Vorher probiert:
   5. Runde (2026-09-30, endgueltig): Bike-Lack metal_grau_gross.jpg, linke
   23 % abgeschnitten (Rohr beginnt oben links), auf 2560×1440 vorgestreckt;
   der helle Lack ist DERSELBE Grau-Lack aufgehellt (curves), damit beide
   Rohre exakt denselben Winkel haben.
   4. Runde (2026-09-30): wieder die EIGENEN Fotos (nagyszurke.png,
   nagytortfehér.png), auf 960 px verkleinert, Non-Local-Means-Entrauschung
   (nlmeans s=30) + leichte Unschaerfe, dann auf 2560 px hochgerechnet:
   der Metallflitter ist weg, die scharfe Lichtkante bleibt. Die Bike-Lacke
   (1920×420) mussten 2,5-fach gestreckt werden und wurden treppig.
   Frueher: engimation-ch-OS-arculat/nagytortfehér.png (Perlmutt-Lack,
   gemessen #d2cec7 im Mittel) und nagyszurke.png (gemessen #2d2e32).
   --paper       = Perlweiss, NUR fuer die bisher weissen Hintergruende
   --paper-band  = eine Stufe dunkler fuer die abwechselnden Baender
   --surface-muted bleibt unveraendert: das sind Pillen, Etiketten, Umschalter
                  — keine Hintergruende, und die sollen nicht mitfaerben.
   --grau-*      = fuer die dunklen Abschnitte NACH dem Hero; Hero bleibt navy. */
/* 2026-09-30, zweite Runde: nicht die FARBE der Dateien, die DATEIEN selbst.
   Der Perlmutt-Lack liegt als festes Bild hinter der ganzen Seite
   (premium.css body, «fixed»: der Inhalt gleitet darueber wie ueber eine
   Karosserie); der Graulack ist --grau-verlauf und liegt genauso fest hinter
   den dunklen Abschnitten. --paper bleibt die Fallback-Farbe, solange das
   Bild laedt. Baender sind halbdurchsichtig, damit der Lack durchscheint. */
:root{
  --paper:#d8d4cd;
  --paper-band:rgba(20,22,26,.06);
  --surface-muted:#f5f6f8;   /* pillák, címkék — változatlan */
  --grau-dunkel:#2d2e32;
  --grau-verlauf:#2d2e32 url(/assets/images/lack-grau.jpg?v=13) center/cover no-repeat fixed;
  --line:rgba(15,30,48,.09);
  --line-strong:rgba(15,30,48,.15);
}
body{background:var(--paper)}

.service-card,.os-module,.plan-card,.price-card,.os-shot{
  background:var(--surface-solid);
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(12,25,42,.03),0 6px 20px rgba(15,29,48,.045);
}
.service-card:hover{
  border-color:var(--line-strong);
  box-shadow:0 2px 4px rgba(12,25,42,.04),0 14px 34px rgba(15,29,48,.08);
}

/* A váltakozó sávok halványabbak, hogy a fehér maradjon a főszereplő. */
.results-section,.pricing-section,.leadership,.related,footer,.closing{
  background:var(--paper-band,var(--surface-muted));
}

/* A hero halvány derengése is visszafogottabb a fehéren. */
.hero{background:radial-gradient(ellipse at 79% 40%,#f4f6f9 0,transparent 46%)}

/* Az üveg érem mögül elhagyjuk a szürke párát: fehéren fölösleges. */
.hero-seal::after{display:none}
.about-emblem{background:linear-gradient(170deg,#fff 0%,#f6f7f9 100%)}

/* ═══ SÖTÉT HERO ════════════════════════════════════════════════════════════
   A Codexben készült változat szerkezete: mély navy sáv, balra zárt fehér
   szöveg, jobbra a világító embléma. A lap többi része fehér marad — a sötét
   sáv csak a nyitókép, ettől kap súlyt.

   A piros itt világosabb árnyalatot kap (#f2453a): a márka #d6231c-je sötét
   navyn elveszne.
   ═══════════════════════════════════════════════════════════════════════════ */
.product-hero{
  position:relative;
  background:
    radial-gradient(ellipse 70% 80% at 78% 45%, rgba(56,118,180,.20) 0%, transparent 62%),
    linear-gradient(158deg,#0b1d31 0%,#06111f 55%,#081a2c 100%);
  color:#fff;
  overflow-x:clip;
}

/* Finom rácsvonalak a háttérben — „tech" felület, de nagyon halkan. */
.product-hero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask:radial-gradient(ellipse 80% 70% at 50% 40%,#000 0%,transparent 78%);
          mask:radial-gradient(ellipse 80% 70% at 50% 40%,#000 0%,transparent 78%);
}
.product-hero>*{position:relative;z-index:1}

.product-hero h1{color:#fff}
.product-hero h1 em{color:#8aa4c4}
.product-hero>p{color:#adc0d6}

/* A kapszula-felirat sötéten üveghatású */
.product-hero .product-kicker{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);
  color:#d3e2f3;
  box-shadow:none;
  backdrop-filter:blur(8px);
}
.product-hero .product-kicker .swiss-cross,
.product-hero .product-kicker .mini-mark{
  background:transparent;border-color:rgba(255,255,255,.22);color:#f2453a;
}

/* Gombok: az elsődleges FEHÉR, mert a navy gomb sötét navyn eltűnne. */
.product-hero .product-actions .primary,
.product-hero .product-actions .button.primary{
  background:#fff;color:#07172a;border-color:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.34);
}
.product-hero .product-actions .primary:hover{
  background:#eaf1f9;box-shadow:0 16px 34px rgba(0,0,0,.42);
}
.product-hero .product-actions .button:not(.primary){
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
}
.product-hero .product-actions .button:not(.primary):hover{
  background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.34);
}

/* Szabvány-sor, lábsáv, számsáv sötéten */
.product-hero .hp-label{color:#8fa6c0}
.product-hero .hp-label::before{background:#f2453a}
.product-hero .hero-points li{color:#cddcec;border-left-color:rgba(255,255,255,.14)}
.product-hero .hp-sym{color:#f2453a}
.product-hero .product-signature{color:#8298b3;border-top-color:rgba(255,255,255,.12)}
.product-hero .product-signature b{color:#f2453a}
.product-hero .hero-zahlen{border-top-color:rgba(255,255,255,.12)}
.product-hero .hero-zahlen>div{border-left-color:rgba(255,255,255,.12)}
.product-hero .hero-zahlen strong{color:#fff}
.product-hero .hero-zahlen span{color:#8298b3}
.product-hero .hero-claim{color:#9db2ca}
.product-hero .hero-ort{color:#9db2ca}
.product-hero .hero-ort i{color:#f2453a}
.product-hero .hero-ort small{color:#6f849e}

/* Az embléma glóriája sötéten hidegkék és erősebb */
.hero-seal::after{
  display:block;content:'';
  position:absolute;z-index:0;pointer-events:none;
  width:calc(var(--seal) * 1.7);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(96,166,236,.30) 0%,rgba(70,130,200,.12) 40%,transparent 68%);
  filter:blur(10px);
}
.engi-seal{filter:drop-shadow(0 22px 48px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(96,166,236,.22))}

/* Kétoszlopos elrendezés: szöveg balra, embléma jobbra. */
@media(min-width:1000px){
  .product-hero{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    column-gap:48px;align-items:center;
    text-align:left;
    max-width:none;padding-inline:clamp(28px,5vw,88px);
  }
  .product-hero>:not(.hero-seal){grid-column:1}
  .product-hero .product-kicker{justify-content:flex-start;margin:0 0 30px}
  .product-hero h1{max-width:15ch;margin:0}
  .product-hero>p{max-width:46ch;margin:22px 0 0}
  .product-hero .product-actions{justify-content:flex-start;margin-top:32px}
  .hero-seal{
    grid-column:2;grid-row:1/span 5;
    justify-self:center;margin:0;
    --seal:min(400px,29vw);
  }
  .hero-proofline{margin-top:52px}
  .product-hero .product-signature,
  .product-hero .hero-zahlen,
  .product-hero .hero-ort{grid-column:1/-1;width:100%}
  .hero-claim{flex:1;min-width:200px;text-align:right}
}

/* A futó pill-sor a sötét sáv UTÁN jön, fehéren — nem lóg bele. */
.laufband{margin-top:0;padding-top:26px}

/* ═══ Mobil-javitasok (merve 375 px-en) ═════════════════════════════════════
   Amit a vizsgalat talalt:
     1. A "MIT KI ERZEUGTES BILD" jeloles 8 px volt — ez KOTELEZO tajekoztatas
        (KI-VO 50. cikk), olvashatatlanul apron nem er semmit.
     2. 9-11 px-es szovegek szerte a lapon (cimkek, mono feliratok).
     3. 28 db tul alacsony erintofelulet: a "Projekt besprechen" sav 29 px
        magas volt, az ajanlott minimum 44.
   ═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:760px){
  /* 1. A gepi kep jelolese olvashato meretre */
  .service-card-img figcaption,
  .service-figure figcaption{
    font-size:9.5px;letter-spacing:.08em;padding:5px 9px;
  }

  /* 2. Apro szovegek feljebb */
  .service-card-tags li{font-size:12px;padding:5px 10px}
  .mono,.eyebrow,.step,.os-tag{font-size:11px}
  .hero-ort small,.product-signature{font-size:10px}

  /* 3. Erintofeluletek: a kartya also sava legyen kenyelmesen talalhato */
  .service-card-link{
    min-height:46px;padding-top:14px;padding-bottom:6px;
    font-size:13px;
  }
  .service-card-body{padding-bottom:14px}

  /* A zaro-szekcio dekoracioja par pixellel kilogott */
  .closing{overflow-x:clip}
}

/* ═══ Hero: kiemelt szolgaltatasok + futo szalag ════════════════════════════
   A `.motion-marquee` es `.motion-services` sajat osztalyok — nem utkoznek a
   csomagbol jott hero-stilusokkal. (A regi `.laufband` szandekosan nem
   eledt ujja: azt a premium.css elrejti.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Harom kiemelt szolgaltatas a gombok alatt */
.motion-services{
  display:flex;flex-wrap:wrap;align-items:center;gap:0;
  margin-top:26px;
}
.motion-services a{
  padding:0 15px;border-left:1px solid rgba(255,255,255,.18);
  font-size:12.5px;font-weight:600;letter-spacing:.01em;
  color:#c3d4e6;text-decoration:none;line-height:1.35;
  transition:color 160ms;
}
.motion-services a:first-child{padding-left:0;border-left:0}
.motion-services a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}

/* Lassan futo szalag a hero aljan.
   NEM pilla-gombok: azok cimkenek/gomboknak latszanak, es olcsova teszik a
   nyitokepet. Helyette folyamatos, ritkitott verzalis szalag — ez a svajci
   tipografia nyelve, es a markahoz is illik. Az elvalaszto a piros kereszt. */
.motion-marquee{
  position:relative;z-index:3;overflow:hidden;
  padding:16px 0 10px;
  border-top:1px solid rgba(255,255,255,.07);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.mm-spur{display:flex;width:max-content;animation:mm-fut 92s linear infinite}
.mm-spur>span{display:flex}
.motion-marquee:hover .mm-spur{animation-play-state:paused}
@keyframes mm-fut{to{transform:translateX(-50%)}}

.mm-item{
  position:relative;display:inline-flex;align-items:center;white-space:nowrap;
  padding:0 30px;
  font-size:10.5px;font-weight:650;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(197,214,232,.72);text-decoration:none;
  transition:color 200ms;
}
/* Elvalaszto: sv�jci kereszt, halvany pirosban */
.mm-item::after{
  content:'✚';
  position:absolute;right:-6px;
  font-size:8px;letter-spacing:0;color:rgba(214,60,52,.55);
}
.mm-item:hover{color:#fff}

@media(prefers-reduced-motion:reduce){
  .mm-spur{animation:none}
  .motion-marquee{overflow-x:auto}
}
@media(max-width:760px){
  .motion-services{margin-top:20px}
  .motion-services a{font-size:12px;padding:0 11px}
  .motion-marquee{padding:12px 0 8px}
  .mm-item{font-size:9.5px;letter-spacing:.17em;padding:0 22px}
}

/* A hero a fejlec ALA csuszik, hogy pontosan egy kepernyo legyen.
   Elotte: a fejlec 82 px-et lenyomott, a hero viszont 100svh magas maradt,
   ezert az also sav (szalag + felirat) az ELSO nezetben a hajtas ala esett.
   A fejlec ugysem takar semmit: a hero tartalma jóval lejjebb kezdodik. */
.header{position:relative;z-index:20}
.motion-hero{margin-top:-82px}
.motion-hero .motion-sticky{top:0}
@media(max-width:760px){
  .motion-hero{margin-top:-64px}
}

/* A hero a fejlec ALATT kezdodik, de a TARTALMA nem bujhat ala:
   annyi belso terkozt kap felul, amennyi a fejlec. */
.motion-hero .motion-sticky{padding-top:82px}
@media(max-width:760px){ .motion-hero .motion-sticky{padding-top:64px} }

/* A szalagot a flex nem zsugorithatja ossze — kulonben a pillek levagodnak. */
.motion-hero .motion-marquee{flex:0 0 auto;margin-top:0}

/* Alacsony ablakban a kozepso resz zsugorodjon, ne a fix sorok logjanak ki.
   (A flex elem alapbol nem megy a tartalma ala — ezert kell a min-height:0.) */
.motion-hero .motion-layout{min-height:0}
.motion-hero .motion-sticky{min-height:0}
@media(max-height:820px){
  .motion-hero .motion-marquee{padding:8px 0 4px}
  .motion-hero .motion-services{margin-top:16px}
}

/* ═══ A hero also feliratai ════════════════════════════════════════════════
   Ezek 6-7 px-esek voltak: az mar nem felirat, hanem szennyezodes a kepen.
   Olvashato meretre visszuk, a ritkitott verzalis karaktert megtartva —
   ugyanaz a tipografiai nyelv, mint a szalagon. */
.motion-hero .motion-bottom{
  padding-top:2px;
  border-top:0;                 /* a szalag mar hozott egy vonalat */
}
.motion-hero .motion-bottom>span,
.motion-hero .motion-scroll>span{
  font-size:9.5px;font-weight:650;letter-spacing:.2em;
  color:rgba(173,193,214,.85);
}
.motion-hero .motion-origin small{
  font-size:9.5px;letter-spacing:.16em;color:rgba(160,180,201,.8);
}
.motion-hero .motion-kicker{font-size:10.5px;letter-spacing:.2em}

/* A gorgetes-jelzo csik legyen kicsit hatarozottabb */
.motion-hero .motion-track{background:rgba(255,255,255,.12)}
.motion-hero .motion-track>i{background:linear-gradient(90deg,#4f9ae8,#cfe4fb)}

@media(max-width:760px){
  .motion-hero .motion-bottom>span,
  .motion-hero .motion-scroll>span{font-size:9px;letter-spacing:.16em}
}

/* A szalag es az also felirat kulonvaljon — kulonben egy suru tombnek latszik. */
.motion-hero .motion-marquee{padding-bottom:14px}
.motion-hero .motion-bottom{padding-top:6px}

/* KI-jelzes a heroban — halk, de a kep mellett all (KI-VO 50. cikk). */
.motion-hero .motion-ki{
  display:inline-block;margin-top:14px;
  font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(150,172,196,.72);text-decoration:none;
  border-bottom:1px solid rgba(150,172,196,.24);padding-bottom:2px;
  transition:color 180ms,border-color 180ms;
}
.motion-hero .motion-ki:hover{color:#fff;border-color:rgba(255,255,255,.5)}

/* A KI-Transparenz oldal tetelei */
.ki-liste{display:grid;gap:16px;margin:30px 0 26px}
.ki-liste article{
  position:relative;padding:20px 22px 20px 108px;
  background:var(--surface-solid);border:1px solid var(--line);border-radius:var(--radius);
}
.ki-flag{
  position:absolute;left:20px;top:22px;
  padding:4px 9px;border-radius:999px;
  font-size:9px;font-weight:760;letter-spacing:.12em;
}
.ki-ja .ki-flag{background:rgba(214,35,28,.1);color:#b3211b;border:1px solid rgba(214,35,28,.25)}
.ki-nein .ki-flag{background:var(--surface-muted);color:var(--text-soft);border:1px solid var(--line)}
.ki-liste h2{margin:0 0 6px;font-size:16px;font-weight:660;letter-spacing:-.015em}
.ki-liste p{margin:0;font-size:14px;line-height:1.65}
@media(max-width:640px){
  .ki-liste article{padding:48px 18px 18px}
  .ki-flag{top:16px;left:18px}
}

/* ═══ A fejlec visszaterese a hero utan ════════════════════════════════════
   A heron belul a fejlec nyugodtan kigorog — ott a nyitokep a fontos.
   Amint a hero elhagyta a kepernyot, visszacsuszik es fent marad.
   (Vezerles: nav-return.js) */
/* SZANDEKOSAN nincs becsusztato animacio. Ha a bongeszo fojtja az
   animaciokat (rejtett ful, csokkentett mozgas, gyenge gep), a fejlec a
   kezdoallapotban — a kepernyo FOLOTT — ragadna, es sosem jonne vissza.
   Igy egyszeruen ott van, amikor kell. */
.header.nav-fix{
  position:fixed;top:0;left:0;right:0;z-index:30;
  transform:none;
}
body.nav-visszahozva{padding-top:var(--fejlec-magassag,82px)}

/* ═══ A fenyivek ne fussanak az also felirat ala ═══════════════════════════
   Az egyik iv (ribbon-0) a viewBox also harmadaban halad, es athuzott a
   "WEB / CRM / AI" felirat mogott. A vizszintes maszk melle fuggolegeset is
   teszunk: az ivek a sav folott elhalnak. */
.motion-hero .electric-field{
  -webkit-mask-image:
    linear-gradient(90deg,#0009,#000 58%,#000),
    linear-gradient(to bottom,#000 0%,#000 64%,transparent 84%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(90deg,#0009,#000 58%,#000),
    linear-gradient(to bottom,#000 0%,#000 64%,transparent 84%);
          mask-composite:intersect;
}

/* ═══ A hero also szovegblokkja olvashato meretre ══════════════════════════
   Eddig 10 / 9,5 / 9,5 px volt — ez mar a "latszik, de nem olvashato"
   tartomany. A szoveg valodi informaciot hordoz (szekhely, alapitas ev,
   KI-tajekoztatas), tehat el kell tudni olvasni.
   ═══════════════════════════════════════════════════════════════════════════ */
.motion-hero .motion-origin div{
  font-size:13px;line-height:1.5;color:rgba(214,222,232,.92);
}
.motion-hero .motion-origin small{
  font-size:11px;letter-spacing:.13em;font-weight:600;
  color:rgba(178,194,212,.9);margin-top:2px;
}
.motion-hero .motion-ki{
  font-size:11px;letter-spacing:.1em;font-weight:600;
  color:rgba(178,194,212,.88);
  border-bottom-color:rgba(178,194,212,.3);
}
.motion-hero .motion-origin>span{font-size:20px}

@media(max-width:760px){
  .motion-hero .motion-origin div{font-size:12.5px}
  .motion-hero .motion-origin small,
  .motion-hero .motion-ki{font-size:10.5px;letter-spacing:.1em}
}

/* Harmadik allapot a KI-Transparenz oldalon: nem allapithato meg.
   Se nem allitjuk, hogy AI, se azt, hogy nem — mert nem tudjuk. */
.ki-talan .ki-flag{
  background:rgba(120,140,165,.12);color:#55657a;border:1px solid rgba(120,140,165,.3);
}

/* ═══ A hero gorgetesi hossza ══════════════════════════════════════════════
   Az onallo csomagban 240svh (asztal) / 210svh (mobil) volt: onallo
   bemutatooldalon ez rendben van. Teljes oldalon viszont 2,4 kepernyonyi
   gorgetes all a latogato es az elso tartalom kozott.
   150 / 140svh: az animacio ugyanugy vegigfut (a JS a hero sajat
   magassagahoz meri a haladast), csak hamarabb er a vegere. */
/* A celzas .motion-hero.is-motion (a JS teszi ra az osztalyt), es az
   os-skin.css a motion-hero.css ELOTT tolt — ezert kell a body eloTag,
   kulonben az eredeti 240svh nyer. */
body .motion-hero.is-motion{height:150svh}
@media(max-width:760px){ body .motion-hero.is-motion{height:140svh} }

/* ═══ A hero hegyi retege: szurke helyett navy ═════════════════════════════
   Eredetileg grayscale(1) volt — semleges, de a bal oldal "ures sotet".
   Igy a hegy szinben odakot a markahoz, es az egesz nyitokep kekebb lesz.
   A hattersZIN atallitasa ertelmetlen lett volna: azt teljesen takarja ez a
   reteg, az erem es a halo — lemertuk, semmit nem valtoztatott.
   A kek attol erosodik, hogy a reteg lathatobb (opacity .32 -> .38), ezert
   a szoveg moge kulon sotetites kerul (lejjebb). */
.motion-hero .mountain-backdrop{
  filter:grayscale(1) brightness(.70) sepia(1) hue-rotate(182deg) saturate(4) !important;
  opacity:.38 !important;
}


/* ═══ A teljes kartya kattinthato ══════════════════════════════════════════
   Eddig csak a "Projekt besprechen" sor vitt tovabb. Most a kartya barmely
   pontja — a kep, a cim, a cimkek koze eso hely is.

   Nem uj linket teszunk ra, hanem a MEGLEVO link ::after-jet nyujtjuk ki a
   kartyara. Igy a kepernyoolvasoban tovabbra is EGY hivatkozas marad, a
   megfelelo szoveggel — ket egymasra tett link zavaro lenne. */
.service-card{position:relative}
.service-card-link::after{
  content:'';position:absolute;inset:0;z-index:1;
  border-radius:inherit;
}
/* A szoveget NEM emeljuk a fedoreteg fole: ott ugyanis nem lehetne
   kattintani, pedig eppen az volt a cel. A szovegkijeloles elvesz, de egy
   kartya, aminek a fele nem kattinthato, rosszabb csere. */

/* Latszodjon is, hogy az egesz kartya elo: barhol jarunk rajta, a also
   sor kiemelodik, es a kep kozelebb jon. */
.service-card{cursor:pointer;transition:border-color 160ms,box-shadow 200ms,transform 200ms}
.service-card:hover .service-card-link{color:var(--red)}
.service-card:hover .service-card-img img{transform:scale(1.035)}
.service-card-img{overflow:hidden}
.service-card-img img{transition:transform 420ms cubic-bezier(.22,.7,.3,1)}

/* Billentyuzettel is lathato legyen, hol jarunk. */
.service-card:focus-within{
  outline:2px solid var(--red);outline-offset:3px;
}
.service-card-link:focus-visible{outline:none}

@media(prefers-reduced-motion:reduce){
  .service-card-img img{transition:none}
  .service-card:hover .service-card-img img{transform:none}
}

/* ═══ "Gewöhnliche Website vs. Plattform" ══════════════════════════════════
   Ket hasab, de TABLAZAT — mert tartalmilag is az: soronkent ugyanannak a
   kerdesnek a ket valasza. Kepernyoolvasoval igy vegigjarhato. */
.vergleich-tabelle{
  width:100%;border-collapse:separate;border-spacing:0;
  margin-top:8px;font-size:15px;line-height:1.55;
}
.vergleich-tabelle th{
  text-align:left;padding:16px 22px;
  font-size:10.5px;font-weight:740;letter-spacing:.18em;text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
.vergleich-tabelle th:first-child{color:#8a97a6}
.vergleich-tabelle th:last-child{color:var(--text)}
.vergleich-tabelle td{padding:17px 22px;vertical-align:top;border-bottom:1px solid var(--line)}
.vergleich-tabelle tr:last-child td{border-bottom:0}

/* Bal oldal: a mai allapot — halvany, athuzott hangulat, de nem gunyos. */
.vergleich-tabelle td:first-child{color:#7c8896;width:44%}
.vergleich-tabelle td:first-child::before{
  content:'—';margin-right:10px;color:#b3bcc7;font-weight:700;
}
/* Jobb oldal: a platform — hatarozott, piros pipaval. */
.vergleich-tabelle td:last-child{color:var(--text);font-weight:520}
.vergleich-tabelle td:last-child::before{
  content:'✚';margin-right:10px;color:var(--red);font-weight:700;font-size:12px;
}
.vergleich-tabelle tbody tr:hover td:last-child{background:rgba(214,35,28,.028)}

/* A jobb hasab kap egy halk kiemelest, hogy lassek: ez az ajanlat. */
.vergleich-tabelle th:last-child,
.vergleich-tabelle td:last-child{
  background:var(--surface-solid);
  border-left:1px solid var(--line);
}
.vergleich-tabelle thead th:last-child{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}
.vergleich-tabelle tbody tr:last-child td:last-child{border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius)}

@media(max-width:760px){
  .vergleich-tabelle,.vergleich-tabelle tbody,.vergleich-tabelle tr,.vergleich-tabelle td{display:block;width:100%}
  .vergleich-tabelle thead{display:none}
  .vergleich-tabelle tr{margin-bottom:18px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
  .vergleich-tabelle td{border-bottom:0;padding:14px 16px}
  .vergleich-tabelle td:first-child{width:auto;background:var(--surface-muted)}
  .vergleich-tabelle td:last-child{border-left:0;border-top:1px solid var(--line)}
}

/* ═══ "Der Weg durch die Plattform" ════════════════════════════════════════
   Ket hasab: balra amit az ugyfel atel, jobbra amit a tulajdonosnak tennie
   kell. A jobb oldal kiemelt hattérrel — az a lenyeg: majdnem semmi. */
.kr-racs{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:10px}
.kr-oszlop>h3{
  margin:0 0 6px;font-size:11px;font-weight:740;letter-spacing:.18em;
  text-transform:uppercase;color:#7b8796;
}
.kr-lead{margin:0 0 20px;font-size:14px;color:var(--text-soft)}
.kr-oszlop:first-child>h3{margin-bottom:22px}

.kr-lista{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.kr-lista li{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.kr-lista li:first-of-type{border-top:0}
.kr-lista h4{margin:0 0 4px;font-size:15.5px;font-weight:650;letter-spacing:-.012em;color:var(--text)}
.kr-lista p{margin:0;font-size:13.5px;line-height:1.55;color:var(--text-soft)}

.kr-szam,.kr-betu{
  flex:none;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  font-size:11px;font-weight:740;letter-spacing:.02em;
  border:1px solid var(--line-strong);color:var(--text-soft);
}
.kr-betu{background:var(--navy);border-color:var(--navy);color:#fff}

/* A ket kiemelt sor: "System: ..." es "Ihr Aufwand: ..." */
.kr-rendszer,.kr-munka{margin-top:8px !important;font-size:12px !important}
.kr-rendszer b,.kr-munka b{
  display:inline-block;margin-right:8px;
  font-size:9.5px;font-weight:760;letter-spacing:.14em;text-transform:uppercase;
}
.kr-rendszer b{color:#6f8298}
.kr-rendszer{color:#6f8298 !important}
.kr-munka b{color:var(--red)}
.kr-munka{color:var(--text) !important;font-weight:600}

/* A tulajdonos oszlopa kap egy halk keretet — ez az igeret. */
.kr-inhaber{
  background:var(--surface-solid);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 26px;
  box-shadow:var(--shadow-small);
}

@media(max-width:860px){
  .kr-racs{grid-template-columns:1fr;gap:34px}
  .kr-inhaber{padding:20px 18px}
}


/* ═══ "Was es bringt" — ot novekedesi pont ════════════════════
   Hat oszlopos racs, minden kartya 2-t foglal: felso sorban 3, alsoban 2 —
   es az also ketto KOZEPRE kerul (4. a 2. oszloptol, 5. a 4.-tol), hogy ne
   maradjon csunya lyuk a sor vegen.
   A "body" prefix azert kell, mert az os-skin.css ot masik lap ELOTT tolt
   be; nelkule a kesobbi lapok altalanos .section szabalyai gyoznenek. */
body .wachstum-racs{
  display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:6px;
}
body .wachstum-pont{
  grid-column:span 2;
  display:flex;flex-direction:column;
  padding:26px 24px 22px;
  background:var(--surface-solid);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-small);
}
body .wachstum-pont:nth-child(4){grid-column:2/span 2}
body .wachstum-pont:nth-child(5){grid-column:4/span 2}

body .wp-szam{
  font-size:11px;font-weight:740;letter-spacing:.12em;
  color:#9aa5b2;margin-bottom:14px;
}
body .wachstum-pont h3{
  margin:0 0 9px;font-size:16.5px;font-weight:650;
  letter-spacing:-.014em;line-height:1.3;color:var(--text);
}
body .wachstum-pont p{
  margin:0 0 20px;font-size:13.5px;line-height:1.6;color:var(--text-soft);
}

/* Az eredmeny-cimke. Alulra tapad (margin-top:auto), hogy a kartyak alja
   egy vonalban legyen akkor is, ha kulonbozo hosszu a szoveg. */
body .wp-cimke{
  margin-top:auto;align-self:flex-start;
  padding:5px 11px;border-radius:999px;
  background:rgba(214,35,28,.07);
  font-size:10.5px;font-weight:740;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red);
}

@media(max-width:1040px){
  body .wachstum-racs{grid-template-columns:repeat(4,1fr)}
  body .wachstum-pont,
  body .wachstum-pont:nth-child(4),
  body .wachstum-pont:nth-child(5){grid-column:span 2}
}
@media(max-width:640px){
  body .wachstum-racs{grid-template-columns:1fr;gap:14px}
  body .wachstum-pont,
  body .wachstum-pont:nth-child(4),
  body .wachstum-pont:nth-child(5){grid-column:1;padding:22px 18px 18px}
}


/* ═══ "Der technische Unterschied" — ERRS/maszkolas ════════════════
   Harom lepes egymas alatt, szammal — mert ez egy SORREND (felismer →
   kicserel → visszaallit), nem egy valogatas. Ezert lista, nem racs.
   Az os-block sotet hatteren ul, ezert vilagos szoveg kell. */
body .datenschutz-technik{padding-top:8px}
body .dst-lepesek{
  display:grid;gap:0;margin-top:4px;
  border-top:1px solid var(--line);
}
body .dst-lepes{
  display:flex;gap:22px;align-items:flex-start;
  padding:24px 0;border-bottom:1px solid var(--line);
}
body .dst-szam{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  font-size:13px;font-weight:740;
  background:var(--navy);color:#fff;
}
body .dst-lepes h3{
  margin:0 0 6px;font-size:16px;font-weight:650;
  letter-spacing:-.012em;color:var(--text);
}
body .dst-lepes p{
  margin:0;font-size:14px;line-height:1.62;color:var(--text-soft);
  max-width:74ch;
}

/* A zaro blokk: ez a mondat viszi az egeszet, ezert kap sajat keretet
   es egy piros csikot bal oldalt. */
body .dst-zaro{
  margin-top:26px;padding:22px 26px;
  /* A doboz addig er, ameddig a szoveg. Teljes szelessegben a 13,5 px-es
     sorok az olvashatosagi korlatnal megallnanak, es a doboz jobb 55%-a
     uresen maradna — ugy nezne ki, mintha hianyozna valami. */
  max-width:660px;
  background:var(--surface-solid);
  border:1px solid var(--line);
  border-left:3px solid var(--red);
  border-radius:var(--radius);
  box-shadow:var(--shadow-small);
}
body .dst-zaro h3{
  margin:0 0 8px;font-size:15px;font-weight:700;
  letter-spacing:-.01em;color:var(--text);
}
body .dst-zaro p{
  margin:0;font-size:13.5px;line-height:1.66;color:var(--text-soft);
  max-width:82ch;
}

@media(max-width:640px){
  body .dst-lepes{gap:14px;padding:20px 0}
  body .dst-szam{width:28px;height:28px;font-size:12px}
  body .dst-zaro{padding:18px 18px}
}


/* ═══ Az 5 kartyas csoport ════════════════════════════════
   17 kartya van, 4 csoportban — ez nem oszthato egyenlon, egy csoportba
   ot jut. Az auto-fill racs 4 oszlopot ad, igy az otodik egyedul allna
   egy masodik sorban, mintha hiba lenne. Ezert AZ A CSOPORT (es csak az)
   ot oszlopot kap, szeles kepernyon.
   A :has() minden mai bongeszoben megy; ahol megsem, ott a regi 4+1
   elrendezes marad — az is mukodik, csak kevesbe rendezett.
   2026-10-01: AUFGEHOBEN. Die fuenfte Karte (Engimation AI OS) ist jetzt
   eine breite Produktkarte ueber die ganze Reihe; 4 Spalten ueberall. */


/* ═══ "Das Problem" — harom fajdalompont ══════════════════════
   Ez a lap egyetlen "negativ" szekcioja. Szandekosan NEM kap dobozt es
   arnyekot, mint a tobbi: nyitott, vilagosabb, kisebb sulyu. Amit a
   latogato itt olvas, az nem ajanlat — csak a helyzet leirasa.
   A piros fuggoleges csik viszont jelzi: ez az, ami penzbe kerul. */
body .problem-racs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);
}
body .problem-pont{
  padding:26px 30px 28px;
  border-left:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
body .problem-pont:first-child{border-left:0}
body .problem-pont h3{
  margin:0 0 10px;font-size:16.5px;font-weight:650;
  letter-spacing:-.014em;color:var(--text);
  padding-left:13px;border-left:3px solid var(--red);
}
body .problem-pont p{
  margin:0;font-size:13.5px;line-height:1.62;color:var(--text-soft);
}

@media(max-width:860px){
  body .problem-racs{grid-template-columns:1fr}
  body .problem-pont{border-left:0;padding:22px 0 24px}
}

/* Abstand zwischen dem Galerie-Knopf «Plattform ansehen» und dem naechsten
   Block (Sechs Dinge): auf dem Telefon lag das Etikett am Knopf an. */
.os-module-teil{margin-top:clamp(44px,6vw,80px)}

/* Finanzierungsblock: seit der dritten Karte («Stundenweise ab CHF 200»,
   2026-10-01) steht der Titel ueber der ganzen Reihe, die drei Karten
   darunter nebeneinander. */
.financing{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px}
.financing>h3{grid-column:1/-1;margin:0 0 4px}
@media(max-width:860px){.financing{grid-template-columns:1fr}}

/* Schmale, zentrierte Seiten (Impressum, Datenschutz, AGB, KI-Transparenz,
   Referenzen, Wissen, 404): .section bekommt seitlich max(4.5%,(100vw−1440)/2)
   — richtig fuer vollbreite Abschnitte, falsch fuer eine 950-px-Box mit
   margin:auto. Auf 2560 px blieben 0 px fuer den Text (Buchstaben
   untereinander, 2026-10-01 gemessen). Hier feste Innenabstaende. */
.legal-page{padding-left:clamp(20px,4.5vw,64px);padding-right:clamp(20px,4.5vw,64px)}

/* Service-Unterseiten: der Rueckweg-Link ist inline-flex, sein margin-bottom
   wirkte deshalb nicht — das Etikett «MARKETING & WACHSTUM» lag 36 px im Link
   (gemessen 2026-10-01, auf jeder Leistungsseite). Als Block mit fester Luft. */
.service-hero>.text-link{display:flex;width:max-content;margin-bottom:22px}
.service-hero>.eyebrow{margin-bottom:22px}

/* Breite Produktkarte «Engimation AI OS» in «Digitale Systeme» (2026-10-01):
   ueber die ganze Reihe, dunkler Lack, echte KIT-Aufnahme links. */
body .service-card.service-card-hervor{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  background:var(--grau-verlauf,#2a2d34);color:#eceef1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 0 #15171b,0 2px 0 #121417,0 3px 0 #0f1114,0 4px 0 #0c0e10,0 5px 0 #090a0c,0 8px 6px rgba(0,0,0,.3),0 30px 60px -22px rgba(0,0,0,.55)}
.service-card-hervor .sch-bild{display:block;padding:18px 0 18px 18px;line-height:0}
.service-card-hervor .sch-bild img{width:100%;height:100%;aspect-ratio:16/11;object-fit:cover;object-position:center 30%;border-radius:12px;box-shadow:0 20px 40px -16px rgba(0,0,0,.7)}
.service-card-hervor .sch-text{display:flex;flex-direction:column;gap:12px;justify-content:center;padding:28px 48px 28px 36px}
.service-card-hervor .eyebrow{align-self:flex-start;background:rgba(20,22,26,.6);border:1px solid rgba(201,204,209,.28);color:#d5d8dc;box-shadow:none}
.service-card-hervor h4{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.03em;margin:0;color:#fff}
.service-card-hervor p{margin:0;font-size:14.5px;line-height:1.65;color:#c6cacf}
.service-card-hervor .service-card-tags li{background:rgba(255,255,255,.06);border-color:rgba(201,204,209,.25);color:#e3e6ea}
.service-card-hervor .sch-knoepfe{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.service-card-hervor .sch-knoepfe .button.primary{background:#ececee;color:#1e1f22;border-color:#ececee}
.service-card-hervor .sch-knoepfe .text-link{color:#d5d8dc}
@media(max-width:860px){body .service-card.service-card-hervor{grid-template-columns:1fr}.service-card-hervor .sch-bild{padding:16px 16px 0}.service-card-hervor .sch-text{padding:22px 22px 24px}}

/* Leistungs-Raster fest auf 4 Spalten (2026-10-01): mit auto-fill hatte die
   Reihe «Digitale Systeme» 5 Spalten und eine leere Luecke, sobald die
   AI-OS-Karte breit wurde. */
body .service-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){body .service-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){body .service-cards{grid-template-columns:1fr}}

/* 2026-10-10 (Peter: «a kártyán alig látszanak a betűk»): a «02 / ENGIMATION AI» kártya háttere egy később
   betöltő lapon fehér lett, a szöveg viszont világos maradt → szinte láthatatlan. Itt, body-prefixszel, nyer. */
body .product-feature.feature-dark{background:linear-gradient(160deg,#14263b 0%,#071525 72%);color:#eef2f7;border-color:transparent}
body .product-feature.feature-dark h3{color:#fff}
body .product-feature.feature-dark p{color:#c9d4e2}
body .product-feature.feature-dark .feature-number{color:#b1bfd0}
body .product-feature.feature-dark .text-link{color:#91bdff}
body .feature-spark svg{width:34px;height:34px;display:block}