/* ===== home.css ===== */ :root{ --green:#0E3517; --green-lite:#1C6B2C; --teal:#175A24; --teal-med:#2E7D3A; --dark-1:#021305; --dark-2:#06230B; --gray-1:#777777; --gray-2:#cccccc; --cream:#F7F6F3; --cream-2:#EEECE6; --warm:#F1E9DB; --white:#ffffff; --serif:'Cinzel',Georgia,serif; --sans:'Raleway',system-ui,sans-serif; --maxw:1180px; --r:18px; --shadow:0 20px 60px -20px rgba(14,53,23,.28); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} /* Védőháló a vízszintes túlcsorduláshoz — NEM a hibakeresés helyett. A body `overflow-x:hidden`-je önmagában csak a görgetést tiltja: a dokumentum ettől még szélesebb marad a képernyőnél, és a teljes szélességű hátterek (hero-kép, lábléc) nem érnek ki a jobb szélig — marad mellettük egy csík. A gyökéren `clip` ezt levágja. Miért `clip` és nem `hidden`: a hidden görgetődobozt csinálna, ami elronthatja a `position:sticky`-t; a clip nem csinál görgetődobozt, és a függőleges görgetést sem bántja (lemérve: a scrollingElement marad a html). A body-n a `hidden` tartaléknak marad a régi böngészőknek — azok a `clip` sort eldobják, és marad a korábbi viselkedés. */ html{overflow-x:clip} body{font-family:var(--sans);color:var(--dark-2);background:var(--cream);line-height:1.7;font-weight:400;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.2;color:var(--green)} a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .eyebrow{font-family:var(--sans);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:.72rem;color:var(--teal-med)} .btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.95rem;padding:.85em 1.7em;border-radius:100px;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s;cursor:pointer;border:none} .btn-primary{background:var(--teal);color:var(--white);box-shadow:0 8px 24px -8px rgba(14,53,23,.6)} .btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 30px -8px rgba(14,53,23,.7);background:var(--teal-med)} .btn-ghost{background:transparent;color:var(--green);border:1.5px solid rgba(14,53,23,.3)} .btn-ghost:hover{background:var(--green);color:var(--white);border-color:var(--green);transform:translateY(-3px)} /* ---- Nav ---- */ header{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .4s ease;padding:20px 0} header.scrolled{background:rgba(247,246,243,.85);backdrop-filter:blur(14px);padding:12px 0;box-shadow:0 4px 30px -12px rgba(0,0,0,.1)} .nav{display:flex;align-items:center;justify-content:space-between} .logo{display:flex;align-items:center;gap:.6em;font-family:var(--serif);font-weight:600;font-size:1.25rem;color:var(--green)} .logo img{height:52px;width:auto;display:block;transition:height .35s ease} header.scrolled .logo img{height:42px} .logo .dot{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--teal-med),var(--green));box-shadow:0 4px 14px -4px var(--teal);position:relative;flex:none} .logo .dot::after{content:"";position:absolute;inset:7px;border-radius:50%;border:2px solid rgba(255,255,255,.55)} .nav-links{display:flex;gap:2rem;align-items:center;font-weight:500;font-size:.92rem} .nav-links a{position:relative;padding:4px 0;color:var(--dark-2);transition:color .2s} .nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--teal-med);transition:width .3s} .nav-links a:hover{color:var(--green)}.nav-links a:hover::after{width:100%} .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none} .burger span{width:26px;height:2px;background:var(--green);transition:.3s} .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .lang{position:relative} .lang-btn{display:inline-flex;align-items:center;gap:.42em;background:transparent;border:1.5px solid var(--gray-2);border-radius:100px;padding:.4em .85em;font-family:var(--sans);font-weight:600;font-size:.82rem;color:var(--dark-2);cursor:pointer;transition:.2s} .lang-btn:hover{color:var(--green);border-color:var(--teal-med)} .lang-btn svg{opacity:.8} .lang-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:150px;background:var(--white);border-radius:12px;box-shadow:0 14px 34px -14px rgba(0,0,0,.28);padding:6px;display:none;flex-direction:column;z-index:130} .lang.open .lang-menu{display:flex} .lang-menu a{padding:.55em .8em;border-radius:8px;font-size:.9rem;color:var(--dark-2);cursor:pointer} .lang-menu a::after{display:none} .lang-menu a:hover{background:var(--cream-2);color:var(--green)} .lang-menu a[aria-current="true"]{color:var(--green);font-weight:700;cursor:default} /* ---- Hero ---- */ .hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-top:80px;overflow:hidden} .hero-bg{position:absolute;inset:0;z-index:0;background: radial-gradient(ellipse 60% 50% at 75% 30%,rgba(255,255,255,.07),transparent 70%), radial-gradient(ellipse 50% 60% at 20% 80%,rgba(28,107,44,.35),transparent 70%), linear-gradient(160deg,#1C6B2C 0%,#06230B 100%)} /* úszó baktériumok a hero hátterében — 5 morfológia, több irányból */ .bact{position:absolute;opacity:.2;will-change:transform;animation:travel var(--dur,54s) linear infinite;animation-delay:var(--del,0s)} .bact .wob{display:block;transform-origin:center;animation:wob var(--wob,4s) ease-in-out infinite alternate} .bact svg{display:block;width:100%;height:auto;overflow:visible} /* színek: alap = teal-med; .g = zöld; .t = teal */ .bact .b-body{fill:var(--teal-med)} .bact .b-stroke{stroke:var(--teal-med);fill:none;stroke-linecap:round;stroke-linejoin:round} .bact .b-fla{stroke:var(--teal-med);fill:none;stroke-linecap:round;opacity:.65;stroke-width:2.4} .bact .b-hi{fill:#fff;opacity:.3} .bact.g .b-body{fill:var(--green)}.bact.g .b-stroke,.bact.g .b-fla{stroke:var(--green)} .bact.t .b-body{fill:var(--teal)}.bact.t .b-stroke,.bact.t .b-fla{stroke:var(--teal)} @keyframes travel{from{transform:translate(var(--fx,0),var(--fy,0)) rotate(var(--rot,0deg))}to{transform:translate(var(--tx,120vw),var(--ty,0)) rotate(var(--rot,0deg))}} @keyframes wob{from{transform:rotate(-7deg) translateY(-3px)}to{transform:rotate(7deg) translateY(3px)}} @media(prefers-reduced-motion:reduce){.bact,.bact .wob{animation:none!important}} /* floating particles */ .particles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden} .particle{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(22,120,126,.9),rgba(14,53,23,.5));opacity:.35;animation:rise linear infinite} @keyframes rise{0%{transform:translateY(20px) scale(.6);opacity:0}12%{opacity:.4}100%{transform:translateY(-120px) scale(1.1);opacity:0}} /* shimmer on hero H1 */ .hero h1{background:linear-gradient(100deg,var(--green) 0%,var(--green) 40%,var(--teal-med) 50%,var(--green) 60%,var(--green) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 6s ease-in-out infinite} @keyframes shimmer{0%,100%{background-position:120% 0}50%{background-position:-20% 0}} /* animated eyebrow dot */ .eyebrow.live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--teal-med);margin-right:.6em;vertical-align:middle;animation:blink 2s ease-in-out infinite;box-shadow:0 0 0 0 rgba(22,120,126,.5)} @keyframes blink{0%,100%{box-shadow:0 0 0 0 rgba(22,120,126,.5)}50%{box-shadow:0 0 0 6px rgba(22,120,126,0)}} /* section-head animated underline */ .section-head h2{position:relative} /* card tilt/glow */ .icard,.cap,.member,.news{will-change:transform} .tilt{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s} /* marquee band */ .marquee{overflow:hidden;background:linear-gradient(90deg,var(--green),var(--teal));padding:14px 0;white-space:nowrap} .marquee__track{display:inline-block;animation:marq 28s linear infinite} .marquee span{color:rgba(255,255,255,.92);font-family:var(--serif);font-size:1.05rem;margin:0 26px} .marquee span::after{content:"·";margin-left:26px;opacity:.5} @keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* scroll cue */ .scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;width:26px;height:42px;border:2px solid rgba(14,53,23,.35);border-radius:14px;display:flex;justify-content:center;padding-top:7px} .scroll-cue::before{content:"";width:4px;height:8px;border-radius:4px;background:var(--teal-med);animation:cue 1.6s ease-in-out infinite} @keyframes cue{0%{opacity:0;transform:translateY(-4px)}30%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translateY(10px)}} /* kapcsolati űrlap (webhook) */ .contact-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:start} .contact-info h2{font-size:clamp(1.8rem,3vw,2.5rem);margin:.3em 0 .5em} .contact-info p{color:var(--gray-1);margin-bottom:1.4em} .contact-info .ci{margin-bottom:16px;font-size:.95rem}.contact-info .ci strong{color:var(--green);display:block;font-family:var(--serif);margin-bottom:.2em} .contact-info .social{display:flex;gap:10px;margin-top:12px} .contact-info .social a{width:38px;height:38px;border-radius:50%;background:var(--cream-2);display:flex;align-items:center;justify-content:center;color:var(--green);font-weight:700;transition:.2s;text-decoration:none} .contact-info .social a:hover{background:var(--green);color:#fff;transform:translateY(-2px)} .cform{background:var(--white);border-radius:20px;padding:38px;box-shadow:0 18px 54px -30px rgba(14,53,23,.45)} .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px} .fld{margin-bottom:16px} .fld label{display:block;font-size:.82rem;font-weight:600;color:var(--dark-2);margin-bottom:.3em} .fld input,.fld select,.fld textarea{width:100%;padding:.75em .9em;border:1.5px solid rgba(0,0,0,.1);border-radius:10px;font-family:var(--sans);font-size:.95rem;background:var(--cream);color:var(--dark-2);outline:none;transition:border .2s;line-height:1.5} .fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--teal-med)} .fld select{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:auto;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7770' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .85em center;background-size:15px;padding-right:2.5em} .fld textarea{resize:vertical;min-height:110px} .chk{display:flex;gap:.6em;align-items:flex-start;font-size:.85rem;color:var(--gray-1);margin:8px 0 18px} .chk input{width:16px;height:16px;flex:none;margin:.15em 0 0 0} .chk label{line-height:1.5} .form-status{margin-top:14px;font-size:.9rem;font-weight:600;min-height:1.2em} .form-status.ok{color:var(--green)}.form-status.err{color:#c0392b} @media(max-width:820px){.contact-wrap{grid-template-columns:1fr}.frow{grid-template-columns:1fr}} .hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;width:100%} .hero h1{font-size:clamp(2.4rem,5vw,4rem);margin:.4em 0 .3em;color:var(--green)} .hero .lead{font-size:1.2rem;color:var(--dark-2);max-width:36ch;margin-bottom:.5em} .hero .sub{font-family:var(--serif);font-size:1.05rem;color:var(--teal);margin-bottom:1.8em} .hero-cta{display:flex;gap:1rem;flex-wrap:wrap} /* sötét hero (#175A24) + fehér szöveg, a vizsgálat oldal fejléc-stílusa */ .hero{background:linear-gradient(160deg,#1C6B2C,#06230B);color:#fff} .hero .eyebrow{color:rgba(255,255,255,.75)} .hero h1{color:#fff;background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:#fff;animation:none} .hero .sub{font-family:var(--serif);font-size:1.3rem;color:rgba(255,255,255,.92);margin:0 0 .4em} .hero p{max-width:56ch;color:rgba(255,255,255,.85);margin:0 0 1.6em} .btn-p{background:var(--teal);color:#fff}.btn-p:hover{transform:translateY(-3px);background:var(--teal-med)} .btn-g{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}.btn-g:hover{background:#fff;color:var(--teal);transform:translateY(-3px)} .hero .btn-p{background:#1C6B2C}.hero .btn-p:hover{background:#1A8A82;transform:translateY(-3px)} .hero .ring{border-color:rgba(255,255,255,.30)} .hero .ring.r2{border-color:rgba(255,255,255,.22)} .hero .ring.r3{border-color:rgba(255,255,255,.14)} .hero .node{box-shadow:0 0 0 4px rgba(255,255,255,.20),0 6px 14px -4px rgba(0,0,0,.45)} /* fejléc a sötét hero fölött: fehér logó+menü, görgetéskor visszavált */ #hdr .logo .lg-w{display:none} #hdr:not(.scrolled) .logo .lg-g{display:none} #hdr:not(.scrolled) .logo .lg-w{display:block} #hdr:not(.scrolled) .nav-links>a{color:#fff} #hdr:not(.scrolled) .nav-links>a::after{background:#fff} #hdr:not(.scrolled) .lang-btn{color:#fff;border-color:rgba(255,255,255,.55)} #hdr:not(.scrolled) .burger span{background:#fff} #hdr:not(.scrolled) .nav-links.open>a{color:var(--dark-2)}#hdr:not(.scrolled) .nav-links.open>a::after{background:var(--teal-med)}#hdr:not(.scrolled) .nav-links.open .lang-btn{color:var(--dark-2);border-color:var(--gray-2)}#hdr:not(.scrolled) .nav-links.open .lang-menu a{color:var(--dark-2)} .orbit{position:relative;aspect-ratio:1;max-width:420px;margin:0 auto;width:100%} .orbit .core{position:absolute;inset:28%;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--teal-med),var(--green) 70%);box-shadow:var(--shadow),inset 0 -10px 30px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--serif);font-size:1.3rem;text-align:center;animation:pulse 5s ease-in-out infinite} @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}} .ring{position:absolute;inset:0;border-radius:50%;border:1.5px dashed rgba(22,120,126,.35)} .ring.r2{inset:12%;border-color:rgba(14,53,23,.3)} .ring.r3{inset:24%;border-style:solid;border-color:rgba(14,53,23,.12)} .spin{animation:spin 26s linear infinite}.spin.rev{animation-direction:reverse;animation-duration:34s} @keyframes spin{to{transform:rotate(360deg)}} .node{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--white);box-shadow:0 0 0 4px rgba(22,120,126,.25),0 6px 14px -4px var(--teal)} .node.n1{top:-8px;left:calc(50% - 8px)}.node.n2{right:-8px;top:calc(50% - 8px);background:var(--warm)}.node.n3{left:-8px;top:calc(50% - 8px);background:var(--warm)} /* ---- Sections ---- */ section{position:relative} .pad{padding:110px 0} .pad-sm{padding:80px 0} .center{text-align:center} .section-head{max-width:640px;margin:0 auto 60px} .section-head.left{margin-left:0} .section-head h2{font-size:clamp(1.9rem,3.5vw,2.8rem);margin:.3em 0} .section-head p{color:var(--gray-1);font-size:1.08rem} .bg-dark{background:linear-gradient(160deg,var(--dark-1),var(--dark-2));color:var(--cream-2)} .bg-dark h2,.bg-dark h3{color:var(--warm)} .bg-dark .section-head p{color:rgba(238,236,230,.7)} .bg-cream2{background:var(--cream-2)} .bg-warm{background:linear-gradient(160deg,#fbf7ef,#f3ece0)} /* reveal */ .reveal{opacity:0;transform:translateY(38px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s} /* intro cards */ .intro-grid,.cap-grid,.team-grid{perspective:1000px} .icard,.cap,.member{transform-style:preserve-3d} .intro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .icard{background:var(--white);border-radius:var(--r);padding:34px 30px;box-shadow:0 12px 40px -24px rgba(14,53,23,.35);border:1px solid rgba(14,53,23,.06);transition:transform .3s,box-shadow .3s} .icard:hover{transform:translateY(-6px);box-shadow:0 24px 50px -24px rgba(14,53,23,.4)} .icard .ic{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--teal-med),var(--green));display:flex;align-items:center;justify-content:center;margin-bottom:18px} .icard h3{font-size:1.25rem;margin-bottom:.4em} .icard p{color:var(--gray-1);font-size:.97rem} /* application areas */ .app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .app{position:relative;border-radius:var(--r);padding:28px 24px;min-height:190px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:linear-gradient(160deg,#0E4A50,#08282D);color:#fff;transition:transform .35s} .app:hover{transform:translateY(-6px)} .app.has-img{background-image:linear-gradient(180deg,rgba(2,19,5,.15),rgba(2,19,5,.86) 82%),var(--img);background-size:cover;background-position:center;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s} .app.has-img:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 22px 50px -24px rgba(14,53,23,.6)} .app::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 10%,rgba(22,120,126,.5),transparent 60%);opacity:.7} .app.has-img::before{opacity:.28} .app .num{position:absolute;top:18px;right:22px;font-family:var(--serif);font-size:2.4rem;opacity:.18;z-index:1} .app .arrow{position:absolute;bottom:20px;right:20px;width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;line-height:1;z-index:2;background:rgba(255,255,255,.10);transition:.3s} .app:hover .arrow{background:#fff;color:var(--green);border-color:#fff;transform:translateX(3px)} .app h3,.app p{padding-right:48px} .app h3{color:#fff;font-size:1.15rem;z-index:1;position:relative} .app p{font-size:.9rem;color:rgba(255,255,255,.78);z-index:1;position:relative;margin-top:.3em} .app .soon{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(241,233,219,.2);color:var(--warm);padding:.25em .7em;border-radius:100px;margin-top:.8em;width:fit-content;z-index:1;position:relative} /* capsules */ .cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .cap{background:var(--white);border-radius:var(--r);padding:32px 28px;border-top:4px solid var(--teal-med);box-shadow:0 14px 44px -28px rgba(14,53,23,.4);transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column} .cap:hover{transform:translateY(-8px);box-shadow:0 28px 56px -28px rgba(14,53,23,.5)} .cap:nth-child(2n){border-top-color:var(--green)} .cap:nth-child(3n){border-top-color:var(--teal)} .cap .cap-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.6em} .cap h3{font-size:1.5rem} .cap .qty{font-size:.8rem;font-weight:600;color:var(--teal-med);background:var(--cream-2);padding:.3em .8em;border-radius:100px;white-space:nowrap} .cap ul{list-style:none;margin:.6em 0 1.4em;flex:1} .cap li{position:relative;padding-left:1.5em;margin-bottom:.7em;font-size:.94rem;color:var(--dark-2)} .cap li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--teal-med)} .cap .more{font-weight:600;color:var(--green);display:inline-flex;align-items:center;gap:.4em;transition:gap .25s} .cap .more:hover{gap:.75em} .disclaimer{max-width:820px;margin:44px auto 0;font-size:.85rem;color:var(--gray-1);font-style:italic;text-align:center;border-top:1px solid rgba(0,0,0,.08);padding-top:24px} /* book hub */ .books-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px} .book{position:relative;border-radius:var(--r);overflow:hidden;padding:40px 36px;min-height:230px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;transition:transform .35s,box-shadow .35s;box-shadow:0 18px 50px -26px rgba(0,0,0,.5)} .book:hover{transform:translateY(-8px);box-shadow:0 30px 66px -26px rgba(0,0,0,.55)} .book.b1{background:linear-gradient(150deg,#1f5a4a,#0f3329)} .book.b2{background:linear-gradient(150deg,#0a5566,#053743)} .book.b3{background:linear-gradient(150deg,#5a4a1f,#332810)} .book.b4{background:linear-gradient(150deg,#cd191c,#700d0f)} .book.b5{background:linear-gradient(150deg,#1C6B2C,#06230B)} .book{padding:42px 38px;min-height:280px} .book::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.06);top:-70px;right:-40px} .book .tag{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.78;position:relative} .book h2{color:#fff;font-size:1.9rem;margin:.4em 0 .3em;position:relative} .book .desc{font-size:.96rem;color:rgba(255,255,255,.85);max-width:40ch;position:relative} .book .meta{display:flex;gap:22px;margin-top:26px;position:relative} .book .meta .n{font-family:var(--serif);font-size:1.6rem;color:#fff;line-height:1} .book .meta .l{font-size:.78rem;color:rgba(255,255,255,.7)} .book .arrow{position:absolute;bottom:38px;right:38px;width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;transition:.3s;z-index:2}.book .soon{position:absolute;bottom:38px;right:38px;padding:.5em 1.15em;border-radius:100px;border:1.5px solid rgba(255,255,255,.5);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;z-index:2} .book:hover .arrow{background:#fff;color:#111;border-color:#fff;transform:translateX(4px)} .book .spine{position:absolute;top:0;left:0;bottom:0;width:6px;background:rgba(255,255,255,.35)} .book .b-tag{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.75} .book h3{color:#fff;font-size:1.7rem;margin:.5em 0 .3em} .book p{font-size:.94rem;color:rgba(255,255,255,.82);max-width:38ch} .book .b-meta{display:flex;align-items:center;gap:1em;margin-top:1.4em;font-size:.85rem;opacity:.85} .book .b-arrow{position:absolute;bottom:34px;right:36px;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;transition:.3s} .book:hover .b-arrow{background:#fff;color:var(--dark-1);border-color:#fff} .cap .b-arrow{margin-top:auto;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(14,53,23,.35);display:flex;align-items:center;justify-content:center;color:var(--green);font-size:1.15rem;transition:.3s;text-decoration:none} .cap:hover .b-arrow{background:var(--green);color:#fff;border-color:var(--green);transform:translateX(3px)} .news img.thumb{height:150px;width:100%;object-fit:cover;display:block} /* safety strip */ .safety{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center} .safety-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px} .stat{background:rgba(255,255,255,.05);border:1px solid rgba(241,233,219,.14);border-radius:14px;padding:26px} .stat .n{font-family:var(--serif);font-size:2.6rem;color:var(--warm);line-height:1} .stat .l{font-size:.88rem;color:rgba(238,236,230,.7);margin-top:.4em} /* team */ .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .member{background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:0 12px 40px -26px rgba(14,53,23,.4);transition:transform .3s} .member:hover{transform:translateY(-6px)} .member .portrait{width:100%;height:320px;object-fit:cover;object-position:center 12%;display:block;background:linear-gradient(135deg,var(--teal-med),var(--green));transition:transform .5s} .member:hover .portrait{transform:scale(1.04)} .member .body{padding:22px 24px 26px} .member .av{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--teal-med),var(--green));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.5rem;margin-bottom:16px} .member h4{font-size:1.1rem;color:var(--green);margin-bottom:.15em} .member .role{font-size:.8rem;font-weight:600;color:var(--teal-med);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.8em} .member p{font-size:.88rem;color:var(--gray-1)} /* news */ .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .news{background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:0 14px 44px -28px rgba(14,53,23,.4);transition:transform .3s} .news:hover{transform:translateY(-6px)} .news .thumb{height:150px;background:linear-gradient(135deg,var(--teal-med),var(--green));position:relative;overflow:hidden} .news:nth-child(2) .thumb{background:linear-gradient(135deg,var(--teal),var(--green-lite))} .news:nth-child(3) .thumb{background:linear-gradient(135deg,var(--green),var(--teal-med))} .news .thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.25),transparent 60%)} .news .body{padding:24px} .news .date{font-size:.78rem;color:var(--teal-med);font-weight:600} .news h4{font-size:1.1rem;margin:.4em 0;color:var(--green);line-height:1.3} .news p{font-size:.88rem;color:var(--gray-1)} /* CTA band */ .cta-band{background:linear-gradient(135deg,var(--teal),var(--green));border-radius:26px;padding:64px 48px;text-align:center;color:#fff;position:relative;overflow:hidden} .cta-band::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.08);top:-100px;right:-60px} .cta-band h2{color:#fff;font-size:clamp(1.8rem,3vw,2.6rem);position:relative} .cta-band p{max-width:50ch;margin:1em auto 1.8em;color:rgba(255,255,255,.9);position:relative} /* footer */ footer{background:var(--dark-1);color:rgba(238,236,230,.7);padding:70px 0 32px} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px} footer h5{color:var(--warm);font-family:var(--sans);font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.2em} footer a{display:block;padding:.35em 0;font-size:.92rem;transition:color .2s} footer a:hover{color:var(--warm)} .foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 18px;text-align:center;font-size:.82rem;opacity:.6} /* progress bar */ .progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--teal-med),var(--green));z-index:200;width:0} @media(max-width:900px){ .hero-inner{grid-template-columns:1fr;gap:30px}.orbit{max-width:300px;order:-1}.hero{padding-bottom:64px} .intro-grid,.cap-grid,.news-grid{grid-template-columns:1fr} .app-grid{grid-template-columns:1fr 1fr}.books-grid{grid-template-columns:1fr} .team-grid{grid-template-columns:1fr 1fr}.safety{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr} .nav-links{display:none}.burger{display:flex} .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:1.1rem;background:rgba(247,246,243,.98);backdrop-filter:blur(14px);padding:20px 24px 24px;box-shadow:0 16px 34px -16px rgba(0,0,0,.22);border-top:1px solid rgba(0,0,0,.06)} .nav-links.open .lang-menu{position:static;box-shadow:none;padding:4px 0 0 0;min-width:0} .nav-links.open .lang-btn{margin-bottom:.2em} .pad{padding:70px 0} } @media(max-width:520px){.app-grid,.team-grid,.foot-grid{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}} /* kapszula-márkaszínek: felső szegély + kapszulanév */ .cap-grid .cap.c-find{border-top-color:#d59511}.cap-grid .cap.c-find h3{color:#c0860f} .cap-grid .cap.c-diff{border-top-color:#cd191c}.cap-grid .cap.c-diff h3{color:#cd191c} .cap-grid .cap.c-transfer{border-top-color:#2E7D3A}.cap-grid .cap.c-transfer h3{color:#2E7D3A} .cap-grid .cap.c-hosp{border-top-color:#1a4084}.cap-grid .cap.c-hosp h3{color:#1a4084} .cap-grid .cap.c-ultra{border-top-color:#ffd800}.cap-grid .cap.c-ultra h3{color:#a88f00} .cap-grid .cap.c-auto{border-top-color:#1f5a4a}.cap-grid .cap.c-auto h3{color:#1f5a4a} /*FORMUX*/.chk input[type=checkbox]{accent-color:var(--green);width:1.05em;height:1.05em;flex:none;margin-top:.15em;cursor:pointer}.chk input[type=checkbox].bad{outline:2px solid #dc2626;outline-offset:2px;border-radius:3px}.chk-err{display:none;color:#dc2626;font-size:.78rem;line-height:1.5;margin:-.35em 0 .6em;padding-left:1.7em}.req{color:#dc2626;font-weight:700;margin-left:.2em}.req-note{font-size:.8rem;color:var(--gray,#777777);margin:0 0 1.2em}/*/FORMUX*/ #gyik{background:linear-gradient(150deg,#1C6B2C,#06230B);color:var(--cream-2,#EEECE6)}#gyik .eyebrow{color:rgba(238,236,230,.72)}#gyik h2{color:var(--warm,#F1E9DB)}#gyik .faq-item{border-bottom:1px solid rgba(255,255,255,.16)}#gyik .faq-item[open]{background:rgba(255,255,255,.06);border-radius:12px;padding:0 18px;margin:0 -18px}#gyik .faq-item summary{cursor:pointer;list-style:none;padding:1.15em 2.2em 1.15em 0;position:relative;font-family:var(--serif);font-weight:500;font-size:1.12rem;color:var(--warm,#F1E9DB);line-height:1.4}#gyik .faq-item summary::-webkit-details-marker{display:none}#gyik .faq-item summary::after{content:'+';position:absolute;right:.2em;top:.72em;font-family:var(--sans);font-weight:400;font-size:1.5rem;color:rgba(238,236,230,.65)}#gyik .faq-item[open] summary::after{content:'\2212'}#gyik .faq-item .a{padding:0 0 1.3em;color:rgba(238,236,230,.86);line-height:1.8;max-width:72ch}#gyik .btn-ghost{color:var(--warm,#F1E9DB);border-color:rgba(255,255,255,.4)}#gyik .btn-ghost:hover{background:var(--warm,#F1E9DB);color:#0E3517;border-color:var(--warm,#F1E9DB)}@media(max-width:640px){#gyik .faq-item summary{font-size:1.02rem}} /* ── 2026-08-01: kapszulakártya-nyíl és a kapszula-sűrűség gomb ──────────── A nyíl az alkalmazási területek kártyáival egyezően a JOBB oldalra kerül (oszlopirányú flexben a bal oldali automatikus margó tolja át), és a hero türkiz színét (#1C6B2C) veszi fel a korábbi zöld helyett. Ugyanez a türkiz lesz a kapszula-sűrűség gomb hover-háttere is. */ .cap .b-arrow{margin-left:auto;border-color:rgba(28,107,44,.35);color:#1C6B2C} .cap:hover .b-arrow{background:#1C6B2C;border-color:#1C6B2C;color:#fff} #kapszulak .btn-ghost{color:#1C6B2C;border-color:rgba(28,107,44,.35)} #kapszulak .btn-ghost:hover{background:#1C6B2C;border-color:#1C6B2C;color:#fff} /* ═══ MOBIL MENU 2026-08-01 ══════════════════════════════════════════════════════ Jobbrol beuszo panel a korabbi legordulo lista helyett; a nyelvvalaszto egysoros valasztosav lesz. A jeloles valtozatlan, minden stilusbol tortenik. */ @media(max-width:820px){ /* A fejlec (logo) es a hero elso sora kozott legyen levegő, hogy a logo kulon egysegkent latszodjon. Csak mobilon, az asztali nezet valtozatlan. */ .hero{padding-top:132px} #hdr:has(.nav-links.open)::before{content:'';position:fixed;inset:0; background:rgba(5,32,38,.45);backdrop-filter:blur(3px);z-index:-1} /* A beuszo panel `position:fixed`. A `backdrop-filter` viszont TARTALMAZO BLOKKOT csinal a fixed leszarmazottaknak — ilyenkor a panel nem a kepernyohoz, hanem a FEJLEC dobozahoz igazodik, es arra is zsugorodik: a menupontok kilognak belole, csak a nyelvsor latszik (az `order:-1` miatt az all elol). Gorgetes utan `#hdr.sc`/`.scrolled` kap blurt, ezert jelentkezett a hiba csak a lap tetejerol elgorgetve. Amig a menu nyitva van, a fejlecrol levesszuk a blurt — a panel es a sotetito reteg amugy is eltakarja. 2026-08-02. */ #hdr:has(.nav-links.open),#hdr.sc:has(.nav-links.open), #hdr.scrolled:has(.nav-links.open){ backdrop-filter:none!important;-webkit-backdrop-filter:none!important; filter:none!important;transform:none!important; /* transition nelkul: a #hdr .35s-es atmenete kulonben a blur(12px)→none uton vinne at, es amig a blur > none, a panel meg mindig osszecsuklik. */ transition:none!important; background:rgba(247,246,243,.98)!important} #hdr .nav-links{position:fixed!important;top:0!important;right:0!important; align-items:stretch!important; bottom:0!important;left:auto!important; width:min(330px,86vw);display:flex!important;flex-direction:column;align-items:stretch; gap:0!important;background:var(--white,#fff)!important;backdrop-filter:none!important; padding:74px 0 24px!important;border-top:none;overflow-y:auto;overscroll-behavior:contain; box-shadow:-20px 0 60px -20px rgba(0,0,0,.4); transform:translateX(101%);transition:transform .38s cubic-bezier(.22,.8,.28,1)} #hdr .nav-links.open{transform:none} #hdr .nav-links>a{display:flex;align-items:center;gap:14px;position:relative; padding:13px 20px 13px 20px!important;margin:0 10px;border-radius:14px; font-weight:600;font-size:1.02rem;color:var(--dark-2)!important;width:auto; transition:background .18s} #hdr .nav-links>a:hover{background:rgba(28,107,44,.07)} #hdr .nav-links>a::before{content:'';flex:0 0 auto;width:34px;height:34px; border-radius:10px;background:var(--cream-2,#EEECE6);transition:background .18s; position:static;opacity:1} #hdr .nav-links>a::after{content:'';position:absolute!important;left:28px!important; top:50%!important;bottom:auto!important;right:auto!important; width:18px!important;height:18px!important;margin-top:-9px;background:#1C6B2C!important; -webkit-mask:var(--mi) center/18px 18px no-repeat;mask:var(--mi) center/18px 18px no-repeat; transition:background .18s} #hdr .nav-links>a:hover::before{background:#1C6B2C} #hdr .nav-links>a:hover::after{background:#fff!important} /* ── Bezaro gomb ────────────────────────────────────────────── Nyitott allapotban a hamburger korbe zart X lesz a panel jobb felso sarkaban. Eddig a `#hdr:not(.scrolled) .burger span{background:#fff}` szabaly miatt feher X allt a feher panelen, vagyis lathatatlan volt — ezert kell a szinre !important. */ #hdr .burger{position:relative;z-index:5} #hdr .burger.open{position:fixed;top:13px;right:13px;width:40px;height:40px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; border-radius:50%;border:1px solid rgba(14,53,23,.18)!important; background:#fff!important;box-shadow:0 6px 18px -8px rgba(0,0,0,.35);z-index:8} #hdr .burger.open span{width:17px;background:#1C6B2C!important} #hdr .nav-links .lang{order:-1;margin:0 20px 14px;padding:0;position:static; display:block!important;width:auto;align-self:stretch!important} #hdr .nav-links .lang-btn{display:none!important} #hdr .nav-links .lang-menu{display:flex!important;position:static!important;flex-wrap:nowrap; flex-direction:row!important;gap:6px;box-shadow:none;background:none;padding:0; min-width:0;border:none;width:100%} #hdr .nav-links .lang-menu a{flex:1 1 0;text-align:center;padding:.55em .2em;border-radius:10px; border:1px solid rgba(14,53,23,.16);font-size:.7rem;font-weight:700;letter-spacing:.02em; color:var(--gray-1,#777777)!important;white-space:nowrap;transition:.18s;font-size:0!important} #hdr .nav-links .lang-menu a::before{font-size:.76rem;font-weight:700;letter-spacing:.06em} #hdr .nav-links .lang-menu a:hover{border-color:#1C6B2C;color:#1C6B2C;background:none} /* Az aktív nyelv: türkiz háttér, fehér betű. !important kell, mert a fejléc saját `#hdr:not(.scrolled) .nav-links.open .lang-menu a` szabálya (id + négy osztály) magasabb fajsúlyú, mint az itteni szelektor. */ #hdr .nav-links .lang-menu a[aria-current]{background:#1C6B2C!important; border-color:#1C6B2C!important;color:#fff!important} #hdr .nav-links .lang-menu a[aria-current]::before{color:#fff!important} /* ── A menu labjegyzete: turkiz valasztovonal + szlogen ──────── A tartalom CSS-bol jon, hogy ne kelljen 2799 oldal jeloleset atirni. `margin-top:auto` — a panel aljara kerul, a Kapcsolat ala. */ #hdr .nav-links::after{content:"FarmAtlas – Find your farm";display:block;margin:26px 20px 4px;margin-top:auto; padding-top:15px;border-top:1px solid #1C6B2C; font-size:.76rem;font-weight:600;letter-spacing:.01em;line-height:1.4; color:#1C6B2C;text-align:center} html[lang="hu"] #hdr .nav-links::after{content:"FarmAtlas – Találd meg a gazdaságod"} html[lang="en"] #hdr .nav-links::after{content:"FarmAtlas – Find your farm"} html[lang="de"] #hdr .nav-links::after{content:"FarmAtlas – Finde deinen Hof"} html[lang="es"] #hdr .nav-links::after{content:"FarmAtlas – Encuentra tu granja"} html[lang="fr"] #hdr .nav-links::after{content:"FarmAtlas – Trouvez votre ferme"} } @media(max-width:820px){ /* Tartalek: ha egy hivatkozasra nincs ikonunk, ures maszk keruljon ra — `--mi` nelkul a `mask` ervenytelen, es tomor turkiz negyzet latszana. */ #hdr .nav-links>a{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="cservolgymajor-modern"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.2%2010.6%2012%203.2l8.8%207.4%22%2F%3E%3Cpath%20d%3D%22M5.6%209.6V20.4h12.8V9.6%22%2F%3E%3Cpath%20d%3D%22M9.6%2020.4v-5.8h4.8v5.8%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="analisis-del-microbioma"], #hdr .nav-links>a[href*="analyse-du-microbiote"], #hdr .nav-links>a[href*="microbiome-testing"], #hdr .nav-links>a[href*="mikrobiom-analyse"], #hdr .nav-links>a[href*="mikrobioma-vizsgalat"], #hdr .nav-links>a[href*="#folyamat"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.5%202.5h5%22%2F%3E%3Cpath%20d%3D%22M10.5%202.5v6.4L5%2018.4A2.9%202.9%200%200%200%207.5%2022.5h9A2.9%202.9%200%200%200%2019%2018.4l-5.5-9.5V2.5%22%2F%3E%3Cpath%20d%3D%22M7.4%2015.2h9.2%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="#szolgaltatasok"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.6%22%20y%3D%228%22%20width%3D%2218.8%22%20height%3D%228%22%20rx%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%208v8%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="become-a-donor"], #hdr .nav-links>a[href*="devenez-donneur"], #hdr .nav-links>a[href*="donor"], #hdr .nav-links>a[href*="legyen-on-is-donor"], #hdr .nav-links>a[href*="sea-donante"], #hdr .nav-links>a[href*="donor"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020.6S4.6%2015.9%204.6%2011a4%204%200%200%201%207.4-2.4A4%204%200%200%201%2019.4%2011c0%204.9-7.4%209.6-7.4%209.6z%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="base-de-connaissances"], #hdr .nav-links>a[href*="base-de-conocimiento"], #hdr .nav-links>a[href*="books/"], #hdr .nav-links>a[href*="knowledgebase"], #hdr .nav-links>a[href*="tudastar"], #hdr .nav-links>a[href*="gyik"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.6%204.6h5.6a2.9%202.9%200%200%201%202.8%202%202.9%202.9%200%200%201%202.8-2h5.6v13.4h-5.6a2.9%202.9%200%200%200-2.8%202%202.9%202.9%200%200%200-2.8-2H3.6z%22%2F%3E%3Cpath%20d%3D%22M12%206.6v13.4%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="blog"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020.4v-3.6L15%205.8l3.6%203.6-11%2011H4z%22%2F%3E%3Cpath%20d%3D%22M13.4%207.4%2017%2011%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="csapat.html"], #hdr .nav-links>a[href*="csapatunk"], #hdr .nav-links>a[href*="notre-equipe"], #hdr .nav-links>a[href*="nuestro-equipo"], #hdr .nav-links>a[href*="our-team"], #hdr .nav-links>a[href*="csapat"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228.4%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2020.2c0-3.3%202.7-5.6%206-5.6s6%202.3%206%205.6%22%2F%3E%3Cpath%20d%3D%22M16.4%206a3%203%200%200%201%200%205.8%22%2F%3E%3Cpath%20d%3D%22M18%2014.8c1.9.8%203%202.6%203%205.2%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="contact"], #hdr .nav-links>a[href*="contacto"], #hdr .nav-links>a[href*="kapcsolat"], #hdr .nav-links>a[href*="kapcsolat.html"], #hdr .nav-links>a[href*="kapcsolat"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.4%203.4h3l1.7%204.1-2%201.4a11.6%2011.6%200%200%200%205%205l1.4-2%204.1%201.7v3a2%202%200%200%201-2.2%202A16.6%2016.6%200%200%201%204.4%205.6a2%202%200%200%201%202-2.2z%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href="/hu/"], #hdr .nav-links>a[href="/en/"], #hdr .nav-links>a[href="/de/"], #hdr .nav-links>a[href="/es/"], #hdr .nav-links>a[href="/fr/"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.2%2010.6%2012%203.2l8.8%207.4%22%2F%3E%3Cpath%20d%3D%22M5.6%209.6V20.4h12.8V9.6%22%2F%3E%3Cpath%20d%3D%22M9.6%2020.4v-5.8h4.8v5.8%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links .lang-menu a[href$="microbiomebank-modern.html"]::before, #hdr .nav-links .lang-menu a[href*="/hu/"]::before{content:"HU"} html[lang="hu"] #hdr .nav-links .lang-menu a[aria-current]::before{content:"HU"} #hdr .nav-links .lang-menu a[href*="-en.html"]::before, #hdr .nav-links .lang-menu a[href*="/en/"]::before{content:"EN"} html[lang="en"] #hdr .nav-links .lang-menu a[aria-current]::before{content:"EN"} #hdr .nav-links .lang-menu a[href*="-de.html"]::before, #hdr .nav-links .lang-menu a[href*="/de/"]::before{content:"DE"} html[lang="de"] #hdr .nav-links .lang-menu a[aria-current]::before{content:"DE"} #hdr .nav-links .lang-menu a[href*="-es.html"]::before, #hdr .nav-links .lang-menu a[href*="/es/"]::before{content:"ES"} html[lang="es"] #hdr .nav-links .lang-menu a[aria-current]::before{content:"ES"} #hdr .nav-links .lang-menu a[href*="-fr.html"]::before, #hdr .nav-links .lang-menu a[href*="/fr/"]::before{content:"FR"} html[lang="fr"] #hdr .nav-links .lang-menu a[aria-current]::before{content:"FR"} } /* ── Cservolgy Major: a mobil menu ikonjai a data-nav attributumra ─────────── */ #hdr .nav-links>a[data-nav="home"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.2%2010.6%2012%203.2l8.8%207.4%22%2F%3E%3Cpath%20d%3D%22M5.6%209.6V20.4h12.8V9.6%22%2F%3E%3Cpath%20d%3D%22M9.6%2020.4v-5.8h4.8v5.8%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="docs"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.5%202.5h5%22%2F%3E%3Cpath%20d%3D%22M10.5%202.5v6.4L5%2018.4A2.9%202.9%200%200%200%207.5%2022.5h9A2.9%202.9%200%200%200%2019%2018.4l-5.5-9.5V2.5%22%2F%3E%3Cpath%20d%3D%22M7.4%2015.2h9.2%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="offer"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.6%22%20y%3D%228%22%20width%3D%2218.8%22%20height%3D%228%22%20rx%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%208v8%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="vision"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020.6S4.6%2015.9%204.6%2011a4%204%200%200%201%207.4-2.4A4%204%200%200%201%2019.4%2011c0%204.9-7.4%209.6-7.4%209.6z%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="faq"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.6%204.6h5.6a2.9%202.9%200%200%201%202.8%202%202.9%202.9%200%200%201%202.8-2h5.6v13.4h-5.6a2.9%202.9%200%200%200-2.8%202%202.9%202.9%200%200%200-2.8-2H3.6z%22%2F%3E%3Cpath%20d%3D%22M12%206.6v13.4%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="blog"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020.4v-3.6L15%205.8l3.6%203.6-11%2011H4z%22%2F%3E%3Cpath%20d%3D%22M13.4%207.4%2017%2011%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="micro"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228.4%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2020.2c0-3.3%202.7-5.6%206-5.6s6%202.3%206%205.6%22%2F%3E%3Cpath%20d%3D%22M16.4%206a3%203%200%200%201%200%205.8%22%2F%3E%3Cpath%20d%3D%22M18%2014.8c1.9.8%203%202.6%203%205.2%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="contact"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.4%203.4h3l1.7%204.1-2%201.4a11.6%2011.6%200%200%200%205%205l1.4-2%204.1%201.7v3a2%202%200%200%201-2.2%202A16.6%2016.6%200%200%201%204.4%205.6a2%202%200%200%201%202-2.2z%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="lang"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.2%2010.6%2012%203.2l8.8%207.4%22%2F%3E%3Cpath%20d%3D%22M5.6%209.6V20.4h12.8V9.6%22%2F%3E%3Cpath%20d%3D%22M9.6%2020.4v-5.8h4.8v5.8%22%2F%3E%3C%2Fsvg%3E")} /* ===== shell.css ===== */ /* MicroBiome Bank — közös fejléc + lábléc (a főoldallal megegyező), minden aloldalon. Utoljára betöltve, #hdr / .sitefoot specifikussággal felülírja az oldal saját stílusát. */ :root{--green:#0E3517;--green-lite:#1C6B2C;--teal:#175A24;--teal-med:#2E7D3A;--dark-1:#021305;--dark-2:#06230B;--gray-1:#777777;--gray-2:#cccccc;--cream:#F7F4EF;--cream-2:#EEECE6;--warm:#F1E9DB;--white:#ffffff;--serif:'Cinzel',Georgia,serif;--sans:'Raleway',system-ui,sans-serif} /* ---- fejléc ---- */ #hdr{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .4s ease;padding:20px 0;background:transparent;box-shadow:none;backdrop-filter:none} #hdr.scrolled,#hdr.sc{background:rgba(247,244,239,.9)!important;backdrop-filter:blur(14px);padding:12px 0;box-shadow:0 4px 30px -12px rgba(0,0,0,.1)} #hdr .nav{display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:0 auto;padding:0 24px} #hdr .logo{display:flex;align-items:center;gap:.6em;font-family:var(--serif);font-weight:600;font-size:1.25rem;color:var(--green);text-decoration:none} #hdr .logo img{height:52px;width:auto;display:block;transition:height .35s ease;border-radius:0} #hdr.scrolled .logo img,#hdr.sc .logo img{height:42px} #hdr .logo .lg-w{display:none} #hdr.dark .logo .lg-g{display:none} #hdr.dark .logo .lg-w{display:block} #hdr.dark.scrolled .logo .lg-g,#hdr.dark.sc .logo .lg-g{display:block} #hdr.dark.scrolled .logo .lg-w,#hdr.dark.sc .logo .lg-w{display:none} /* sötét fejléc: fehér menü + nyelvválasztó + aláhúzás (görgetéskor visszavált sötétre) */ #hdr.dark .nav-links>a{color:#fff} #hdr.dark .nav-links>a::after{background:#fff} #hdr.dark .nav-links>a:hover{color:#fff} #hdr.dark .lang-btn{color:#fff;border-color:rgba(255,255,255,.55)} #hdr.dark .lang-btn:hover{color:#fff;border-color:#fff} #hdr.dark .burger span{background:#fff} /* mobil: nyitott hamburger-menü világos panelen — mindig sötét betű */ #hdr.dark .nav-links.open>a{color:var(--dark-2)} #hdr.dark .nav-links.open>a:hover{color:var(--green)} #hdr.dark .nav-links.open>a::after{background:var(--teal-med)} #hdr.dark .nav-links.open .lang-btn{color:var(--dark-2);border-color:var(--gray-2)} #hdr.dark .nav-links.open .lang-menu a{color:var(--dark-2)} #hdr.dark.scrolled .nav-links>a,#hdr.dark.sc .nav-links>a{color:var(--dark-2)} #hdr.dark.scrolled .nav-links>a:hover,#hdr.dark.sc .nav-links>a:hover{color:var(--green)} #hdr.dark.scrolled .nav-links>a::after,#hdr.dark.sc .nav-links>a::after{background:var(--teal-med)} #hdr.dark.scrolled .lang-btn,#hdr.dark.sc .lang-btn{color:var(--dark-2);border-color:var(--gray-2)} #hdr.dark.scrolled .burger span,#hdr.dark.sc .burger span{background:var(--green)} #hdr .nav-links{display:flex;gap:2rem;align-items:center;font-weight:500;font-size:.92rem} #hdr .nav-links>a{position:relative;padding:4px 0;color:var(--dark-2);text-decoration:none;transition:color .2s} #hdr .nav-links>a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--teal-med);transition:width .3s} #hdr .nav-links>a:hover{color:var(--green)}#hdr .nav-links>a:hover::after{width:100%} #hdr .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none} #hdr .burger span{display:block;width:26px;height:2px;background:var(--green);transition:.3s} #hdr .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} #hdr .burger.open span:nth-child(2){opacity:0} #hdr .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} #hdr .lang{position:relative} #hdr .lang-btn{display:inline-flex;align-items:center;gap:.42em;background:transparent;border:1.5px solid var(--gray-2);border-radius:100px;padding:.4em .85em;font-family:var(--sans);font-weight:600;font-size:.82rem;color:var(--dark-2);cursor:pointer;transition:.2s} #hdr .lang-btn:hover{color:var(--green);border-color:var(--teal-med)} #hdr .lang-btn svg{opacity:.8} #hdr .lang-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:150px;background:var(--white);border-radius:12px;box-shadow:0 14px 34px -14px rgba(0,0,0,.28);padding:6px;display:none;flex-direction:column;z-index:130} #hdr .lang.open .lang-menu{display:flex} #hdr .lang-menu a{padding:.55em .8em;border-radius:8px;font-size:.9rem;color:var(--dark-2);cursor:pointer;text-decoration:none} #hdr .lang-menu a:hover{background:var(--cream-2);color:var(--green)} #hdr .lang-menu a[aria-current="true"]{color:var(--green);font-weight:700;cursor:default} /* ---- lábléc ---- */ footer.sitefoot{background:var(--dark-1);color:rgba(238,236,230,.7);padding:70px 0 32px;margin-top:0;text-align:left} footer.sitefoot .foot-grid>div{text-align:left} footer.sitefoot .wrap{max-width:1180px;margin:0 auto;padding:0 24px} footer.sitefoot .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px} footer.sitefoot h5{color:var(--warm);font-family:var(--sans);font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.2em} footer.sitefoot a{display:block;padding:.35em 0;font-size:.92rem;color:rgba(238,236,230,.7);text-decoration:none;transition:color .2s} footer.sitefoot a:hover{color:var(--warm)} footer.sitefoot p{font-size:.9rem;line-height:1.7;color:rgba(238,236,230,.7)} footer.sitefoot .logo img{height:46px;width:auto;border-radius:0} /* 2026-08-03: a lábléc alsó sávja. Eddig a SOR kapott `opacity:.6`-ot, a három hivatkozás pedig `color:inherit`-et — ettől (a) pontosan olyan színűek voltak, mint a szerzői jogi felirat mellettük, és (b) a `footer.sitefoot a:hover{color:var(--warm)}` sem érvényesült rajtuk, mert a `.foot-bottom a` szabály fajsúlyosabb. Így a hover teljesen néma volt. Most a sor szövege halványabb, a három hivatkozás pedig a lábléc többi aktív linkjének színét és hover-viselkedését kapja. */ footer.sitefoot .foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 18px;text-align:center;font-size:.82rem;color:rgba(238,236,230,.42)} footer.sitefoot .foot-bottom a, footer.sitefoot .foot-bottom .cc-reopen{display:inline;color:rgba(238,236,230,.7)} footer.sitefoot .foot-bottom a:hover, footer.sitefoot .foot-bottom .cc-reopen:hover{color:var(--warm);text-decoration:none} @media(max-width:820px){ footer.sitefoot .foot-grid{grid-template-columns:1fr 1fr} #hdr .nav-links{display:none;gap:1.1rem} #hdr .burger{display:flex} #hdr .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;background:rgba(247,244,239,.98);backdrop-filter:blur(14px);padding:20px 24px 24px;box-shadow:0 16px 34px -16px rgba(0,0,0,.22);border-top:1px solid rgba(0,0,0,.06)} #hdr .nav-links.open .lang-menu{position:static;box-shadow:none;padding:4px 0 0;min-width:0} } @media(max-width:520px){footer.sitefoot .foot-grid{grid-template-columns:1fr}} /* ═══ MOBIL MENÜ (2026-08-01) ══════════════════════════════════════════════ Jobbról beúszó panel a korábbi legördülő lista helyett. A jelölés változatlan — minden itt, stílusból történik, ezért nem kellett a 2799 oldalt újragenerálni. A nyelvválasztó kikerül a legördülőből: egysoros választósáv lesz belőle, az aktuális nyelv kiemelve. */ @media(max-width:820px){ /* sötétítő háttér a panel mögé */ #hdr:has(.nav-links.open)::before{content:"";position:fixed;inset:0; background:rgba(5,32,38,.45);backdrop-filter:blur(3px);z-index:-1} #hdr .nav-links{position:fixed;top:0;right:0;bottom:0;left:auto; width:min(330px,86vw);max-width:none;display:flex!important;flex-direction:column; align-items:stretch;gap:0;background:var(--white);padding:76px 0 0; box-shadow:-20px 0 60px -20px rgba(0,0,0,.4); transform:translateX(101%);transition:transform .38s cubic-bezier(.22,.8,.28,1); overflow-y:auto;overscroll-behavior:contain} #hdr .nav-links.open{transform:none;position:fixed;top:0;left:auto;right:0; background:var(--white);backdrop-filter:none;border-top:none;padding:76px 0 0} /* menüpont: ikon + felirat */ #hdr .nav-links>a{display:flex;align-items:center;gap:14px; padding:13px 20px;margin:0 10px;border-radius:14px;font-weight:600;font-size:1.02rem; color:var(--dark-2);transition:background .18s} #hdr .nav-links>a::after{display:none} #hdr .nav-links>a:hover{background:rgba(28,107,44,.07)} #hdr .nav-links>a::before{content:"";flex:0 0 auto;width:34px;height:34px;border-radius:10px; background-color:var(--cream-2);position:relative;transition:background-color .18s} #hdr .nav-links>a>span.mi{display:none} /* a hamburger a panel fölött marad, és bezáró gombbá alakul */ #hdr .burger{position:relative;z-index:5} #hdr .nav-links.open ~ .burger, #hdr .burger.open{z-index:5} #hdr .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} #hdr .burger.open span:nth-child(2){opacity:0} #hdr .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} #hdr .burger span{transition:transform .25s,opacity .2s} /* nyelvválasztó: nem legördülő, hanem egysoros választósáv */ #hdr .nav-links .lang{order:-1;margin:0 20px 14px;padding:0} #hdr .nav-links .lang-btn{display:none} #hdr .nav-links .lang-menu, #hdr .nav-links.open .lang-menu{display:flex!important;position:static;opacity:1;visibility:visible; transform:none;box-shadow:none;border:none;background:none;padding:0;margin:0;min-width:0; gap:6px;flex-direction:row} #hdr .nav-links .lang-menu a{flex:1;text-align:center;padding:.5em 0;border-radius:10px; border:1px solid rgba(14,53,23,.16);font-size:.72rem;font-weight:700;letter-spacing:.04em; text-transform:uppercase;color:var(--gray-1);white-space:nowrap;transition:.18s} #hdr .nav-links .lang-menu a:hover{border-color:#1C6B2C;color:#1C6B2C} #hdr .nav-links .lang-menu a[aria-current]{background:#1C6B2C;border-color:#1C6B2C;color:#fff} } @media(max-width:820px){ #hdr .nav-links > a[href*="analisis-del-microbioma"], #hdr .nav-links > a[href*="analyse-du-microbiote"], #hdr .nav-links > a[href*="microbiome-testing"], #hdr .nav-links > a[href*="mikrobiom-analyse"], #hdr .nav-links > a[href*="mikrobioma-vizsgalat"], #hdr .nav-links > a[href*="szolgaltatasok-mikrobioma-profil-keszitese"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%202h6%22%2F%3E%3Cpath%20d%3D%22M10%202v6.2L4.6%2018a3%203%200%200%200%202.6%204.5h9.6A3%203%200%200%200%2019.4%2018L14%208.2V2%22%2F%3E%3Cpath%20d%3D%22M6.5%2015h11%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links > a[href*="#kapszulak"], #hdr .nav-links > a[href*="#capsules"], #hdr .nav-links > a[href*="#kapseln"], #hdr .nav-links > a[href*="#capsulas"], #hdr .nav-links > a[href*="#gelules"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%228%22%20width%3D%2219%22%20height%3D%228%22%20rx%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%208v8%22%2F%3E%3Cpath%20d%3D%22M5.5%2011.2h2.6%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links > a[href*="become-a-donor"], #hdr .nav-links > a[href*="devenez-donneur"], #hdr .nav-links > a[href*="donor.html"], #hdr .nav-links > a[href*="legyen-on-is-donor"], #hdr .nav-links > a[href*="sea-donante"], #hdr .nav-links > a[href*="spender-werden"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020.5s-7.2-4.6-7.2-9.4A4%204%200%200%201%2012%208.4a4%204%200%200%201%207.2%202.7c0%204.8-7.2%209.4-7.2%209.4z%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links > a[href*="base-de-connaissances"], #hdr .nav-links > a[href*="base-de-conocimiento"], #hdr .nav-links > a[href*="books/"], #hdr .nav-links > a[href*="knowledgebase"], #hdr .nav-links > a[href*="tudastar"], #hdr .nav-links > a[href*="wissensdatenbank"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204.5h6a3%203%200%200%201%202%20.9%203%203%200%200%201%202-.9h6v14h-6a3%203%200%200%200-2%20.9%203%203%200%200%200-2-.9H4z%22%2F%3E%3Cpath%20d%3D%22M12%205.4v14%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links > a[href*="blog"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020.5V17l11-11%203.5%203.5-11%2011H4z%22%2F%3E%3Cpath%20d%3D%22M13.5%207.5%2016.5%2010.5%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links > a[href*="csapat.html"], #hdr .nav-links > a[href*="csapatunk"], #hdr .nav-links > a[href*="notre-equipe"], #hdr .nav-links > a[href*="nuestro-equipo"], #hdr .nav-links > a[href*="our-team"], #hdr .nav-links > a[href*="unser-team"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228.5%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2020c0-3.3%202.7-5.5%206-5.5s6%202.2%206%205.5%22%2F%3E%3Cpath%20d%3D%22M16.5%206.2a3%203%200%200%201%200%205.6%22%2F%3E%3Cpath%20d%3D%22M18%2014.9c1.9.7%203%202.5%203%205.1%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links > a[href*="contact"], #hdr .nav-links > a[href*="contacto"], #hdr .nav-links > a[href*="kapcsolat"], #hdr .nav-links > a[href*="kapcsolat.html"], #hdr .nav-links > a[href*="kontakt"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.5%203.5h3l1.6%204-2%201.4a11.5%2011.5%200%200%200%205%205l1.4-2%204%201.6v3a2%202%200%200%201-2.2%202A16.5%2016.5%200%200%201%204.5%205.7a2%202%200%200%201%202-2.2z%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a::before{ -webkit-mask:var(--mi,none) center/18px 18px no-repeat; mask:var(--mi,none) center/18px 18px no-repeat; background-color:var(--cream-2); box-shadow:none} #hdr .nav-links>a::before{background-color:var(--cream-2)} } @media(max-width:820px){ #hdr .nav-links>a{position:relative} #hdr .nav-links>a::before{background-color:var(--cream-2);-webkit-mask:none;mask:none} #hdr .nav-links>a::after{content:"";display:block;position:absolute;left:28px;top:50%; width:18px;height:18px;margin-top:-9px;background-color:#1C6B2C; -webkit-mask:var(--mi,none) center/18px 18px no-repeat; mask:var(--mi,none) center/18px 18px no-repeat;transition:background-color .18s} #hdr .nav-links>a:hover::before{background-color:#1C6B2C} #hdr .nav-links>a:hover::after{background-color:#fff} } /* ═══ MOBIL MENU 2026-08-01 ══════════════════════════════════════════════════════ Jobbrol beuszo panel a korabbi legordulo lista helyett; a nyelvvalaszto egysoros valasztosav lesz. A jeloles valtozatlan, minden stilusbol tortenik. */ @media(max-width:820px){ /* A fejlec (logo) es a hero elso sora kozott legyen levegő, hogy a logo kulon egysegkent latszodjon. Csak mobilon, az asztali nezet valtozatlan. */ .hero{padding-top:132px} #hdr:has(.nav-links.open)::before{content:'';position:fixed;inset:0; background:rgba(5,32,38,.45);backdrop-filter:blur(3px);z-index:-1} /* A beuszo panel `position:fixed`. A `backdrop-filter` viszont TARTALMAZO BLOKKOT csinal a fixed leszarmazottaknak — ilyenkor a panel nem a kepernyohoz, hanem a FEJLEC dobozahoz igazodik, es arra is zsugorodik: a menupontok kilognak belole, csak a nyelvsor latszik (az `order:-1` miatt az all elol). Gorgetes utan `#hdr.sc`/`.scrolled` kap blurt, ezert jelentkezett a hiba csak a lap tetejerol elgorgetve. Amig a menu nyitva van, a fejlecrol levesszuk a blurt — a panel es a sotetito reteg amugy is eltakarja. 2026-08-02. */ #hdr:has(.nav-links.open),#hdr.sc:has(.nav-links.open), #hdr.scrolled:has(.nav-links.open){ backdrop-filter:none!important;-webkit-backdrop-filter:none!important; filter:none!important;transform:none!important; /* transition nelkul: a #hdr .35s-es atmenete kulonben a blur(12px)→none uton vinne at, es amig a blur > none, a panel meg mindig osszecsuklik. */ transition:none!important; background:rgba(247,244,239,.98)!important} #hdr .nav-links{position:fixed!important;top:0!important;right:0!important; align-items:stretch!important; bottom:0!important;left:auto!important; width:min(330px,86vw);display:flex!important;flex-direction:column;align-items:stretch; gap:0!important;background:var(--white,#fff)!important;backdrop-filter:none!important; padding:74px 0 24px!important;border-top:none;overflow-y:auto;overscroll-behavior:contain; box-shadow:-20px 0 60px -20px rgba(0,0,0,.4); transform:translateX(101%);transition:transform .38s cubic-bezier(.22,.8,.28,1)} #hdr .nav-links.open{transform:none} #hdr .nav-links>a{display:flex;align-items:center;gap:14px;position:relative; padding:13px 20px 13px 20px!important;margin:0 10px;border-radius:14px; font-weight:600;font-size:1.02rem;color:var(--dark-2)!important;width:auto; transition:background .18s} #hdr .nav-links>a:hover{background:rgba(28,107,44,.07)} #hdr .nav-links>a::before{content:'';flex:0 0 auto;width:34px;height:34px; border-radius:10px;background:var(--cream-2,#EEECE6);transition:background .18s; position:static;opacity:1} #hdr .nav-links>a::after{content:'';position:absolute!important;left:28px!important; top:50%!important;bottom:auto!important;right:auto!important; width:18px!important;height:18px!important;margin-top:-9px;background:#1C6B2C!important; -webkit-mask:var(--mi) center/18px 18px no-repeat;mask:var(--mi) center/18px 18px no-repeat; transition:background .18s} #hdr .nav-links>a:hover::before{background:#1C6B2C} #hdr .nav-links>a:hover::after{background:#fff!important} /* ── Bezaro gomb ────────────────────────────────────────────── Nyitott allapotban a hamburger korbe zart X lesz a panel jobb felso sarkaban. Eddig a `#hdr:not(.scrolled) .burger span{background:#fff}` szabaly miatt feher X allt a feher panelen, vagyis lathatatlan volt — ezert kell a szinre !important. */ #hdr .burger{position:relative;z-index:5} #hdr .burger.open{position:fixed;top:13px;right:13px;width:40px;height:40px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; border-radius:50%;border:1px solid rgba(14,53,23,.18)!important; background:#fff!important;box-shadow:0 6px 18px -8px rgba(0,0,0,.35);z-index:8} #hdr .burger.open span{width:17px;background:#1C6B2C!important} #hdr .nav-links .lang{order:-1;margin:0 20px 14px;padding:0;position:static; display:block!important;width:auto;align-self:stretch!important} #hdr .nav-links .lang-btn{display:none!important} #hdr .nav-links .lang-menu{display:flex!important;position:static!important;flex-wrap:nowrap; flex-direction:row!important;gap:6px;box-shadow:none;background:none;padding:0; min-width:0;border:none;width:100%} #hdr .nav-links .lang-menu a{flex:1 1 0;text-align:center;padding:.55em .2em;border-radius:10px; border:1px solid rgba(14,53,23,.16);font-size:.7rem;font-weight:700;letter-spacing:.02em; color:var(--gray-1,#777777)!important;white-space:nowrap;transition:.18s;font-size:0!important} #hdr .nav-links .lang-menu a::before{font-size:.76rem;font-weight:700;letter-spacing:.06em} #hdr .nav-links .lang-menu a:hover{border-color:#1C6B2C;color:#1C6B2C;background:none} /* Az aktív nyelv: türkiz háttér, fehér betű. !important kell, mert a fejléc saját `#hdr:not(.scrolled) .nav-links.open .lang-menu a` szabálya (id + négy osztály) magasabb fajsúlyú, mint az itteni szelektor. */ #hdr .nav-links .lang-menu a[aria-current]{background:#1C6B2C!important; border-color:#1C6B2C!important;color:#fff!important} #hdr .nav-links .lang-menu a[aria-current]::before{color:#fff!important} /* ── A menu labjegyzete: turkiz valasztovonal + szlogen ──────── A tartalom CSS-bol jon, hogy ne kelljen 2799 oldal jeloleset atirni. `margin-top:auto` — a panel aljara kerul, a Kapcsolat ala. */ #hdr .nav-links::after{content:"FarmAtlas – Find your farm";display:block;margin:26px 20px 4px;margin-top:auto; padding-top:15px;border-top:1px solid #1C6B2C; font-size:.76rem;font-weight:600;letter-spacing:.01em;line-height:1.4; color:#1C6B2C;text-align:center} html[lang="hu"] #hdr .nav-links::after{content:"FarmAtlas – Találd meg a gazdaságod"} html[lang="en"] #hdr .nav-links::after{content:"FarmAtlas – Find your farm"} html[lang="de"] #hdr .nav-links::after{content:"FarmAtlas – Finde deinen Hof"} html[lang="es"] #hdr .nav-links::after{content:"FarmAtlas – Encuentra tu granja"} html[lang="fr"] #hdr .nav-links::after{content:"FarmAtlas – Trouvez votre ferme"} } @media(max-width:820px){ /* Tartalek: ha egy hivatkozasra nincs ikonunk, ures maszk keruljon ra — `--mi` nelkul a `mask` ervenytelen, es tomor turkiz negyzet latszana. */ #hdr .nav-links>a{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="microbiomebank-modern"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.2%2010.6%2012%203.2l8.8%207.4%22%2F%3E%3Cpath%20d%3D%22M5.6%209.6V20.4h12.8V9.6%22%2F%3E%3Cpath%20d%3D%22M9.6%2020.4v-5.8h4.8v5.8%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="analisis-del-microbioma"], #hdr .nav-links>a[href*="analyse-du-microbiote"], #hdr .nav-links>a[href*="microbiome-testing"], #hdr .nav-links>a[href*="mikrobiom-analyse"], #hdr .nav-links>a[href*="mikrobioma-vizsgalat"], #hdr .nav-links>a[href*="szolgaltatasok-mikrobioma-profil-keszitese"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.5%202.5h5%22%2F%3E%3Cpath%20d%3D%22M10.5%202.5v6.4L5%2018.4A2.9%202.9%200%200%200%207.5%2022.5h9A2.9%202.9%200%200%200%2019%2018.4l-5.5-9.5V2.5%22%2F%3E%3Cpath%20d%3D%22M7.4%2015.2h9.2%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="#kapszulak"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.6%22%20y%3D%228%22%20width%3D%2218.8%22%20height%3D%228%22%20rx%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%208v8%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="become-a-donor"], #hdr .nav-links>a[href*="devenez-donneur"], #hdr .nav-links>a[href*="donor"], #hdr .nav-links>a[href*="legyen-on-is-donor"], #hdr .nav-links>a[href*="sea-donante"], #hdr .nav-links>a[href*="spender-werden"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020.6S4.6%2015.9%204.6%2011a4%204%200%200%201%207.4-2.4A4%204%200%200%201%2019.4%2011c0%204.9-7.4%209.6-7.4%209.6z%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="base-de-connaissances"], #hdr .nav-links>a[href*="base-de-conocimiento"], #hdr .nav-links>a[href*="books/"], #hdr .nav-links>a[href*="knowledgebase"], #hdr .nav-links>a[href*="tudastar"], #hdr .nav-links>a[href*="wissensdatenbank"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.6%204.6h5.6a2.9%202.9%200%200%201%202.8%202%202.9%202.9%200%200%201%202.8-2h5.6v13.4h-5.6a2.9%202.9%200%200%200-2.8%202%202.9%202.9%200%200%200-2.8-2H3.6z%22%2F%3E%3Cpath%20d%3D%22M12%206.6v13.4%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="blog"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020.4v-3.6L15%205.8l3.6%203.6-11%2011H4z%22%2F%3E%3Cpath%20d%3D%22M13.4%207.4%2017%2011%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="csapat.html"], #hdr .nav-links>a[href*="csapatunk"], #hdr .nav-links>a[href*="notre-equipe"], #hdr .nav-links>a[href*="nuestro-equipo"], #hdr .nav-links>a[href*="our-team"], #hdr .nav-links>a[href*="unser-team"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228.4%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2020.2c0-3.3%202.7-5.6%206-5.6s6%202.3%206%205.6%22%2F%3E%3Cpath%20d%3D%22M16.4%206a3%203%200%200%201%200%205.8%22%2F%3E%3Cpath%20d%3D%22M18%2014.8c1.9.8%203%202.6%203%205.2%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="contact"], #hdr .nav-links>a[href*="contacto"], #hdr .nav-links>a[href*="kapcsolat"], #hdr .nav-links>a[href*="kapcsolat.html"], #hdr .nav-links>a[href*="kontakt"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.4%203.4h3l1.7%204.1-2%201.4a11.6%2011.6%200%200%200%205%205l1.4-2%204.1%201.7v3a2%202%200%200%201-2.2%202A16.6%2016.6%200%200%201%204.4%205.6a2%202%200%200%201%202-2.2z%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href="/hu/"], #hdr .nav-links>a[href="/en/"], #hdr .nav-links>a[href="/de/"], #hdr .nav-links>a[href="/es/"], #hdr .nav-links>a[href="/fr/"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.2%2010.6%2012%203.2l8.8%207.4%22%2F%3E%3Cpath%20d%3D%22M5.6%209.6V20.4h12.8V9.6%22%2F%3E%3Cpath%20d%3D%22M9.6%2020.4v-5.8h4.8v5.8%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links .lang-menu a[href$="microbiomebank-modern.html"]::before, #hdr .nav-links .lang-menu a[href*="/hu/"]::before{content:"HU"} html[lang="hu"] #hdr .nav-links .lang-menu a[aria-current]::before{content:"HU"} #hdr .nav-links .lang-menu a[href*="-en.html"]::before, #hdr .nav-links .lang-menu a[href*="/en/"]::before{content:"EN"} html[lang="en"] #hdr .nav-links .lang-menu a[aria-current]::before{content:"EN"} #hdr .nav-links .lang-menu a[href*="-de.html"]::before, #hdr .nav-links .lang-menu a[href*="/de/"]::before{content:"DE"} html[lang="de"] #hdr .nav-links .lang-menu a[aria-current]::before{content:"DE"} #hdr .nav-links .lang-menu a[href*="-es.html"]::before, #hdr .nav-links .lang-menu a[href*="/es/"]::before{content:"ES"} html[lang="es"] #hdr .nav-links .lang-menu a[aria-current]::before{content:"ES"} #hdr .nav-links .lang-menu a[href*="-fr.html"]::before, #hdr .nav-links .lang-menu a[href*="/fr/"]::before{content:"FR"} html[lang="fr"] #hdr .nav-links .lang-menu a[aria-current]::before{content:"FR"} } /* ═══ MBB-KERESES 2026-08-03 ═══════════════════════════════════════════ Teljes szoveges kereso (Pagefind). Jeloles + szkript: _build/inject_search.py · index: _build/build_search_index.sh */ .pfs-sec{padding:0 0 8px} .pfs{max-width:760px;margin:0 auto} .pfs-box{display:flex;align-items:center;gap:.7em;background:var(--white,#fff); border:1px solid rgba(14,53,23,.16);border-radius:100px;padding:.85em 1.4em; box-shadow:0 14px 40px -26px rgba(14,53,23,.55);color:var(--gray,#777777); transition:border-color .25s ease,box-shadow .25s ease} .pfs-box:focus-within{border-color:var(--teal-med,#2E7D3A); box-shadow:0 16px 44px -22px rgba(14,53,23,.6)} .pfs-box svg{flex:none} .pfs-box input{border:0;outline:0;width:100%;background:none;font-size:1.02rem; font-family:var(--sans,'Raleway',system-ui,sans-serif);color:var(--ink,#06230B)} .pfs-chips{display:flex;flex-wrap:wrap;gap:.5em;margin:1em 0 0} .pfs-chip{cursor:pointer;font:inherit;font-size:.78rem;line-height:1; padding:.62em 1.1em;border-radius:100px;border:1px solid rgba(14,53,23,.2); background:transparent;color:var(--gray,#777777)} .pfs-chip:hover{border-color:var(--teal-med,#2E7D3A);color:var(--teal,#175A24)} .pfs-chip[aria-current]{background:var(--teal,#175A24); border-color:var(--teal,#175A24);color:#fff} .pfs-status{margin:.95em 0 0;font-size:.84rem;color:var(--gray,#777777)} .pfs-list{list-style:none;margin:1.1em 0 0;padding:0;display:grid;gap:.7em} .pfs-hit{background:var(--white,#fff);border:1px solid rgba(14,53,23,.1); border-radius:16px;padding:1.05em 1.3em} .pfs-hit-a{display:block;text-decoration:none;color:inherit} .pfs-hit-b{display:block;font-size:.68rem;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--teal-med,#2E7D3A);margin-bottom:.3em} .pfs-hit-t{display:block;font-family:var(--serif,'Cinzel',Georgia,serif); font-size:1.06rem;color:var(--green,#0E3517);line-height:1.3} .pfs-hit-x{margin:.45em 0 0;font-size:.9rem;line-height:1.6;color:var(--gray,#777777)} .pfs-hit-x mark{background:rgba(22,120,126,.16);color:inherit;border-radius:3px; padding:0 .12em} .pfs-hit-a:hover .pfs-hit-t{color:var(--teal,#175A24)} .pfs-subs{list-style:none;margin:.7em 0 0;padding:.6em 0 0;display:grid;gap:.32em; border-top:1px solid rgba(14,53,23,.09)} .pfs-subs a{font-size:.84rem;color:var(--teal,#175A24);text-decoration:none} .pfs-subs a:hover{text-decoration:underline} .pfs-more{display:block;margin:1.1em auto 0;cursor:pointer;font:inherit; font-size:.85rem;padding:.8em 2em;border-radius:100px; border:1px solid rgba(14,53,23,.22);background:transparent;color:var(--teal,#175A24)} .pfs-more:hover{background:var(--teal,#175A24);color:#fff; border-color:var(--teal,#175A24)} .pfs-more[disabled]{opacity:.5;cursor:default} @media(max-width:640px){.pfs-box{padding:.75em 1.1em}.pfs-hit{padding:.95em 1.05em}} /* A konyv-nyitooldalak gyors cimszuroje ala kerulo atvezetes a teljes szoveges keresore (C. resz). */ .toolbar .fts-link{display:inline-block;margin-top:.5em;font-size:.82rem; color:var(--teal,#175A24);text-decoration:none; border-bottom:1px solid rgba(14,53,23,.35)} .toolbar .fts-link:hover{border-bottom-color:var(--teal,#175A24)} /* ═══ /MBB-KERESES ═════════════════════════════════════════════════════ */ /* (a MBB „hamarosan-konyvek" szabalyai torolve — a Majornal nincsenek konyvek) */ /* (a MBB „nem publikalt konyv" szabalya torolve — a Majornal nincsenek konyvek) */ /* ── Cservolgy Major: a mobil menu ikonjai a data-nav attributumra ──── */ #hdr .nav-links>a[data-nav="home"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.2%2010.6%2012%203.2l8.8%207.4%22%2F%3E%3Cpath%20d%3D%22M5.6%209.6V20.4h12.8V9.6%22%2F%3E%3Cpath%20d%3D%22M9.6%2020.4v-5.8h4.8v5.8%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="docs"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202.6H6.4v18.8h11.2V6.2z%22%2F%3E%3Cpath%20d%3D%22M14%202.6v3.6h3.6%22%2F%3E%3Cpath%20d%3D%22M9%2012h6M9%2015.6h6%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="offer"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.6%22%20y%3D%228%22%20width%3D%2218.8%22%20height%3D%228%22%20rx%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%208v8%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="vision"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020.6S4.6%2015.9%204.6%2011a4%204%200%200%201%207.4-2.4A4%204%200%200%201%2019.4%2011c0%204.9-7.4%209.6-7.4%209.6z%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="faq"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.6%204.6h5.6a2.9%202.9%200%200%201%202.8%202%202.9%202.9%200%200%201%202.8-2h5.6v13.4h-5.6a2.9%202.9%200%200%200-2.8%202%202.9%202.9%200%200%200-2.8-2H3.6z%22%2F%3E%3Cpath%20d%3D%22M12%206.6v13.4%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="blog"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020.4v-3.6L15%205.8l3.6%203.6-11%2011H4z%22%2F%3E%3Cpath%20d%3D%22M13.4%207.4%2017%2011%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="micro"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228.4%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2020.2c0-3.3%202.7-5.6%206-5.6s6%202.3%206%205.6%22%2F%3E%3Cpath%20d%3D%22M16.4%206a3%203%200%200%201%200%205.8%22%2F%3E%3Cpath%20d%3D%22M18%2014.8c1.9.8%203%202.6%203%205.2%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="contact"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.4%203.4h3l1.7%204.1-2%201.4a11.6%2011.6%200%200%200%205%205l1.4-2%204.1%201.7v3a2%202%200%200%201-2.2%202A16.6%2016.6%200%200%201%204.4%205.6a2%202%200%200%201%202-2.2z%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="lang"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.2%2010.6%2012%203.2l8.8%207.4%22%2F%3E%3Cpath%20d%3D%22M5.6%209.6V20.4h12.8V9.6%22%2F%3E%3Cpath%20d%3D%22M9.6%2020.4v-5.8h4.8v5.8%22%2F%3E%3C%2Fsvg%3E")} /* ===== cservolgy.css ===== */ /* ── Cservölgy Major — paletta és oldal-specifikus kiegészítések ────────── A rendszer-váz (home.css + shell.css) a MicroBiome Bank / VetBiota komponens-készlete. Ez a fájl fut le utoljára, ezért ITT írjuk felül a színeket és tesszük hozzá a Major saját elemeit. A paletta forrása maga az élő cservolgymajor.hu: #06230B mély zöld (a preloader és a sötét sávok háttere) #021305 legsötétebb zöld (lábléc) #EEECE6 krém · #F2F1ED világos krém (szekció-hátterek) #16787E türkiz (a régi téma linkszíne — másodlagos akcentus) Betűk: Cinzel (címsor) + Raleway (szöveg) — ugyanaz, mint az élő oldalon. */ :root{ --green:#0E3517; /* címsorok */ --green-lite:#1C6B2C; --teal:#1C6B2C; /* elsődleges gomb — friss zöld */ --teal-med:#2E7D3A; /* akcentus, eyebrow, kiemelés */ /* Sötétebb zöld, fehér alapon is bátran használható (kontraszt 8,3:1, tehát szövegnek és hivatkozásnak is megfelel). Ez az elsődleges gomb hover-színe — korábban a türkizes --green-lite volt, ami fehér mellett kilógott a zöld palettából. */ --green-deep:#175A24; --accent:#16787E; /* az eredeti téma türkize — visszafogott másodlagos */ --dark-1:#021305; --dark-2:#06230B; --gray-1:#6b6b66; --gray-2:#cfcdc6; --cream:#F7F6F3; --cream-2:#EEECE6; --warm:#F1E9DB; --white:#ffffff; --shadow:0 20px 60px -20px rgba(6,35,11,.30); } /* gombok: az eredeti oldal lekerekített, ritkított betűközű gombjai */ .btn{letter-spacing:.06em} .btn-primary{background:var(--teal);box-shadow:0 8px 24px -8px rgba(14,53,23,.55)} .btn-primary:hover{background:var(--green-deep);box-shadow:0 14px 30px -8px rgba(14,53,23,.65)} .btn-ghost{color:var(--green);border-color:rgba(14,53,23,.28)} .btn-ghost:hover{background:var(--green);border-color:var(--green)} .btn-ghost.btn-on-dark{color:#fff;border-color:rgba(255,255,255,.45)} .btn-ghost.btn-on-dark:hover{background:#fff;color:var(--green);border-color:#fff} /* ── hero ────────────────────────────────────────────────────────────── */ .hero{background:linear-gradient(160deg,#14461F,#06230B)} .hero-bg{background: radial-gradient(ellipse 60% 50% at 75% 30%,rgba(255,255,255,.06),transparent 70%), radial-gradient(ellipse 50% 60% at 20% 80%,rgba(28,107,44,.32),transparent 70%), linear-gradient(160deg,#14461F 0%,#06230B 100%)} /* a background-image-t a HTML inline stílusa adja (a CSS-változós megoldás a stíluslaphoz képest oldaná fel az url()-t, és „assets/assets/…" lenne belőle) */ .hero-photo{position:absolute;inset:0;z-index:0; background-size:cover;background-position:center 45%;opacity:.42} /* balról sötétítő réteg: a fejléc és a hero-szöveg kontrasztja akkor is megmarad, ha a fotó világos részére esik */ .hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(100deg,rgba(2,19,5,.90) 0%,rgba(2,19,5,.64) 38%, rgba(2,19,5,.22) 68%,rgba(2,19,5,.44) 100%)} @media(max-width:900px){.hero::before{background:linear-gradient(180deg, rgba(2,19,5,.74) 0%,rgba(2,19,5,.56) 45%,rgba(2,19,5,.82) 100%)}} .hero-inner{position:relative;z-index:2} /* A hero egyetlen szövegoszlop (a körábra kikerült). A méret a MicroBiome Bank skálájával azonos: clamp(2.4rem,5vw,4rem). Teljes szélességig nem engedjük a sorokat — a hosszú sor rontja az olvashatóságot —, ezért karakterben mért határt kapnak. */ .hero-inner{display:block} .hero h1{font-size:clamp(2.4rem,5vw,4rem);letter-spacing:.01em;max-width:20ch} .hero .sub{max-width:52ch} .hero p{max-width:70ch} @media(max-width:900px){ .hero h1,.hero .sub,.hero p{max-width:none}} /* ── logó ────────────────────────────────────────────────────────────── */ #hdr .logo img{height:46px;width:auto} #hdr.scrolled .logo img,#hdr.sc .logo img{height:36px} @media(max-width:640px){#hdr .logo img{height:38px}} /* ── „lépések\" sáv (csatlakozás 4 lépése) ────────────────────────────── */ .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px} .steps.four{grid-template-columns:repeat(4,1fr)} .step{position:relative;background:var(--white);border-radius:var(--r);padding:30px 22px 26px; box-shadow:0 12px 40px -26px rgba(6,35,11,.45);border-top:3px solid var(--teal-med)} .step .n{font-family:var(--serif);font-size:2.1rem;color:var(--teal-med);line-height:1;opacity:.55} .step h3{font-size:1.05rem;margin:.45em 0 .3em} .step p{font-size:.9rem;color:var(--gray-1)} @media(max-width:900px){.steps,.steps.four{grid-template-columns:1fr 1fr}} @media(max-width:520px){.steps,.steps.four{grid-template-columns:1fr}} /* ── „megoldás\" (kép + felsorolás) ───────────────────────────────────── */ .solution-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center} @media(max-width:900px){.solution-grid{grid-template-columns:1fr;gap:34px}} .solution-grid ul{list-style:none;margin:1.2em 0} .solution-grid li{position:relative;padding-left:1.7em;margin-bottom:.9em;color:var(--dark-2)} .solution-grid li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px; border-radius:50%;background:var(--teal-med)} .solution-note{background:var(--white);border-left:4px solid var(--teal-med);border-radius:12px; padding:20px 24px;font-size:.95rem;color:var(--dark-2); box-shadow:0 12px 36px -28px rgba(6,35,11,.5)} .solution-img{border-radius:var(--r);overflow:hidden;background:linear-gradient(150deg,#14461F,#06230B); box-shadow:0 22px 60px -30px rgba(6,35,11,.6)} .solution-img img{display:block;width:100%;height:auto} /* ── galéria ─────────────────────────────────────────────────────────── */ .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .gtile{position:relative;border-radius:14px;overflow:hidden;margin:0; box-shadow:0 16px 44px -30px rgba(6,35,11,.6);background:#0e2a13} .gtile img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3; transition:transform .6s cubic-bezier(.2,.8,.2,1)} .gtile:hover img{transform:scale(1.05)} .gtile figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 13px;color:#fff; font-size:.84rem;line-height:1.4; background:linear-gradient(to top,rgba(2,19,5,.86),rgba(2,19,5,.45) 45%,transparent)} @media(max-width:900px){.gallery{grid-template-columns:1fr 1fr}} @media(max-width:560px){.gallery{grid-template-columns:1fr}} /* ── értékajánlat-kártyák ────────────────────────────────────────────── */ .ocard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} @media(max-width:900px){.ocard-grid{grid-template-columns:1fr}} .ocard{background:var(--white);border-radius:var(--r);padding:30px 26px; border-top:3px solid var(--teal-med);box-shadow:0 14px 44px -30px rgba(6,35,11,.5)} .ocard h3{font-size:1.14rem;margin-bottom:.4em} .ocard p{color:var(--gray-1);font-size:.95rem} .offer-photo{margin:44px auto 0;max-width:900px;border-radius:var(--r);overflow:hidden; box-shadow:0 22px 60px -34px rgba(6,35,11,.6)} .offer-photo img{display:block;width:100%;height:auto} .ev-h3{text-align:center;margin:52px 0 22px;font-size:1.35rem} .ev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:900px){.ev-grid{grid-template-columns:1fr}} .ev{background:var(--warm);border-radius:14px;padding:24px 22px} .ev h4{font-size:1.02rem;margin-bottom:.35em} .ev p{font-size:.92rem;color:var(--gray-1)} /* ── mikroközösség-lépések ───────────────────────────────────────────── */ .app-grid.three{grid-template-columns:repeat(3,1fr)} @media(max-width:900px){.app-grid.three{grid-template-columns:1fr}} /* ── blog/receptek beharangozó ───────────────────────────────────────── */ .teaser-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px} @media(max-width:860px){.teaser-grid{grid-template-columns:1fr}} .teaser{background:var(--white);border-radius:var(--r);overflow:hidden; box-shadow:0 18px 54px -34px rgba(6,35,11,.55);display:flex;flex-direction:column} .teaser img{display:block;width:100%;height:210px;object-fit:cover} .teaser .tbody{padding:26px 26px 30px} .teaser h3{font-size:1.24rem;margin:.3em 0 .45em} .teaser p{color:var(--gray-1);font-size:.95rem} .teaser .more{display:inline-block;margin-top:1em;font-weight:600;color:var(--teal-med)} .teaser .more:hover{color:var(--green)} /* ── kapcsolati blokk ────────────────────────────────────────────────── */ .contact-info .ci strong{display:block;font-family:var(--serif);color:var(--green); font-size:1.05rem;margin-bottom:.35em} .form-h3{font-size:1.2rem;margin-bottom:.9em} /* ── sötét sáv (tudomány) ────────────────────────────────────────────── */ .bg-dark{background:linear-gradient(160deg,#0B3013,#021305)} .bg-dark h2,.bg-dark p,.bg-dark .stat .n{color:#fff} .bg-dark .eyebrow{color:rgba(255,255,255,.72)} .bg-dark .stat .l{color:rgba(255,255,255,.72)} /* ── lábléc ──────────────────────────────────────────────────────────── */ .sitefoot{background:var(--dark-1)} .sitefoot .logo img{filter:none} /* ── űrlap-biztonság ────────────────────────────────────────────────────── A reCAPTCHA lebegő jelvényét elrejtjük — a Google feltételei szerint ez CSAK akkor megengedett, ha a kötelező jelzés (`.recaptcha-note`) megjelenik az űrlapnál. A kettő EGY döntés; az R30 regressziós kapu együtt őrzi őket. A jelvényt nem töröljük, csak 1×1 képpontra húzzuk a BAL FELSŐ sarokban, hogy a jobb alsó (ahol a süti-sáv és a görgetés-jelző van) szabad maradjon. */ .grecaptcha-badge{position:fixed!important;top:0!important;left:0!important; right:auto!important;bottom:auto!important;width:1px!important;height:1px!important; overflow:hidden!important;opacity:0!important;pointer-events:none!important; box-shadow:none!important;transform:none!important;z-index:0!important} .recaptcha-note{margin-top:1em;font-size:.74rem;line-height:1.55;color:var(--gray-1)} .recaptcha-note a{color:var(--teal-med);text-decoration:underline} /* A siker-blokk REJTVE indul. A `display:none` a jelölésben is ott van (R13): ha ez a szabály egyszer kimaradna egy laptípusról, a „köszönjük" szöveg beküldés ELŐTT kilátszana — a MicroBiome Bankon pontosan ez történt, öt nyelven egyszerre. */ .sent-note{display:none;margin-top:1.4em;padding:22px 24px;border-radius:14px; background:var(--warm);border-left:4px solid var(--teal-med)} .sent-note h4{font-size:1.1rem;margin-bottom:.3em} .sent-note p{color:var(--gray-1);font-size:.95rem;margin:0} /* letölthető szerződés-kártya; ha a PDF még nincs feltöltve, inaktív marad */ .dl-soon{cursor:default;opacity:.72;box-shadow:none;background:var(--warm)} .dl-soon em{display:block;font-style:normal;font-weight:400;font-size:.82rem; color:var(--gray-1);margin-top:.15em} /* ── termékcsomag-igénylés ────────────────────────────────────────────── */ .order-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:start} @media(max-width:960px){.order-wrap{grid-template-columns:1fr;gap:30px}} /* A rácselem alapértelmezett legkisebb szélessége a TARTALMÁÉ (min-width:auto), ezért egyetlen nem zsugorítható tartalom — itt a négyoszlopos kosártáblázat — szélesebbre feszíti a sávot, mint a képernyő. A lap ilyenkor vízszintesen túlcsordul, és a teljes szélességű hátterek (hero-kép, lábléc) nem érnek ki a jobb szélig: marad mellettük egy csík. A min-width:0 engedi a zsugorodást, a táblázat pedig a saját dobozán belül görgethet. */ .order-wrap>*{min-width:0} .order-intro{background:var(--warm);border-radius:var(--r);padding:28px 26px} .order-intro h3{font-size:1.15rem;margin-bottom:.6em} .order-intro ul{list-style:none;margin:0} .order-intro li{position:relative;padding-left:1.5em;margin-bottom:.8em; font-size:.94rem;color:var(--dark-2);line-height:1.65} .order-intro li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px; border-radius:50%;background:var(--teal-med)} .order-intro .btn{margin-top:.6em} /* A választható csomagok — a „Mielőtt kitöltöd" alatt, ugyanabban a hasábban. Világos kártyák a meleg háttéren: a látogató végigfut rajtuk, és onnan választ a legördülőben. A pont-jelölőt itt kikapcsoljuk, mert a kártyának saját kerete van. */ .pkg-box{margin-top:1.7em;padding-top:1.4em;border-top:1px solid rgba(0,0,0,.09)} .pkg-box h3{font-size:1.15rem;margin-bottom:.7em} .order-intro .pkg-list{list-style:none;margin:0} .order-intro .pkg-list li{position:static;padding:14px 16px;margin-bottom:10px; background:var(--white);border-radius:12px;border-left:3px solid var(--green-deep); font-size:.9rem} .order-intro .pkg-list li::before{content:none} .pkg-list h4{font-family:var(--serif);font-weight:500;font-size:1.02rem;color:var(--green); margin:0 0 .3em;line-height:1.35} .pkg-meta{font-size:.88rem;font-weight:700;color:var(--green-deep);margin:0 0 .4em; line-height:1.5} .pkg-desc{font-size:.88rem;color:var(--gray-1);line-height:1.65;margin:0} .pkg-note{font-size:.84rem;color:var(--gray-1);line-height:1.6;margin:1em 0 0} .qty-note{font-size:.84rem;line-height:1.6;color:var(--gray-1);margin:.2em 0 .4em; padding-left:.9em;border-left:2px solid var(--gray-2)} /* ── tételes kosár a termékcsomag-igénylésen ──────────────────────────── */ .cart-add{display:grid;grid-template-columns:1fr 1.4fr .7fr auto;gap:12px; align-items:end;background:var(--warm);border-radius:14px;padding:18px 18px 20px; margin-bottom:18px} @media(max-width:720px){.cart-add{grid-template-columns:1fr 1fr;} .cart-add .cart-btn{grid-column:1/-1;justify-content:center}} .cart-add .fld{margin:0} .cart-add label{font-size:.8rem} .cart-btn{white-space:nowrap;padding-top:.72em;padding-bottom:.72em} /* A táblázat nem tud 4 oszlop alá zsugorodni; keskeny telefonon inkább itt, a saját dobozában görgessen, mint hogy az egész lapot szétfeszítse. */ .cart-wrap{margin-bottom:6px;overflow-x:auto} table.cart{width:100%;border-collapse:collapse;font-size:.94rem} table.cart th,table.cart td{padding:.62em .5em;text-align:left; border-bottom:1px solid rgba(0,0,0,.08);vertical-align:middle} table.cart thead th{font-family:var(--sans);font-weight:700;font-size:.72rem; letter-spacing:.1em;text-transform:uppercase;color:var(--teal-med); border-bottom:1.5px solid rgba(0,0,0,.12)} table.cart .num{text-align:right;white-space:nowrap} table.cart tfoot th{border-bottom:none;border-top:1.5px solid rgba(0,0,0,.14); font-family:var(--serif);font-size:1.02rem;color:var(--green);padding-top:.8em} table.cart tbody:empty{display:none} table.cart tbody tr:last-child td{border-bottom:none} .cart-del{background:none;border:none;cursor:pointer;font-size:1.15rem;line-height:1; color:var(--gray-1);padding:.1em .3em;border-radius:6px;transition:.2s} .cart-del:hover{color:#a02020;background:rgba(160,32,32,.08)} .cart-empty{font-size:.9rem;color:var(--gray-1);line-height:1.6;margin:0} /* az üres-üzenet a táblázat törzsében áll: a fejléc vonala fölötte, az összegzés vonala alatta végig látszik, ezért itt nem kell alsó szegély */ table.cart td.cart-empty{padding:1.15em .5em;border-bottom:none} /* Telefonon a négy oszlop 298 px-et kért, a rendelkezésre álló hely 266 volt — emiatt görgetett. A fejléc ritkítása és a cellák keskenyebb bélése ennyivel lejjebb viszi a küszöböt, így a szokásos telefonszélességeken elfér. Az overflow-x a .cart-wrap-on marad: az még keskenyebb kijelzőn kifog. */ .cart th .th-short{display:none} @media(max-width:560px){ .cart th .th-long{display:none} .cart th .th-short{display:inline} table.cart{font-size:.88rem} table.cart th,table.cart td{padding:.55em .22em} table.cart td:first-child{padding-left:0} table.cart th:first-child{padding-left:0} table.cart thead th{font-size:.66rem;letter-spacing:.03em} table.cart tfoot th{font-size:.95rem} } .cart-tbc{font-size:.85rem;color:var(--gray-1);margin:.5em 0 0; padding-left:.9em;border-left:2px solid var(--teal-med)} /* hibás (üresen hagyott kötelező) mező jelölése */ .cform .fld input.bad,.cform .fld select.bad,.cform .fld textarea.bad{ border-color:#a02020;box-shadow:0 0 0 3px rgba(160,32,32,.10)}