/* Brand color tokens — override via Live Edit Style Editor */
:root {
  --primary-color: #d8cfc6;
  --accent-color: #08383c;
  --bg-color: #ffffff;
  --text-color: #1f2937;
}


  html { scroll-behavior: smooth; }
  body { margin: 0; background: #D8CFC6; color: #08383C; font-family: 'DM Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  * { box-sizing: border-box; }
  a { color: #08383C; text-decoration: none; }
  a:hover { color: #085157; }
  [data-ref-track]::-webkit-scrollbar { display: none; }
  @keyframes rob-fade { from { opacity: 0 } to { opacity: 1 } }
  @keyframes rob-modal { from { opacity: 0; transform: translateY(20px) scale(.96) } to { opacity: 1; transform: none } }
  @keyframes rob-caret { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }
  @media (max-width: 900px) { [data-grid] { grid-template-columns: 1fr !important } }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }



    :root{
      --rob-petrol:#08383C; --rob-petrol-light:#085157; --rob-homok:#D8CFC6; --rob-neon:#B5FE01; --rob-szurke:#B7B5AE;
      /* Microweber Style Editor alias — ugyanazok az értékek */
      --primary:#085157;
      --dark:#08383C;
      --gray:#B7B5AE;
      --display:'Libre Caslon Display', Georgia, serif;
      --body:'DM Sans', system-ui, sans-serif;
    }
  

/* === MW Live Edit overrides (auto-generated) === */

.mw-admin-live-edit-page [data-layout-container] { min-height: 0 !important; }

.brand img, .nav-logo img, .logo img { max-width: 48px; max-height: 48px; width: auto; height: auto; object-fit: contain; }
.f-brand .logo img, footer .logo img { max-width: 40px; max-height: 40px; }
/* A fejléc-logó méretét a logó-skin inline height-je (admin méret-csúszka) adja.
   `!important` KELL: a skin INLINE `max-width:100%`-ot is ír a képre, azt
   stíluslapból másképp nem lehet felülírni. És a 100% RUGALMAS (flex) logó-
   dobozban önmagára hivatkozik — a doboz szélessége a képtől függ, a képé a
   dobozétól -> a kép 0 px széles lesz (2026-08-10 totkomlostemetkezes.hu:
   asztalin eltűnt a logó, mobilon látszott). A 60vw a NÉZETPONTHOZ kötődik,
   ezért mindig értelmes, és kis kijelzőn is fékez. */
.site-header .logo img, header .logo img { max-width: 60vw !important; max-height: none !important; flex: 0 0 auto; }

.image-slot-canonicalized { width: 100%; height: auto; display: block; }
.image-slot-shape-circle { border-radius: 50%; }

/* === Nav <ul><li> bullet suppression (auto-generated) === */
nav.nav ul, .nav ul, header nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 2px; align-items: center;
}
nav.nav ul li, .nav ul li, header nav ul li {
  list-style: none; margin: 0; padding: 0;
}
nav.nav ul li::marker, header nav ul li::marker { content: none; }

/* === Multilanguage MW module — link-list clean skin (auto-generated) === */
.lang-mw, .mw-lang-switch { display: inline-block; position: relative; font-size: 12.5px; letter-spacing: .08em; }
.mw-lang-current {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 1px solid rgba(255,255,255,0.25);
  color: var(--light, #fff); border-radius: 6px;
  padding: 6px 10px 6px 12px; font: inherit; cursor: pointer;
  text-transform: uppercase; line-height: 1;
}
.mw-lang-current:hover { border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.06); }
.mw-lang-current .mdi { font-size: 16px; opacity: 0.75; }
.mw-lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 80px;
  list-style: none; margin: 0; padding: 6px 0;
  background: rgba(8, 32, 62, 0.96);
  border: 1px solid var(--line-dark, rgba(255,255,255,0.15));
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  display: none; z-index: 50;
}
.mw-lang-menu.is-open { display: block; }
.mw-lang-menu li { list-style: none; padding: 0; margin: 0; }
.mw-lang-link {
  display: block; padding: 8px 14px;
  color: var(--light, #fff); text-decoration: none;
  text-transform: uppercase; white-space: nowrap;
}
.mw-lang-link:hover { background: rgba(255,255,255,0.08); }
.mw-lang-fullname { display: none; }


/* add-generator-hardening: hero full-viewport rules (override of upstream defaults) */
.hero { min-height: 100vh; padding: 0; display: flex; }
.hero .mw-layout-container { flex: 1; padding: 40px 0; }


/* add-generator-hardening: Posts module wrapper transparency.
   The `<div class="module module-posts">` wrapper MW injects between the
   section container and the skin output breaks `parent > child` selectors
   from the source design. Two-part fix: (a) `display:contents` so the box
   model is transparent, and (b) class-level selectors so flex/grid layout
   matches regardless of wrapper depth. */
.module-posts { display: contents; }

/* hardening-v3 ⑦: in the Live Edit frame the module needs a real box —
   display:contents has no clickable/anchorable area, so the gear-toolbar
   cannot attach to the posts module inside the editor. */
.mw-live-edit .module-posts { display: block; }

/* Class-level flex/grid layouts — match regardless of `.module-posts` depth. */
.carousel-track { display: flex; }
.carousel-track > article.carousel-slide,
.carousel-track > .carousel-slide { flex: 0 0 100%; width: 100%; }


/* ===== MDI-SVG-INFLATE-FIX ===== */
/* MW Live Edit inflates `<i class="mdi …">` to inline <svg viewBox="0 0 24 24">
   without width/height — without these rules the SVG fills its parent. */
.mdi svg { width: 1em; height: 1em; fill: currentColor; display: inline-block; vertical-align: -0.125em; }
i.mdi svg, .mdi > svg { width: 1em; height: 1em; }


/* ===== STATIC-PAGE-CLEARANCE-BLOCK ===== */
/* Static pages (subtype=static) bypass inner.php and inject content
   directly into the body. Without padding the fixed header overlaps. */
body.page-impresszum > .main-content { padding-top: 80px; }
body.page-adatvedelmi > .main-content { padding-top: 80px; }


/* ===== FONT-COLOR-RUNTIME-OVERRIDE ===== */
/* Live Edit inserts inline <font color="…">; override to brand color
   non-destructively. !important is required (inline attribute beats rules). */
font[color] { color: var(--brand) !important; }

/* ===== MW LAYOUT WRAPPER TRANSPARENCY ===== */
section > .mw-layout-container { display: contents; }
.edit.allow-drop { display: none !important; }
/* háttér-modul a tartalom ALÁ (display:contents kioltja a wrapper z-indexét).
   FIGYELEM: `body > section` NEM használható — a renderelt MW-oldalon a
   szekciók az MW modul-wrapperei alatt élnek:
   body > .edit.main-content > .module-layouts > section */
section:has(> .mw-layout-container) { isolation: isolate; }
section .mw-layout-background-block { z-index: -1; }
/* Szerkeszthető doboz 20 px-nél alacsonyabb vezérlő körül (carousel-lapozó
   pöttyök: 32x3 px vonalak). A MW szerkesztő-CSS-e minden `.edit`-nek
   `min-height: 20px`-et ad, ami ezeket 20 px-es tömbbé hizlalja -- és mivel
   a pötty-sor flex, a flex-elem maga a DOBOZ lesz, nem a gomb. */
.edit--tight { min-height: 0 !important; line-height: 0; background: none !important; }

/* ===== MW MENU MODULE STYLING + DROPDOWN ===== */
/* MW renders <ul class="menu-root"> + <li><a class="menu_element_link">.
   Nested <ul> = dropdown (have-submenu li). Claude-emit `.menu a:hover`
   NEM matchel az MW renderre. */
.site-header .module-menu { display: flex; }
.site-header .module-menu > ul {
  display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; align-items: center;
}
.site-header .module-menu > ul > li { position: relative; list-style: none; }
.site-header .module-menu li::marker { content: none; }
.site-header .module-menu .menu_element_link {
  text-decoration: none;
  white-space: nowrap;
  /* color / padding / font az `nav.primary a` Claude-emit szabálytól örökölt */
}
.site-header .module-menu .have-submenu-link::after {
  content: " \25BE"; font-size: 11px; opacity: 0.7; margin-left: 4px;
}
/* Dropdown (nested ul) */
.site-header .module-menu ul ul {
  position: absolute; top: 100%; left: 0; min-width: 260px;
  display: none; flex-direction: column;
  background: #fff; color: #1a1a2e;
  box-shadow: 0 12px 32px rgba(0,0,0,0.14);
  border-radius: 12px; padding: 8px; margin: 6px 0 0 0;
  z-index: 100; gap: 2px; list-style: none;
}
.site-header .module-menu > ul > li:hover > ul,
.site-header .module-menu > ul > li:focus-within > ul { display: flex; }
.site-header .module-menu ul ul li { width: 100%; list-style: none; }
.site-header .module-menu ul ul .menu_element_link {
  display: block; border-radius: 8px; padding: 8px 14px;
  font-size: 14px; font-weight: 400; white-space: normal; color: inherit;
}

/* ===== MW REVEAL INITIAL STATE (no flash) ===== */
/* Villanás-gátló kezdőállapot (a JS lefutása ELŐTT). 2026-09-03: a
   bondiacosmetics.hu-hoz igazítva — 30px emelkedés, oldalról ±50px. */
.mw-reveal-pending [data-reveal] { opacity: 0; transform: translateY(30px); }
.mw-reveal-pending [data-reveal="left"]  { transform: translateX(-50px); }
.mw-reveal-pending [data-reveal="right"] { transform: translateX(50px); }

/* ===== MW .element CLASS HEADING-FONT FIX (2026-06-11) ===== */
h1.element, h2.element, h3.element, h4.element,
.edit h1, .edit h2, .edit h3, .edit h4,
.main-content h1, .main-content h2, .main-content h3, .main-content h4 {
  font-family: var(--display) !important;
}


/* DSP compliance footer-block — rob360-p */
:root { --dsp-logo-height: 141px; }
.rob360-p-dsp { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 10px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 44px; }
.dsp-compliance-wrap { background: var(--footer-bg, #161616); }
.dsp-in-footer { background: transparent !important; }
.rob360-p-dsp .dsp-logos { display: flex; align-items: center; gap: 50px; }
.rob360-p-dsp .dsp-logo { height: var(--dsp-logo-height); width: auto; padding: 10px; display: block; }
.rob360-p-dsp .dsp-logo-link { display: inline-block; line-height: 0; }
.rob360-p-dsp .dsp-statement { max-width: 720px; text-align: center; font-size: 0.875rem; line-height: 1.5; margin: 0; color: #fff; }
@media (max-width: 1024px) {
  .rob360-p-dsp .dsp-logos { gap: 32px; }
}
@media (max-width: 768px) {
  .rob360-p-dsp .dsp-logos { gap: 20px; flex-wrap: wrap; justify-content: center; }
}


/* ===== LEGAL-PAGES-DEFAULT-STYLES ===== */
/* Impresszum + Adatvédelmi page styling (add-default-legal-pages-v2 — rk-teto pattern). */
.impresszum-wrap, .adatvedelmi-wrap { max-width: 980px; margin: 0 auto; padding: 32px 20px 80px; line-height: 1.65; color: #4a4a4a; }

/* Intro box — left brand-border, soft gray bg. */
.impresszum-intro-box, .adatvedelmi-intro-box {
  background: #f5f5f5;
  border-left: 4px solid var(--primary, currentColor);
  padding: 24px 28px;
  border-radius: 8px;
  margin: 0 0 48px;
  line-height: 1.75;
}
.impresszum-intro-box p, .adatvedelmi-intro-box p { margin: 0; }

/* Section heading — UPPERCASE + MDI-icon + thin divider. */
.impresszum-section, .adatvedelmi-section { margin: 48px 0; }
.impresszum-h2, .adatvedelmi-h2 {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #1a1a1a;
}
.impresszum-h2 > i, .adatvedelmi-h2 > i { color: var(--primary, currentColor); font-size: 1.4em; line-height: 1; }

/* Card grid for identity data (Üzemeltető / Adatkezelő). */
.impresszum-grid, .adatvedelmi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.impresszum-card, .adatvedelmi-card {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 18px 20px;
}
.impresszum-label, .adatvedelmi-label {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #888;
  font-weight: 600;
  margin-bottom: 8px;
}
.impresszum-value, .adatvedelmi-value { color: #1a1a1a; font-weight: 500; }
.adatvedelmi-value a { color: inherit; text-decoration: none; }
.adatvedelmi-value a:hover { text-decoration: underline; }

/* TODO placeholders — italic + brand color. */
.impresszum-todo, .adatvedelmi-todo {
  color: var(--primary, currentColor) !important;
  font-style: italic;
  font-weight: 500;
}

/* Pill-style contact links. */
.impresszum-contact-row, .adatvedelmi-contact-row { display: flex; flex-wrap: wrap; gap: 12px; }
.impresszum-pill, .adatvedelmi-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 14px 22px;
  color: #1a1a1a;
  text-decoration: none;
  font-weight: 500;
}
.impresszum-pill > i, .adatvedelmi-pill > i { color: var(--primary, currentColor); font-size: 1.15em; }
.impresszum-pill:hover, .adatvedelmi-pill:hover { background: #fafafa; }

/* Lists (Adatvédelmi célok + Érintetti jogok). */
.adatvedelmi-list { padding-left: 22px; margin: 0; }
.adatvedelmi-list li { margin: 6px 0; }

/* Body paragraphs in legal sections. */
.impresszum-section > p, .adatvedelmi-section > p { margin: 0; }

/* Footer legal-link visibility (B4 + hardening-v3 B8) — default color fits
   dark/neutral footers; appendLegalCss() swaps to muted on light footers. */
.footer .footer-bottom-links, .footer-bottom-links {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; letter-spacing: .06em;
  color: var(--light, #ffffff);
}
.footer .footer-bottom-links a, .footer-bottom-links a,
.footer .footer-bottom-links .footer-legal-link, .footer-bottom-links .footer-legal-link {
  color: inherit; text-decoration: none;
}
.footer .footer-bottom-links .footer-legal-link:hover,
.footer-bottom-links .footer-legal-link:hover { text-decoration: underline; }
.footer-legal-sep { opacity: 0.5; margin: 0 4px; user-select: none; }

@media (max-width: 640px) {
  .impresszum-wrap, .adatvedelmi-wrap { padding: 24px 16px 60px; }
  .impresszum-grid, .adatvedelmi-grid { grid-template-columns: 1fr; }
  .impresszum-section, .adatvedelmi-section { margin: 36px 0; }
}


/* ===== hardening-v3 (5): inline-grid mobile fallback (always-on) ===== */
@media (max-width: 900px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns"] > div:has(img):not(:has(h1,h2,h3,p)) { order: -1; }
}

/* ===== MW DYNAMIC-CONTENT ADMIN BUTTON ===== */
/* Csak bejelentkezett adminnak látszik (PHP-őr); a látogató SOHA nem látja. */
.mw-dyn-edit {
  position: absolute; top: 14px; right: 14px; z-index: 40;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 999px;
  background: #2a5a8a; color: #fff !important; text-decoration: none;
  font: 600 13px/1 system-ui, sans-serif; letter-spacing: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.28); border: 2px solid #fff;
}
.mw-dyn-edit:hover { background: #1f4970; }
.mw-dyn-edit i { font-size: 15px; }

/* A hero gombja lejjebb ül: a lap tetején a menüsáv FIXEN áll (z-index 60),
   és 14px-nél pont alá csúszna — a gomb létezne, de nem lehetne rákattintani.
   A 96px a menüsáv magassága fölött van a legkeskenyebb (mobil) esetben is. */
.mw-dyn-edit--hero { top: 96px; }

/* ===== MOTTÓ-PASZTILLÁK — 2026-09-03 ügyfél-kérés ===================== */
/* Kérés: "Lehetnének nagyobbak, illetve kerekebbek a keretei. a neonzöld
   széleket el tudnám képzelni." + "bárhol ahol ilyen 1-1 mondat van, az
   legyen legalább félkövér ... Ezek egyfajta üzenetek, szeretném hogy
   feltűnne a látogatóknak."

   Az !important azért kell, mert ezek a mezők soron belüli (inline)
   stílussal érkeznek a szekció-sablonokból, és az inline erősebb a
   sima szabálynál. Csak azt írjuk felül, amit az ügyfél kért.

   A pasztilla a képernyő SZÉLÉHEZ tapad (left:0 / right:0), ezért a
   belső vég marad szögletes — ott nincs mit lekerekíteni. A "kerekebb"
   hatást a nagyobb magasság (több függőleges belső margó) adja a
   változatlan 999px-es félkör-véggel együtt. */
[data-motto] {
  font-size: clamp(16px, 1.3vw, 19px) !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  padding-top: 13px !important;
  padding-bottom: 13px !important;
}

/* Neonzöld szegély — 2026-09-04-től MINDEN mottón (3. ügyfél-kör: "a beúszó
   mottók legyenek egységesek, a tekintetben, hogy a neonzöld keretben
   legyen").

   Korábban a neon szegély CSAK sötét petrol háttéren volt, mert a #B5FE01
   világossági kontrasztja bézsen mérve 1,25 — a világos szakaszokon ezért
   maradt a visszafogott szürke keret. Az eredmény viszont pont az lett, amit
   az ügyfél kifogásol: öt mottóból kettő neonzöld kerettel, három egy alig
   látható szürkével. A DÖNTÉS mért előnézet alapján született (a jelölt
   változatokat a valódi oldalra terhelve rendereltük): a bézsen a neon
   szegély a színkülönbség miatt tisztán olvasható, csak a világossága
   hasonló. Ez SZEGÉLY, nem szöveg — a szövegkontraszt-szabály nem rá
   vonatkozik, a mottók SZÖVEGE marad a mért #085157 (5,88 bézsen).
   A világos háttéren .95 átlátszatlanság és 1,5px vastagság kell, hogy a
   sötét szakaszok 1px/.75-ös keretével azonos SÚLYÚNAK látsszon. */
[data-motto]:not([data-motto-on="dark"]) {
  border-color: rgba(181, 254, 1, .95) !important;
  border-width: 1.5px !important;
}
[data-motto][data-motto-on="dark"] {
  border-color: rgba(181, 254, 1, .75) !important;
  color: #E8F6C8 !important;
}

/* ── A mottó és a szöveg közötti levegő ────────────────────────────────────
   3. ügyfél-kör: "az asztali felületen uccsó rész lehetne szellősebbé, ott a
   mottó rálóg a szövegre" + "több helyütt a beúszó mottó és a szöveg sűrű".

   MÉRVE (1440×900, élő oldal, a javítás ELŐTT) — a mottó alja és az utána
   következő első szöveg teteje közti távolság:
       rólunk 89px · szolgáltatások 25px · referenciák 29px · kapcsolat −5px
   A kapcsolat-szekcióban tehát tényleg ÁTFEDÉS volt, nem csak szűk hely.

   MIÉRT A SZEKCIÓ BELSŐ MARGÓJA a megoldás: a mottó `position:absolute`, és
   a böngésző szerint a viszonyítási doboza maga a `<section>` (NEM a
   .mw-layout-container, hiába `position:relative` az is — ezt megmértük).
   Ezért a szekció felső belső margójának növelése a SZÖVEGET tolja lejjebb,
   a mottót viszont a helyén hagyja: pontosan a hiányzó levegőt adja hozzá.
   A konténer belső margója ugyanezért NEM működik — kipróbáltuk, 0 hatás.

   A mottó MÉRETÉHEZ szándékosan nem nyúlunk: a 2026-09-03-i kör kifejezetten
   NAGYOBB mottókat kért ("Lehetnének nagyobbak"), és a levegő e nélkül is
   megvan. A rólunk-szekció eleve bőven elég (89px), azt békén hagyjuk. */
#szolgaltatasok,
#referenciak { padding-top: calc(clamp(215px, 24vh, 300px) + 52px) !important; }

/* A rólunk-szekció mottója KIVÉTEL: ott nem a szöveggel van baja (89px a rés,
   bőven elég), hanem a KÖR ALAKÚ FOTÓVAL. 2026-09-04, 4. ügyfél-kör: "az
   1-en csiszolj, az rálóg a képre".
   MÉRVE — a mottó alja és a fotó teteje közti rés, a javítás előtt:
       1280px: 34px · 1440px: 22px · 1680px: 29px · 1920px: 36px
   miközben vízszintesen 194–410px-en átfedik egymást, ezért a pasztilla
   ráülni látszik a képre. Itt a szekció felső margóját NEM növeljük (az a
   szöveget is lejjebb tolná, pedig az jó), hanem magát a mottót emeljük
   feljebb: a szekció 215–300px-es felső margóján belül bőven van hely, és
   ebben a szekcióban nincs fölötte semmi (a kapcsolatnál pl. van egy fehér
   ív, ott ez nem lenne járható). Az új rés: 76–131px. */
#rolunk [data-motto] { top: clamp(56px, 7.2vw, 105px) !important; }
#szamok      { padding-top: calc(clamp(215px, 20vw, 260px) + 52px) !important; }
#kapcsolat   { padding-top: calc(clamp(215px, 24vh, 300px) + 84px) !important; }

/* ===== EGY-MONDATOS ÜZENETEK ========================================== */
/* Ugyanaz a kérés: a kiemelt, önálló mondatok legyenek félkövérek. */
[data-message] { font-weight: 600 !important; }

/* Kiemelt szó-részlet neonzölddel, egérre dőlt betűvel.
   Kérés: "a rendben vannak a dolgok lehet neonzöld és ha rávisz az egeret
   akkor dőlt betűtípussá válhat. – ezt amúgy is használhatnátok többet." */
.rob-accent {
  color: #B5FE01;
  font-style: normal;
  transition: font-style .01s, transform .35s cubic-bezier(.2,.8,.2,1);
  display: inline-block;
}
.rob-accent:hover { font-style: italic; }

/* Ugyanez a viselkedés a "könyvelés" szóra a lap közepén, a saját
   (petrol) színével — ott nem kell színkiemelés, csak félkövér + dőlés. */
.rob-tilt { font-weight: 700; display: inline-block; transition: font-style .01s; }
.rob-tilt:hover { font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  .rob-accent, .rob-tilt { transition: none; }
}

/* Világos hátterű mottók színe — MÉRT javítás (2026-09-03).
   A korábbi #8E8B84 szürke kontrasztja mérve 2,21 (bézsen) és 3,40 (fehéren)
   volt, a szükséges 4,5 helyett — vagyis ezek a mondatok a kérés ELLENÉRE
   alig tűntek fel, és akadálymentességi szempontból is elbuktak. (Ez a hiba
   a mostani kérés ELŐTT is fennállt, csak most mértük meg.)
   A #085157 az arculat meglévő színe (a link-hover), mért kontraszt:
   5,88 bézsen és 8,9 fehéren. A sötét hátterű mottókat nem érinti. */
[data-motto]:not([data-motto-on="dark"]) { color: #085157 !important; }

/* ===== ABSZTRAKT KÖR-MOTÍVUM (szolgáltatások) ========================= */
/* Az ügyfél adta AbstractCircle.svg, arculati színekkel + saját mozgással.
   2026-09-03 (2. kör): "lehet még egy kicsit több szín és egy kicsit menőbb
   animáció". Az eredeti 21 rétege mind FEHÉR volt → a bézs háttéren
   láthatatlan lett volna, ezért fill="currentColor" és a szín innen jön. */
.rob-ac {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* ── Színek: 5 tónus, mind arculati ───────────────────────────────────── */
.rob-ac .c1 { color: rgba(8, 56, 60, .30); }    /* petrol, mély       */
.rob-ac .c2 { color: rgba(8, 81, 87, .34); }    /* petrol, világosabb */
.rob-ac .c3 { color: #B5FE01; }                 /* neonzöld (akcentus)*/
.rob-ac .c4 { color: rgba(142, 139, 132, .30); }/* meleg szürke       */
.rob-ac .c5 { color: rgba(14, 107, 112, .28); } /* köztes türkiz      */

/* ── Mozgás: 3 csoport, KÜLÖNBÖZŐ irány és sebesség ──────────────────── */
/* A 21 gyűrű i%3 szerint van 3 csoportba osztva, tehát mindegyikben van
   minden szögállásból. Az ellentétes irányú, eltérő sebességű forgás
   folyamatosan változó moiré-hatást ad — ez a "menőbb" rész. Lassú marad:
   a leggyorsabb csoport is 46 s alatt fordul körbe. */
@keyframes rob-ac-cw  { to { transform: rotate(360deg);  } }
@keyframes rob-ac-ccw { to { transform: rotate(-360deg); } }

.rob-ac .rob-ac-g { transform-origin: 123px 123px; }   /* a viewBox közepe */
.rob-ac .rob-ac-g1 { animation: rob-ac-cw  46s linear infinite; }
.rob-ac .rob-ac-g2 { animation: rob-ac-ccw 78s linear infinite; }
.rob-ac .rob-ac-g3 { animation: rob-ac-cw  120s linear infinite; }

/* A neonzöld gyűrűk halkan "lélegzenek", egymáshoz képest eltolva. */
@keyframes rob-ac-breathe { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.rob-ac .c3 { animation: rob-ac-breathe 7s ease-in-out infinite; }
.rob-ac .c3[data-i="7"]  { animation-delay: 1.8s; }
.rob-ac .c3[data-i="13"] { animation-delay: 3.5s; }
.rob-ac .c3[data-i="18"] { animation-delay: 5.2s; }

/* Mozgás-érzékenyeknél áll a kép (és a screenshot-mérés is így fut). */
@media (prefers-reduced-motion: reduce) {
  .rob-ac .rob-ac-g,
  .rob-ac .c3 { animation: none; }
}