@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 300 800;
font-stretch: 62% 125%;
font-display: swap;
src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 300 800;
font-stretch: 62% 125%;
font-display: swap;
src: url("../fonts/archivo-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--ink: #1A2150;
--ink-soft: #4A5480;
--navy: #263BAA;
--paper: #F4F7FB;
--white: #FFFFFF;
--line: #DDE3EE;
--line-strong: #B9C3D8;
--cool: #2661DE;
--cool-2: #32BEEF;
--cool-3: #36E0F5;
--warm: #CC3F0C;
--warm-1: #FDC603;
--warm-2: #FA7305;
--warm-3: #F81907;
--font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
--wrap: 74rem;
--gutter: max(clamp(1rem, 4vw, 2.5rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
--space: clamp(4.5rem, 9vw, 7.5rem);
--radius: 14px;
}
.choice-hutes, .tag-hutes, .need-hutes, .combo-hutes, .page-hutes, .nav-hutes, .nav-klimak { --c: var(--cool); --c-tint: #EAF1FD; --c-pipe: linear-gradient(var(--dir, 90deg), var(--cool-3), var(--cool)); }
.choice-futes, .tag-futes, .need-futes, .combo-futes, .page-futes, .nav-futes, .nav-hoszivattyuk { --c: var(--warm); --c-tint: #FFF1E7; --c-pipe: linear-gradient(var(--dir, 90deg), var(--warm-1), var(--warm-2), var(--warm-3)); }
.choice-epuletgepeszet, .tag-epuletgepeszet, .need-epuletgepeszet, .combo-epuletgepeszet, .page-epuletgepeszet, .nav-epuletgepeszet { --c: var(--navy); --c-tint: #ECEEF8; --c-pipe: linear-gradient(var(--dir, 90deg), #7A86D6, var(--navy)); }
.nav-eszkozok { --c: var(--navy); }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; scrollbar-gutter: stable; }
body {
margin: 0;
background: var(--white);
color: var(--ink);
font-family: var(--font);
font-size: 1.0625rem;
line-height: 1.6;
font-stretch: 100%;
}
img, svg { display: block; max-width: 100%; }
figure { margin: 0; }
::selection { background: #CDE3FB; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--navy); } }
:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; line-height: 1.1; color: inherit; }
h2 {
font-size: clamp(1.9rem, 3.6vw, 2.75rem);
font-stretch: 112%;
font-weight: 600;
letter-spacing: -0.01em;
margin-bottom: 1rem;
}
p { margin: 0 0 1em; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.narrow > * { max-width: 44rem; }
.icon { width: 1.25rem; height: 1.25rem; flex: none; }
.skip { position: absolute; left: -999px; top: 0; padding: .75rem 1rem; background: var(--ink); color: var(--white); z-index: 50; }
.skip:focus { left: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.section-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.section-head p { margin: 0; font-size: 1.1rem; color: var(--ink-soft); }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55rem;
min-height: 3.1rem;
padding: .75rem 1.35rem;
border: 1.5px solid transparent;
border-radius: 999px;
font: inherit;
font-size: 1rem;
font-weight: 650;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn .icon { width: 1.15rem; height: 1.15rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--navy); color: var(--white); }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: var(--ink); color: var(--white); } }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn-ghost:hover { border-color: var(--navy); color: var(--navy); } }
.btn-light { background: var(--white); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn-light:hover { background: var(--paper); color: var(--ink); } }
.btn-outline-light { border-color: rgba(255, 255, 255, .6); color: var(--white); }
@media (hover: hover) and (pointer: fine) { .btn-outline-light:hover { border-color: var(--white); background: rgba(255, 255, 255, .08); color: var(--white); } }
@media (prefers-reduced-motion: no-preference) {
.btn { transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
@media (hover: hover) and (pointer: fine) { .btn:hover:not(:disabled) { transform: translateY(-1px); } }
.btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover, .btn-light:hover { box-shadow: 0 12px 24px -16px rgba(26, 33, 80, .65); } }
a[href^="tel:"]:focus-visible .icon { animation: csorog .7s ease; }
@media (hover: hover) and (pointer: fine) { a[href^="tel:"]:hover .icon { animation: csorog .7s ease; } }
.hero-actions .btn-outline-light { position: relative; overflow: hidden; isolation: isolate; }
.hero-actions .btn-outline-light::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .32) 50%, transparent 70%);
transform: translateX(-130%);
animation: fenycsik 1.2s ease 1.6s 1 both;
pointer-events: none;
}
.mobile-bar a[href^="tel:"] .icon { animation: csorog .8s ease 2.5s 1; }
}
@keyframes csorog { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-14deg); } 30% { transform: rotate(12deg); } 45% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }
@keyframes fenycsik { to { transform: translateX(130%); } }
.site-header { position: sticky; top: 0; z-index: 20; background: var(--white); border-bottom: 1px solid var(--line); }
.header-inner { position: relative; display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem; }
.brand { display: block; flex: none; }
.brand img { width: auto; height: 2.9rem; }
.main-nav { display: flex; align-items: center; gap: 1.6rem; margin-left: auto; font-weight: 550; }
.main-nav a:not(.btn) { padding: .35rem 0; border-bottom: 2px solid transparent; color: var(--ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .main-nav a:not(.btn):hover { color: var(--navy); border-bottom-color: var(--line-strong); } }
.main-nav a[aria-current="page"] { border-bottom-color: var(--c); }
.nav-call { min-height: 2.75rem; padding: .55rem 1.1rem; white-space: nowrap; }
@media (min-width: 1100px) and (max-width: 1359px) { .main-nav { gap: 1rem; } }
.menu-toggle {
display: none;
align-items: center;
gap: .45rem;
margin-left: auto;
padding: .55rem .9rem;
border: 1.5px solid var(--line-strong);
border-radius: 999px;
background: var(--white);
color: var(--ink);
font: inherit;
font-weight: 600;
cursor: pointer;
}
.menu-ikon path { transform-box: fill-box; transform-origin: center; transition: transform .2s cubic-bezier(.23, 1, .32, 1), opacity .12s ease; }
.menu-toggle[aria-expanded="true"] .menu-ikon path:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-ikon path:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-ikon path:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 1099px) {
.brand img { height: 2.5rem; }
.header-inner { min-height: 4rem; }
.menu-toggle { display: inline-flex; }
.main-nav {
display: none;
position: absolute;
top: 100%;
left: calc(-1 * var(--gutter));
right: calc(-1 * var(--gutter));
flex-direction: column;
align-items: stretch;
gap: 0;
padding: .25rem var(--gutter) 1.25rem;
background: var(--white);
border-bottom: 1px solid var(--line);
box-shadow: 0 24px 40px -28px rgba(26, 33, 80, .45);
}
.main-nav.is-open { display: flex; }
.main-nav { opacity: 0; translate: 0 -.5rem; transition: opacity .16s ease, translate .2s cubic-bezier(.23, 1, .32, 1), display .2s allow-discrete; }
.main-nav.is-open { opacity: 1; translate: none; }
@starting-style { .main-nav.is-open { opacity: 0; translate: 0 -.5rem; } }
.main-nav a:not(.btn) { padding: .85rem 0; border-bottom: 1px solid var(--line); }
.main-nav a[aria-current="page"] { color: var(--c); border-bottom-color: var(--line); }
.nav-call { margin-top: 1rem; }
}
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--white); }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media picture,
.hero-media img { display: block; width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: 72% 40%; }
.hero-media::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(20, 26, 64, .93) 0%, rgba(20, 26, 64, .8) 32%, rgba(20, 26, 64, .25) 64%, rgba(20, 26, 64, 0) 86%),
linear-gradient(0deg, rgba(20, 26, 64, .7) 0%, rgba(20, 26, 64, 0) 38%);
}
.hero-inner {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: min(88vh, 52rem);
min-height: min(88svh, 52rem);
padding-block: 7rem 8.5rem;
}
.hero-slogan {
margin: 0 0 1.5rem;
font-size: clamp(2.6rem, 6.8vw, 5.6rem);
font-stretch: 125%;
font-weight: 340;
line-height: 1.02;
letter-spacing: -0.015em;
}
.hero-slogan span { display: block; }
.hero h1 { max-width: 34ch; margin-bottom: .75rem; font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 600; line-height: 1.35; }
.hero-lead { max-width: 40rem; font-size: 1.1rem; color: rgba(255, 255, 255, .84); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.hero-note { margin: 1.25rem 0 0; font-size: .95rem; color: rgba(255, 255, 255, .72); }
.hero-uj {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: .6rem;
max-width: 100%;
margin-top: 1.4rem;
padding: .35rem .85rem .35rem .4rem;
border: 1px solid rgba(255, 255, 255, .35);
border-radius: 999px;
background: rgba(255, 255, 255, .1);
color: var(--white);
font-size: .95rem;
font-weight: 600;
line-height: 1.3;
text-decoration: none;
transition: background-color .2s ease, border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .hero-uj:hover { border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .18); color: var(--white); } }
.hero-uj-cimke { flex: none; padding: .2rem .6rem; border-radius: 999px; background: var(--white); color: var(--navy); font-size: .78rem; font-weight: 700; }
.hero-uj .icon { width: 1rem; height: 1rem; transition: transform .25s ease; }
@media (hover: hover) and (pointer: fine) { .hero-uj:hover .icon { transform: translateX(3px); } }
@media (prefers-reduced-motion: no-preference) {
.hero-uj-cimke { animation: uj-villan 1.3s ease 2.2s 1; }
}
@keyframes uj-villan { 0%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } 40% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(255, 255, 255, .22); } }
@media (max-width: 699px) {
.hero-media { bottom: auto; height: 62vh; height: 62svh; }
.hero-media img { object-position: 50% 50%; }
.hero-media::after {
background: linear-gradient(180deg, rgba(20, 26, 64, .15) 0%, rgba(20, 26, 64, 0) 25%, rgba(20, 26, 64, .65) 66%, var(--ink) 100%);
}
.hero-inner { min-height: 0; padding-top: 40vh; padding-top: 40svh; padding-bottom: 5rem; }
.hero-lead { font-size: 1.02rem; }
}
.chooser { position: relative; z-index: 2; margin-top: -4.5rem; padding-bottom: var(--space); }
.chooser-panel {
display: grid;
grid-template-columns: minmax(0, 5fr) 8px minmax(0, 7fr);
gap: clamp(1.5rem, 3vw, 2.75rem);
padding: clamp(1.25rem, 3vw, 2.5rem);
background: var(--white);
border-radius: 22px;
box-shadow: 0 0 0 1px var(--line), 0 34px 60px -40px rgba(26, 33, 80, .55);
}
.chooser-pick h2 { margin-bottom: .5rem; font-size: clamp(1.7rem, 2.6vw, 2.25rem); }
.chooser-hint { margin-bottom: 1.5rem; color: var(--ink-soft); }
.choices { display: grid; gap: .75rem; }
.choice {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr) 1.6rem;
align-items: center;
gap: 1rem;
padding: .85rem 1rem;
border: 1.5px solid var(--line);
border-radius: 16px;
background: var(--white);
color: var(--ink);
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: border-color .2s ease, background-color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .choice:hover { border-color: var(--c); color: var(--ink); } }
.choice-icon {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
border-radius: 12px;
background: var(--c-tint);
color: var(--c);
transition: background-color .2s ease, color .2s ease;
}
.choice-icon .icon { width: 1.65rem; height: 1.65rem; }
.choice-text { display: grid; gap: .1rem; min-width: 0; }
.choice-name { font-size: 1.2rem; font-stretch: 112%; font-weight: 650; line-height: 1.2; }
.choice-sub { font-size: .92rem; line-height: 1.35; color: var(--ink-soft); }
.choice-check {
display: grid;
place-items: center;
width: 1.6rem;
height: 1.6rem;
border: 1.5px solid var(--line-strong);
border-radius: 50%;
color: transparent;
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.choice-check .icon { width: 1rem; height: 1rem; stroke-width: 2.4; }
.choice.is-on { border-color: var(--c); background: var(--c-tint); }
.choice.is-on .choice-icon { background: var(--c); color: var(--white); }
.choice.is-on .choice-check { border-color: var(--c); background: var(--c); color: var(--white); }
.choice-all {
margin-top: 1rem;
padding: .25rem 0;
border: 0;
background: none;
color: var(--navy);
font: inherit;
font-weight: 600;
text-decoration: underline;
text-underline-offset: .2em;
cursor: pointer;
}
.pipe { --dir: 180deg; --shade: 90deg; display: flex; flex-direction: column; overflow: hidden; border-radius: 999px; background: var(--line); }
.pipe-seg { position: relative; flex: 0 1 0%; min-width: 0; min-height: 0; background: var(--c-pipe); transition: flex-grow .55s cubic-bezier(.3, .7, .2, 1); }
.pipe-seg.is-on { flex-grow: 1; }
.pipe-seg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--shade), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%, rgba(10, 20, 60, .2)); }
.house { margin: 1.75rem 0 0; padding: .9rem .9rem .75rem; border-radius: 16px; background: var(--paper); }
.house svg { width: 100%; height: auto; }
.house figcaption { margin-top: .4rem; font-size: .9rem; color: var(--ink-soft); }
.house.is-paused,
.house.is-paused * { animation-play-state: paused !important; }
.h-soil { fill: #E7ECF4; }
.h-frame { fill: none; stroke: #9AA6C0; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.h-frame .h-inner { stroke: #C3CBDA; stroke-width: 1.6; }
.h-sys { color: #C3CBDA; transition: color .35s ease; }
.h-sys :is(path, rect, circle) { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.h-sys .h-unit { fill: var(--white); transition: fill .35s ease; }
.h-sys .base { stroke: #C3CBDA; }
.h-sys .live { stroke-width: 3.4; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .3s ease, opacity .3s ease; }
.h-sys .dots { stroke-width: 3.8; stroke-dasharray: 0 11; opacity: 0; transition: opacity .25s ease; }
.h-sys .h-air { stroke-dasharray: 4 7; opacity: 0; transition: opacity .3s ease; }
.h-sys text { fill: currentColor; font-family: var(--font); font-size: 13px; font-weight: 650; opacity: 0; transition: opacity .3s ease; }
.h-sys .h-tankfill { fill: #DCE3F6; stroke: none; transform: scaleY(0); transform-origin: 117px 233px; transform-box: view-box; transition: transform .35s ease; }
.h-sys .h-drop { fill: currentColor; stroke: none; opacity: 0; }
.fan { transform-box: view-box; }
.house.on-hutes .h-hutes { color: var(--cool); }
.house.on-futes .h-futes { color: var(--warm); }
.house.on-epuletgepeszet .h-epuletgepeszet { color: var(--navy); }
:is(.house.on-hutes .h-hutes, .house.on-futes .h-futes, .house.on-epuletgepeszet .h-epuletgepeszet) .live {
opacity: .3; stroke-dashoffset: 0;
transition: stroke-dashoffset .8s cubic-bezier(.5, 0, .2, 1), opacity .2s ease;
}
:is(.house.on-hutes .h-hutes, .house.on-futes .h-futes, .house.on-epuletgepeszet .h-epuletgepeszet) .h-unit {
fill: color-mix(in srgb, currentColor 9%, white);
filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 45%, transparent));
transition: fill .4s ease .25s;
}
:is(.house.on-hutes .h-hutes, .house.on-futes .h-futes, .house.on-epuletgepeszet .h-epuletgepeszet) .dots {
opacity: 1; transition: opacity .4s ease .7s; animation: house-dots 1.1s linear infinite;
}
:is(.house.on-hutes .h-hutes, .house.on-futes .h-futes) .h-air {
opacity: .85; transition: opacity .5s ease .9s; animation: house-air 1.3s linear infinite;
}
:is(.house.on-hutes .h-hutes, .house.on-futes .h-futes, .house.on-epuletgepeszet .h-epuletgepeszet) text {
opacity: 1; transition: opacity .4s ease .5s;
}
:is(.house.on-hutes .h-hutes, .house.on-futes .h-futes) .fan {
animation: fan-start 1.1s cubic-bezier(.45, 0, 1, 1) .35s, fan-spin .55s linear 1.45s infinite;
}
.house.on-epuletgepeszet .h-tankfill { transform: scaleY(1); transition: transform 1.4s cubic-bezier(.3, .7, .2, 1) .4s; }
.house.on-epuletgepeszet .h-drop { animation: drip 1.6s ease-in 1.2s infinite; }
.h-glow { opacity: 0; transition: opacity .4s ease; }
.house.on-hutes .h-glow-hutes,
.house.on-futes .h-glow-futes { opacity: 1; transition: opacity 1.4s ease .8s; }
.h-sun { opacity: 0; transform: scale(.6); transform-origin: 48px 44px; transform-box: view-box; transition: opacity .3s ease, transform .3s ease; }
.h-sun circle { fill: #FFE07A; stroke: var(--warm-1); stroke-width: 2; }
.h-rays { fill: none; stroke: var(--warm-1); stroke-width: 2.4; stroke-linecap: round; transform-box: view-box; }
.house.on-hutes .h-sun { opacity: 1; transform: none; transition: opacity .6s ease .2s, transform .8s cubic-bezier(.3, 1.5, .5, 1) .2s; }
.house.on-hutes .h-rays { animation: fan-spin 24s linear infinite; }
.h-snow { opacity: 0; transition: opacity .4s ease; }
.flake { fill: none; stroke: #8FB8EA; stroke-width: 1.6; stroke-linecap: round; }
.house.on-futes .h-snow { opacity: 1; transition: opacity .8s ease .3s; }
.house.on-futes .flake { animation: snow-fall 4.5s linear infinite; }
.h-stat { fill: var(--white); stroke: #C3CBDA; stroke-width: 1.6; transition: stroke .4s ease; }
.h-stat-num { fill: #9AA6C0; font-family: var(--font); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; transition: fill .4s ease; }
.house[data-mode="hutes"] .h-stat { stroke: var(--cool); }
.house[data-mode="hutes"] .h-stat-num { fill: var(--cool); }
.house[data-mode="futes"] .h-stat { stroke: var(--warm); }
.house[data-mode="futes"] .h-stat-num { fill: var(--warm); }
.house[data-mode="auto"] .h-stat { stroke: var(--navy); }
.house[data-mode="auto"] .h-stat-num { fill: var(--navy); }
@keyframes house-dots { to { stroke-dashoffset: -22; } }
@keyframes house-air { to { stroke-dashoffset: -22; } }
@keyframes fan-start { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes fan-spin { to { transform: rotate(360deg); } }
@keyframes drip {
0% { transform: translateY(0); opacity: 0; }
20% { opacity: 1; }
70% { transform: translateY(7px); opacity: 1; }
100% { transform: translateY(9px); opacity: 0; }
}
@keyframes snow-fall {
0% { transform: translate(0, -8px); opacity: 0; }
15%, 85% { opacity: 1; }
100% { transform: translate(6px, 70px); opacity: 0; }
}
.pipe-hutes { --c-pipe: linear-gradient(var(--dir), var(--cool-3), var(--cool)); }
.pipe-futes { --c-pipe: linear-gradient(var(--dir), var(--warm-1), var(--warm-2), var(--warm-3)); }
.pipe-epuletgepeszet { --c-pipe: linear-gradient(var(--dir), #7A86D6, var(--navy)); }
.chooser-result { min-width: 0; }
.result-head h3 { margin-bottom: .4rem; font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-stretch: 108%; font-weight: 650; line-height: 1.2; }
.result-head p { max-width: 48ch; margin-bottom: 1.25rem; color: var(--ink-soft); }
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto 1.25rem;
grid-template-areas: "name tags go" "short short go";
align-items: center;
gap: .2rem 1rem;
padding: .95rem .35rem;
border-bottom: 1px solid var(--line);
color: var(--ink);
text-decoration: none;
transition: background-color .15s ease;
}
@media (hover: hover) and (pointer: fine) { .row:hover { background: var(--paper); color: var(--ink); } }
.row-name { grid-area: name; font-size: 1.08rem; font-stretch: 106%; font-weight: 650; }
.row-short { grid-area: short; font-size: .95rem; line-height: 1.45; color: var(--ink-soft); }
.row-tags { grid-area: tags; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; }
.row-go { grid-area: go; width: 1.25rem; height: 1.25rem; color: var(--line-strong); }
@media (hover: hover) and (pointer: fine) { .row:hover .row-go { color: var(--navy); } }
.tag {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .12rem .55rem;
border-radius: 999px;
background: var(--c-tint);
color: var(--c);
font-size: .78rem;
font-weight: 650;
line-height: 1.5;
white-space: nowrap;
text-decoration: none;
}
.tag::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; }
.result-photos { margin-top: 1.5rem; }
.result-label { margin-bottom: .6rem; font-size: .95rem; font-weight: 600; color: var(--ink-soft); }
.thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.thumbs a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--paper); cursor: zoom-in; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }
.result-pages { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.result-pages a { color: var(--navy); font-weight: 600; }
@media (max-width: 900px) {
.chooser { margin-top: -2.5rem; }
.chooser-panel { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; border-radius: 18px; }
.pipe { --dir: 90deg; --shade: 180deg; flex-direction: row; height: 8px; }
.house { max-width: 30rem; }
}
@media (max-width: 520px) {
.row { grid-template-columns: minmax(0, 1fr) 1.25rem; grid-template-areas: "name go" "short go" "tags go"; }
.row-tags { justify-content: flex-start; margin-top: .35rem; }
.choice { gap: .8rem; padding: .75rem .85rem; }
}
.process { padding-block: var(--space); background: var(--paper); }
.steps {
position: relative;
list-style: none;
margin: 2.5rem 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 2rem;
}
.steps::before { content: ""; position: absolute; top: 1.4rem; left: 1.4rem; right: 1.4rem; height: 2px; background: var(--line-strong); }
.steps li { position: relative; }
.step-no {
position: relative;
display: grid;
place-items: center;
width: 2.8rem;
height: 2.8rem;
margin-bottom: 1.25rem;
border-radius: 50%;
background: var(--navy);
color: var(--white);
font-stretch: 110%;
font-weight: 700;
box-shadow: 0 0 0 6px var(--paper);
}
.steps h3 { margin-bottom: .45rem; font-size: 1.15rem; font-weight: 650; }
.steps p { margin: 0; color: var(--ink-soft); }
@media (max-width: 860px) {
.steps { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.steps::before { top: 1.4rem; bottom: 1.4rem; left: 1.4rem; right: auto; width: 2px; height: auto; }
.steps li { padding-left: 4.25rem; min-height: 2.8rem; }
.step-no { position: absolute; top: 0; left: 0; margin: 0; }
}
.projects { padding-block: var(--space); }
.project-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-auto-rows: minmax(15.5rem, auto);
grid-auto-flow: dense;
gap: 1rem;
}
.tile-big { grid-column: span 4; grid-row: span 2; }
.tile-tall { grid-column: span 2; grid-row: span 2; }
.tile-small,
.tile-cta { grid-column: span 2; }
.tile-wide { grid-column: span 4; }
.project-card {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
border-radius: var(--radius);
background: var(--ink);
color: var(--white);
text-decoration: none;
}
.project-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.project-card::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(0deg, rgba(20, 26, 64, .92) 0%, rgba(20, 26, 64, .5) 40%, rgba(20, 26, 64, 0) 68%);
}
@media (hover: hover) and (pointer: fine) { .project-card:hover { color: var(--white); } }
@media (hover: hover) and (pointer: fine) { .project-card:hover img { transform: scale(1.04); } }
.project-count {
position: absolute;
top: .85rem;
right: .85rem;
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .25rem .65rem .25rem .5rem;
border-radius: 999px;
background: rgba(20, 26, 64, .66);
font-size: .82rem;
font-weight: 600;
white-space: nowrap;
}
.project-count .icon { width: 1rem; height: 1rem; }
.project-body { padding: 1.25rem 1.4rem 1.35rem; }
.project-place { margin-bottom: .35rem; font-size: clamp(1.3rem, 2vw, 1.6rem); font-stretch: 108%; font-weight: 650; line-height: 1.15; }
.tile-big .project-place { font-size: clamp(1.5rem, 2.8vw, 2.2rem); }
.project-what { max-width: 34rem; margin: 0; font-size: .97rem; line-height: 1.45; color: rgba(255, 255, 255, .86); }
.project-cta {
display: flex;
flex-direction: column;
justify-content: center;
gap: .6rem;
height: 100%;
padding: 1.5rem;
border-radius: var(--radius);
background: var(--navy);
color: var(--white);
}
.project-cta h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); font-stretch: 108%; font-weight: 650; }
.project-cta p { margin: 0; font-size: .97rem; line-height: 1.45; color: rgba(255, 255, 255, .86); }
.project-cta a { color: var(--white); }
@media (hover: hover) and (pointer: fine) { .project-cta a:hover { color: var(--white); text-decoration-thickness: 2px; } }
.cta-phone { font-size: clamp(1.4rem, 2.3vw, 1.75rem); font-stretch: 110%; font-weight: 600; text-decoration: none; }
.cta-link { font-weight: 600; }
@media (max-width: 960px) {
.project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(14rem, auto); }
.tile-big, .tile-wide { grid-column: span 2; }
.tile-tall { grid-column: span 1; grid-row: span 2; }
.tile-small, .tile-cta { grid-column: span 1; }
}
@media (max-width: 560px) {
.project-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
.project-grid > li { grid-column: auto; grid-row: auto; }
.project-card { height: auto; min-height: 19rem; }
.tile-big .project-card,
.tile-tall .project-card { min-height: 24rem; }
}
.brands {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: baseline;
gap: .4rem 2.5rem;
margin-top: clamp(2.5rem, 5vw, 4rem);
padding-top: 1.75rem;
border-top: 1px solid var(--line-strong);
}
.brands-label { margin: 0; font-size: .95rem; font-weight: 600; color: var(--ink-soft); }
.brand-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem 1.75rem; font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-stretch: 118%; font-weight: 450; line-height: 1.3; color: var(--navy); }
.brand-list .brand-main { font-weight: 700; color: var(--ink); }
.brands-note { grid-column: 2; margin: .4rem 0 0; color: var(--ink-soft); }
@media (max-width: 640px) {
.brands { grid-template-columns: minmax(0, 1fr); }
.brands-note { grid-column: 1; }
}
.about { padding-block: var(--space); background: var(--paper); }
.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(2.5rem, 7vw, 6rem); }
.about-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.about-text p { font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.55; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line-strong); }
.facts dt { font-size: clamp(1.8rem, 3vw, 2.4rem); font-stretch: 120%; font-weight: 400; line-height: 1.1; color: var(--navy); }
.facts dd { margin: .35rem 0 0; color: var(--ink-soft); }
@media (max-width: 860px) {
.about-grid { grid-template-columns: minmax(0, 1fr); }
.about-photo { max-width: 26rem; }
.about-photo img { aspect-ratio: 4 / 3.4; }
}
.gallery { padding-block: var(--space); }
.gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.gallery-grid a { display: block; height: 100%; overflow: hidden; border-radius: 10px; background: var(--paper); cursor: zoom-in; }
.gallery-grid img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) and (pointer: fine) { .gallery-grid a:hover img { transform: scale(1.04); } }
@media (min-width: 760px) {
.gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 13.5rem; grid-auto-flow: dense; gap: .8rem; }
.gallery-grid img { aspect-ratio: auto; }
.g-tall { grid-row: span 2; }
.g-wide { grid-column: span 2; }
}
.area { padding-block: var(--space); background: var(--paper); }
.area-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.area-text p { font-size: 1.1rem; color: var(--ink-soft); }
.towns { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.towns li { padding: .4rem .95rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--white); font-weight: 550; line-height: 1.3; }
.towns .is-home { border-color: var(--navy); background: var(--navy); color: var(--white); }
.area-map { padding: clamp(1rem, 3vw, 2rem); border-radius: 22px; background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.map { width: 100%; max-width: 30rem; height: auto; margin-inline: auto; }
.map-river { fill: none; stroke: #C4E4F8; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.map-dot { fill: var(--navy); stroke: var(--white); stroke-width: 2; }
.map-city { fill: var(--white); stroke: var(--navy); stroke-width: 2.5; }
.map-home circle { fill: var(--navy); }
.map-home path { fill: none; stroke: var(--white); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.map-label { fill: var(--ink); font-family: var(--font); font-size: 11px; font-weight: 600; paint-order: stroke; stroke: var(--white); stroke-width: 4px; stroke-linejoin: round; }
.map-label.is-home { fill: var(--navy); font-size: 14px; font-weight: 750; }
.map-label.has-munka { font-weight: 750; }
.map-wrap { position: relative; max-width: 30rem; margin-inline: auto; container-type: inline-size; }
.map-kep { position: relative; }
.map-wrap .map { display: block; max-width: none; }
.map-pin {
position: absolute;
z-index: 2;
display: grid;
place-items: center;
width: 44px;
height: 44px;
translate: -50% -50%;
border-radius: 50%;
color: var(--white);
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .map-pin:hover { color: var(--white); } }
.map-pin-jel {
position: relative;
display: grid;
place-items: center;
width: clamp(1.45rem, 7.4cqw, 1.95rem);
height: clamp(1.45rem, 7.4cqw, 1.95rem);
border-radius: 50%;
background: var(--navy);
box-shadow: 0 0 0 2.5px var(--white), 0 3px 10px rgba(20, 26, 64, .28);
transition: background-color .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
}
.map-pin-jel .icon { width: 56%; height: 56%; }
.map-pin.is-otthon .map-pin-jel { width: clamp(1.15rem, 5.6cqw, 1.5rem); height: clamp(1.15rem, 5.6cqw, 1.5rem); }
.map-pin-jel.is-foto,
.map-pin.is-otthon .map-pin-jel.is-foto { width: clamp(1.95rem, 10cqw, 2.6rem); height: clamp(1.95rem, 10cqw, 2.6rem); background: var(--white); }
.map-pin-jel.is-foto img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.map-pin.is-aktiv .map-pin-jel.is-foto { background: var(--white); box-shadow: 0 0 0 3px var(--cool), 0 3px 10px rgba(20, 26, 64, .28); }
@media (hover: hover) and (pointer: fine) { .map-pin:hover .map-pin-jel { transform: scale(1.12); } }
.map-pin.is-aktiv .map-pin-jel { background: var(--cool); transform: scale(1.12); }
.map-pin:focus-visible { outline: none; }
.map-pin:focus-visible .map-pin-jel { outline: 3px solid var(--cool-2); outline-offset: 3px; }
.map-wrap.is-varakozik:not(.is-latszik) .map-pin-jel { opacity: 0; }
.map-wrap.is-latszik .map-pin-jel { animation: map-pin-be .55s cubic-bezier(.2, .9, .3, 1.25) calc(var(--i, 0) * 110ms + 150ms) backwards; }
.map-pin-jel::after {
content: "";
position: absolute;
inset: -3px;
border: 2px solid var(--cool-2);
border-radius: 50%;
opacity: 0;
pointer-events: none;
}
.map-wrap.is-latszik .map-pin-jel::after { animation: map-pin-ping 1.3s ease-out calc(var(--i, 0) * 110ms + 650ms) 1; }
@keyframes map-pin-be { from { opacity: 0; transform: scale(.35); } }
@keyframes map-pin-ping { from { opacity: .9; transform: scale(.9); } to { opacity: 0; transform: scale(2); } }
.map-card {
position: absolute;
z-index: 3;
width: 17rem;
padding: 1rem 1rem 1.1rem;
border-radius: 16px;
background: var(--white);
box-shadow: 0 0 0 1px var(--line), 0 22px 44px -20px rgba(20, 26, 64, .5);
opacity: 0;
translate: 8px 0;
transition: opacity .22s ease, translate .3s cubic-bezier(.2, .8, .2, 1);
scroll-margin: 5.5rem 0 6.5rem;
}
.map-card.is-balra { translate: -8px 0; }
.map-card.is-nyitva { opacity: 1; translate: 0 0; }
.map-card::before {
content: "";
position: absolute;
top: var(--nyil, 50%);
left: -7px;
width: 14px;
height: 14px;
background: var(--white);
box-shadow: -1px 1px 0 var(--line);
translate: 0 -50%;
rotate: 45deg;
}
.map-card.is-balra::before { left: auto; right: -7px; box-shadow: 1px -1px 0 var(--line); }
.map-card.is-alul { position: relative; width: auto; margin-top: 1rem; translate: 0 8px; }
.map-card.is-alul.is-nyitva { translate: 0 0; }
.map-card.is-alul::before { display: none; }
.map-card h3 { margin: 0 2.25rem .7rem 0; font-size: 1.2rem; font-stretch: 110%; font-weight: 700; line-height: 1.2; }
.map-card p { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--ink-soft); }
.map-card p strong { display: block; margin-bottom: .1rem; font-weight: 650; color: var(--ink); }
.map-card-close {
position: absolute;
top: .45rem;
right: .45rem;
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--ink-soft);
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .map-card-close:hover { background: var(--paper); color: var(--ink); } }
.map-card-close .icon { width: 1.15rem; height: 1.15rem; }
.map-card-foto { position: relative; display: block; overflow: hidden; margin-bottom: .75rem; border-radius: 10px; color: var(--white); }
@media (hover: hover) and (pointer: fine) { .map-card-foto:hover { color: var(--white); } }
.map-card-foto img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) and (pointer: fine) { .map-card-foto:hover img { transform: scale(1.04); } }
.map-card-foto .project-count { top: .5rem; right: .5rem; font-size: .78rem; }
.map-card.is-tobb .map-card-munka { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); gap: .75rem; align-items: start; }
.map-card.is-tobb .map-card-munka + .map-card-munka { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.map-card.is-tobb .map-card-foto { margin: 0; }
.map-card.is-tobb .map-card-foto img { aspect-ratio: 1; }
.map-card.is-tobb .project-count { display: none; }
.map-card-tovabb { display: inline-block; margin-top: .85rem; font-weight: 600; color: var(--navy); }
.map-jelmagyarazat { margin: .75rem 0 0; font-size: .92rem; color: var(--ink-soft); text-align: center; text-wrap: balance; }
.map-pin-minta { flex: none; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--navy); color: var(--white); }
.map-pin-minta .icon { width: 56%; height: 56%; }
.towns .has-munka { padding: 0; border: 0; background: none; }
.towns .has-munka a {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .4rem .8rem .4rem .95rem;
border: 1px solid var(--navy);
border-radius: 999px;
background: var(--white);
color: var(--navy);
text-decoration: none;
transition: background-color .2s ease, color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .towns .has-munka a:hover { background: var(--navy); color: var(--white); } }
.towns .has-munka .icon { width: 1rem; height: 1rem; }
.towns .is-home.has-munka a { background: var(--navy); color: var(--white); }
@media (prefers-reduced-motion: reduce) {
.map-card, .map-pin-jel, .map-card-foto img { transition: none; }
}
.parallaxis .hero-media { overflow: hidden; }
.parallaxis .hero-media img { will-change: translate, scale; }
.parallaxis .project-card img,
.parallaxis .about-photo img,
.parallaxis .page-hero-photo img { scale: 1.12; }
.parallaxis .about-photo,
.parallaxis .page-hero-photo { overflow: hidden; border-radius: var(--radius); }
@media (max-width: 860px) {
.area-grid { grid-template-columns: minmax(0, 1fr); }
}
.quote { padding-block: var(--space); background: var(--ink); color: var(--white); }
.quote a { color: var(--white); }
@media (hover: hover) and (pointer: fine) { .quote a:hover { color: var(--cool-3); } }
.quote-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); grid-template-rows: auto 1fr;
grid-template-areas: "fej urlap" "tobbi urlap"; column-gap: clamp(2rem, 6vw, 5rem); row-gap: 0; }
.quote-grid > .quote-intro { grid-area: fej; }
.quote-grid > .quote-tobbi { grid-area: tobbi; }
.quote-grid > :is(.quote-form, .form-message) { grid-area: urlap; }
.quote-intro p { color: rgba(255, 255, 255, .8); }
.quote-phone { display: grid; margin-top: 1.5rem; }
.quote-phone a { font-size: 1.6rem; font-stretch: 112%; font-weight: 550; text-decoration: none; }
.quote-phone span { font-size: .95rem; }
.quote-form { display: grid; gap: 1.1rem; }
.needs-field { margin: 0; padding: 0; border: 0; }
.needs-field legend { margin-bottom: .6rem; padding: 0; font-size: .98rem; font-weight: 600; }
.need-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.need-pill { position: relative; cursor: pointer; }
.need-pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pill-face {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .6rem 1.05rem;
border: 1.5px solid rgba(255, 255, 255, .32);
border-radius: 999px;
font-weight: 600;
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.pill-face .icon { width: 1.2rem; height: 1.2rem; }
@media (hover: hover) and (pointer: fine) { .need-pill:hover .pill-face { border-color: rgba(255, 255, 255, .7); } }
.need-pill input:checked + .pill-face { border-color: var(--white); background: var(--white); color: var(--c); }
.need-pill input:focus-visible + .pill-face { outline: 3px solid var(--cool-2); outline-offset: 2px; }
.field { display: grid; gap: .35rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field label { font-size: .98rem; font-weight: 600; }
.optional { font-weight: 400; color: rgba(255, 255, 255, .7); }
.kotelezo { font-weight: 700; color: #FFB37A; }
.kotelezo-magyarazat { margin: .4rem 0 0; font-size: .88rem; color: rgba(255, 255, 255, .75); }
.field input,
.field select,
.field textarea {
width: 100%;
padding: .75rem .85rem;
border: 1.5px solid transparent;
border-radius: 10px;
background: var(--white);
color: var(--ink);
font: inherit;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 1px; }
.check { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .75rem; font-size: .95rem; color: rgba(255, 255, 255, .84); }
.check input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; accent-color: var(--cool-2); }
.quote-form .btn { justify-self: start; }
.hp { position: absolute; left: -9999px; }
.form-error { margin: 0; padding: .75rem 1rem; border-left: 3px solid var(--warm-2); background: rgba(255, 255, 255, .1); }
.field-hiba { margin: .1rem 0 0; font-size: .92rem; font-weight: 600; line-height: 1.35; color: #FFD7BF; }
.check .field-hiba { grid-column: 1 / -1; margin: 0; }
.quote-form .field [aria-invalid="true"] { border-color: var(--warm-2); }
.quote-form .check input[aria-invalid="true"] { outline: 2px solid var(--warm-2); outline-offset: 2px; }
.form-message h3 { margin-bottom: .5rem; font-size: 1.5rem; font-stretch: 110%; }
.csatolt-rajz { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: 1rem; padding: .75rem; border: 1.5px solid rgba(255, 255, 255, .32); border-radius: 12px; }
.csatolt-rajz img { width: 100%; height: 5.5rem; object-fit: contain; border-radius: 6px; background: var(--white); }
.csatolt-rajz p { margin: 0 0 .35rem; font-size: .95rem; line-height: 1.45; color: rgba(255, 255, 255, .85); }
.csatolt-rajz strong { color: var(--white); }
.quote .link-btn { color: var(--white); }
@media (hover: hover) and (pointer: fine) { .quote .link-btn:hover { color: var(--cool-3); } }
@media (max-width: 860px) { .quote-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "fej" "urlap" "tobbi"; row-gap: 2rem; } }
@media (max-width: 520px) { .field-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) { .csatolt-rajz { grid-template-columns: 5.5rem minmax(0, 1fr); } }
.page-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 4rem); background: var(--paper); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.page-hero h1 { margin-bottom: 1rem; font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-stretch: 112%; font-weight: 600; line-height: 1.06; letter-spacing: -0.01em; }
.page-hero .lead { max-width: 40rem; font-size: 1.15rem; color: var(--ink-soft); }
.page-hero .hero-actions { margin-top: 1.5rem; }
.page-hero-photo img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius); }
.page-hutes .page-hero-photo::after,
.page-futes .page-hero-photo::after,
.page-epuletgepeszet .page-hero-photo::after { content: ""; display: block; height: 6px; margin-top: .8rem; border-radius: 999px; background: var(--c-pipe); }
.crumbs { margin-bottom: 1rem; font-size: .95rem; color: var(--ink-soft); }
.page-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 1rem 0 0; font-size: .95rem; color: var(--ink-soft); }
.intro { padding-block: var(--space); }
.intro p { margin: 0; font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.5; }
.cat-section { padding-block: var(--space); }
.cat-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: clamp(2rem, 5vw, 4.5rem); }
.cat-grid h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.cat-combos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.combo-link { display: grid; gap: .3rem; padding: 1.1rem 1.2rem; border: 1.5px solid var(--line); border-radius: 16px; color: var(--ink); text-decoration: none; transition: border-color .2s ease; }
@media (hover: hover) and (pointer: fine) { .combo-link:hover { border-color: var(--navy); color: var(--ink); } }
.combo-icons { display: flex; gap: .35rem; margin-bottom: .35rem; }
.combo-icon { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 10px; background: var(--c-tint); color: var(--c); }
.combo-icon .icon { width: 1.3rem; height: 1.3rem; }
.combo-title { font-stretch: 106%; font-weight: 650; }
.combo-tip { font-size: .95rem; color: var(--ink-soft); }
.cat-photos { padding-bottom: var(--space); }
.photo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.photo-grid a { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: var(--paper); cursor: zoom-in; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; }
.cta-band { padding-block: clamp(3rem, 6vw, 4.5rem); background: var(--ink); color: var(--white); }
.cta-band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; }
.cta-band h2 { margin-bottom: .4rem; }
.cta-band p { margin: 0; color: rgba(255, 255, 255, .8); }
.cta-band .hero-actions { margin: 0; }
@media (max-width: 860px) {
.page-hero-grid,
.cat-grid { grid-template-columns: minmax(0, 1fr); }
.page-hero-photo img { aspect-ratio: 16 / 10; }
}
@media (max-width: 760px) {
.photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.legal h2 { margin: 2.75rem 0 .8rem; font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
.legal h3 { margin: 1.9rem 0 .6rem; font-size: 1.15rem; font-stretch: 112%; font-weight: 650; line-height: 1.3; }
.legal code { padding: .05em .35em; border-radius: 5px; background: var(--paper); font-size: .92em; }
.intro.legal p { margin: 0 0 1em; font-size: inherit; line-height: inherit; }
.legal ul { margin: 0 0 1em; padding-left: 1.25rem; }
.legal li { margin-bottom: .45rem; }
.legal a { overflow-wrap: anywhere; }
.legal-summary { padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--radius); background: var(--paper); }
.legal-summary h2 { margin-top: 0; }
.legal-summary ul { margin: 0; }
.legal-summary .legal-facts, .legal-summary .legal-facts dd:last-child { margin-bottom: 0; }
.legal-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .5rem 1.5rem; margin: 0 0 1.25rem; }
.legal-facts dt { font-weight: 650; }
.legal-facts dd { margin: 0; }
.intro.legal .legal-date { margin-top: 2.5rem; color: var(--ink-soft); }
@media (max-width: 560px) {
.legal-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
.legal-facts dd { margin-bottom: .75rem; }
}
.blog-list { padding-block: clamp(2.5rem, 5vw, 4rem) var(--space); }
.blog-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.blog-filter a {
padding: .4rem .95rem;
border: 1.5px solid var(--line);
border-radius: 999px;
color: var(--ink);
font-size: .95rem;
font-weight: 600;
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .blog-filter a:hover { border-color: var(--c, var(--navy)); } }
.blog-filter a[aria-current] { border-color: var(--c, var(--navy)); background: var(--c-tint, var(--paper)); color: var(--c, var(--navy)); }
.blog-empty { max-width: 40rem; margin: 0; font-size: 1.15rem; color: var(--ink-soft); }
.post-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1.25rem; }
.post-card {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border: 1.5px solid var(--line);
border-radius: 16px;
background: var(--white);
color: var(--ink);
text-decoration: none;
transition: border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .post-card:hover { border-color: var(--navy); color: var(--ink); } }
.post-card-photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper); }
.post-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) and (pointer: fine) { .post-card:hover .post-card-photo img { transform: scale(1.03); } }
.post-card-body { display: flex; flex: 1; flex-direction: column; gap: .5rem; padding: 1.1rem 1.25rem 1.25rem; }
.post-card-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.post-card-title { margin: 0; font-size: 1.22rem; font-stretch: 108%; font-weight: 650; line-height: 1.25; }
.post-card-desc { font-size: .97rem; line-height: 1.5; color: var(--ink-soft); }
.post-card-meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: auto; padding-top: .4rem; font-size: .88rem; color: var(--ink-soft); }
@media (min-width: 761px) {
.blog-list .post-cards > li:first-child { grid-column: 1 / -1; }
.blog-list .post-cards > li:first-child .post-card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.blog-list .post-cards > li:first-child .post-card-photo { aspect-ratio: auto; min-height: 20rem; }
.blog-list .post-cards > li:first-child .post-card-body { justify-content: center; padding: clamp(1.5rem, 3vw, 2.5rem); }
.blog-list .post-cards > li:first-child .post-card-title { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; }
.blog-list .post-cards > li:first-child .post-card-desc { font-size: 1.05rem; }
.blog-list .post-cards > li:first-child .post-card-meta { margin-top: .5rem; }
}
.page-hero .post-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; margin: 1rem 0 0; font-size: .95rem; color: var(--ink-soft); }
.post-body { padding-block: clamp(2.5rem, 5vw, 3.5rem) var(--space); }
.post-draft { padding: .9rem 1.1rem; border: 1px solid #F5C9A9; border-radius: 12px; background: #FFF1E7; font-size: .97rem; }
.post-toc { margin-bottom: 2.25rem; padding: 1.1rem 1.35rem; border: 1.5px solid var(--line); border-radius: 14px; }
.post-toc-title { margin: 0 0 .4rem; font-weight: 650; }
.post-toc ul { list-style: none; margin: 0; padding: 0; }
.post-toc li { margin: .25rem 0; }
.post-toc a { color: var(--ink); }
.post-text { font-size: 1.1rem; line-height: 1.7; }
.post-text > :first-child { margin-top: 0; }
.post-text p { margin: 0 0 1.1em; }
.post-text h2 { margin: 2.6rem 0 .8rem; font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-stretch: 112%; font-weight: 600; line-height: 1.15; }
.post-text h3 { margin: 2rem 0 .5rem; font-size: 1.22rem; font-stretch: 108%; font-weight: 650; line-height: 1.3; }
.post-text ul,
.post-text ol { margin: 0 0 1.2em; padding-left: 1.35rem; }
.post-text li { margin-bottom: .45rem; }
.post-text li::marker { color: var(--c, var(--navy)); }
.post-text a { color: var(--navy); }
.post-text strong { font-weight: 650; }
.post-text code { padding: .05em .35em; border-radius: 5px; background: var(--paper); font-size: .9em; }
.post-note {
margin: 1.75rem 0;
padding: 1rem 1.25rem;
border-left: 4px solid var(--c, var(--navy));
border-radius: 0 12px 12px 0;
background: var(--c-tint, var(--paper));
}
.post-note p { margin: 0; }
.post-figure { margin: 2rem 0; }
.post-figure a { display: block; overflow: hidden; border-radius: 12px; background: var(--paper); cursor: zoom-in; }
.post-figure img { width: 100%; height: auto; max-height: 34rem; object-fit: cover; }
.post-figure figcaption { margin-top: .6rem; font-size: .92rem; line-height: 1.45; color: var(--ink-soft); }
.table-wrap { margin: 1.75rem 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .98rem; line-height: 1.45; }
.table-wrap th,
.table-wrap td { padding: .65rem .9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table-wrap thead th { background: var(--c-tint, var(--paper)); font-weight: 650; }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 520px) {
.table-wrap table { font-size: .88rem; }
.table-wrap th,
.table-wrap td { padding: .5rem .55rem; hyphens: auto; }
}
.post-author { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--ink-soft); }
.post-author p { margin: 0 0 .3rem; }
.post-author .post-author-name { font-weight: 650; color: var(--ink); }
.post-updated { font-size: .92rem; }
.post-services { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.post-services h2,
.post-more h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.post-more { padding-block: clamp(3rem, 6vw, 4.5rem); background: var(--paper); }
.szolg { padding-block: var(--space); }
.szolg-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; gap: clamp(2rem, 5vw, 4.5rem); }
.szolg-szoveg > p { max-width: 42rem; font-size: 1.1rem; line-height: 1.65; }
.szolg-szoveg h2 { margin: 2.25rem 0 1rem; font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.pipa-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .7rem 1.5rem; }
.pipa-lista li { display: flex; align-items: flex-start; gap: .6rem; font-size: 1.05rem; line-height: 1.45; }
.pipa-lista .icon { flex: none; width: 1.35rem; height: 1.35rem; margin-top: .05rem; color: var(--c, var(--navy)); stroke-width: 2.4; }
.szolg-modok { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; margin-top: 2rem; }
.szolg-mod { display: flex; flex-direction: column; padding: 1.35rem 1.4rem; border: 1.5px solid var(--line); border-radius: 16px; }
.szolg-mod h3 { margin-bottom: .35rem; font-size: 1.25rem; font-stretch: 108%; font-weight: 650; }
.szolg-mod p { margin: 0 0 .8rem; line-height: 1.55; color: var(--ink-soft); }
.szolg-mod .szolg-mod-mikor { font-weight: 600; color: var(--c, var(--navy)); }
.szolg-mod .szolg-mod-ar { margin: auto 0 0; padding-top: .8rem; border-top: 1px solid var(--line); font-size: 1.35rem; font-stretch: 108%; font-weight: 650; color: var(--ink); }
.szolg-mod-ar span { font-size: .95rem; font-weight: 500; color: var(--ink-soft); }
.ar-kartya { position: sticky; top: 5.5rem; display: grid; gap: .9rem; padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: 20px; background: var(--paper); }
.ar-kartya h2 { margin: 0; font-size: 1.5rem; }
.ar-kartya dl { display: grid; gap: .25rem; margin: 0; }
.ar-kartya dt { font-size: .95rem; color: var(--ink-soft); }
.ar-kartya dd { margin: 0 0 .7rem; font-size: 1.3rem; font-stretch: 108%; font-weight: 650; }
.ar-kartya p { margin: 0; font-size: .93rem; line-height: 1.5; color: var(--ink-soft); }
.ar-kartya .btn { justify-self: start; }
@media (max-width: 900px) {
.szolg-grid { grid-template-columns: minmax(0, 1fr); }
.ar-kartya { position: static; }
}
.szolg-munkak { padding-bottom: var(--space); }
.hely-szakasz { padding-top: var(--space); }
.hely-szakasz + .cta-band { margin-top: var(--space); }
.hely-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: .6rem 1rem; }
.hely-lista li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .75rem; padding: .85rem 1.1rem; border: 1.5px solid var(--line); border-radius: var(--radius); }
.hely-lista .is-home { border-color: var(--navy); }
.hely-nev { font-size: 1.15rem; font-stretch: 106%; font-weight: 650; }
.hely-nev a { color: var(--navy); }
.hely-ut { color: var(--ink-soft); }
.hely-ut small { display: block; font-size: .85rem; }
.hely-resz { order: 3; flex-basis: 100%; font-size: .95rem; color: var(--ink-soft); }
.hely-munka { order: 4; flex-basis: 100%; font-size: .95rem; font-weight: 600; color: var(--navy); }
.hely-tav { margin: 0; font-size: 1.1rem; }
.hely-forras { margin-top: 1.75rem; font-size: .93rem; color: var(--ink-soft); }
.area-text .area-more { margin: 1.25rem 0 0; font-size: 1rem; }
.area-more a { font-weight: 600; color: var(--navy); }
.munkak { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.munka { display: flex; flex-direction: column; overflow: hidden; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--white); }
.munka-foto { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper); cursor: zoom-in; }
.munka-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) and (pointer: fine) { .munka-foto:hover img { transform: scale(1.04); } }
.munka-foto .project-count { color: var(--white); }
.munka-szoveg { display: flex; flex: 1; flex-direction: column; gap: .45rem; padding: 1rem 1.15rem 1.15rem; }
.munka-szoveg h3 { font-size: 1.15rem; font-stretch: 106%; font-weight: 650; line-height: 1.25; }
.munka-szoveg p { margin: 0; line-height: 1.5; color: var(--ink-soft); }
.munka-szoveg .munka-tagek { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: auto; padding-top: .2rem; }
.eszkozgombok { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }
.eszkozgomb {
position: relative;
display: inline-flex;
align-items: center;
gap: .75rem;
max-width: 100%;
min-height: 3.6rem;
padding: .5rem 1rem .6rem .5rem;
overflow: hidden;
border: 0;
border-radius: 16px;
background: var(--ink);
box-shadow: 0 14px 28px -20px rgba(26, 33, 80, .8);
color: var(--white);
text-decoration: none;
transition: background-color .2s ease, box-shadow .25s ease, transform .25s ease;
}
.eszkozgomb::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: linear-gradient(90deg, var(--cool-3), var(--cool), var(--cool-3)) 0 0 / 200% 100%;
transform-origin: left;
}
.eszkozgomb-hoszivattyu::after { background-image: linear-gradient(90deg, var(--warm-1), var(--warm-2), var(--warm-3), var(--warm-1)); }
@media (hover: hover) and (pointer: fine) { .eszkozgomb:hover { background: var(--navy); box-shadow: 0 18px 32px -20px rgba(26, 33, 80, .9); color: var(--white); } }
.eszkozgomb-ikon { display: grid; place-items: center; flex: none; width: 2.8rem; height: 2.8rem; border-radius: 12px; background: rgba(255, 255, 255, .1); color: var(--white); }
.eszkozgomb-ikon svg { width: 1.9rem; height: 1.9rem; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.eszkozgomb-szoveg { display: grid; gap: .05rem; min-width: 0; line-height: 1.25; }
.eszkozgomb-szoveg strong { font-weight: 650; }
.eszkozgomb-szoveg span { color: var(--cool-3); font-size: .9rem; font-weight: 600; }
.eszkozgomb-hoszivattyu .eszkozgomb-szoveg span { color: var(--warm-1); }
.eszkozgomb > .icon { width: 1.05rem; height: 1.05rem; flex: none; margin-left: .1rem; color: var(--white); transition: transform .25s ease; }
.eszkozgomb:focus-visible > .icon { transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) { .eszkozgomb:hover > .icon { transform: translateX(3px); } }
@media (max-width: 560px) {
.eszkozgomb { flex: 1 1 100%; }
.eszkozgomb > .icon { margin-left: auto; }
}
.eg-halvany { opacity: .5; }
.eg-tele { fill: currentColor; stroke: none; }
.eg-mutato { transform-box: view-box; transform-origin: 12px 17.5px; }
.eg-mutato path { stroke: var(--warm); stroke-width: 2; }
.eg-cso { stroke: var(--warm-2); stroke-dasharray: 1; stroke-dashoffset: 0; }
.eg-ho path { stroke: var(--warm-2); }
@media (prefers-reduced-motion: no-preference) {
@media (hover: hover) and (pointer: fine) { .eszkozgomb:hover { transform: translateY(-2px); } }
.eszkozgombok.is-latszik .eg-mutato { animation: eg-mutato-be 1.1s cubic-bezier(.2, .8, .3, 1.25) .3s both; }
.eszkozgombok.is-latszik .eg-gep { animation: eg-gep-be .8s cubic-bezier(.3, .7, .3, 1.3) .5s both; }
.eszkozgombok.is-latszik .eg-cso { animation: eg-cso-be 1s ease .7s both; }
.eszkozgombok.is-latszik .eg-ho path { animation: eg-ho-be .9s ease .4s both; }
.eszkozgombok.is-varakozik .eszkozgomb::after { transform: scaleX(0); }
.eszkozgombok.is-latszik .eszkozgomb::after { animation: eg-csik-be .9s cubic-bezier(.4, 0, .2, 1) .15s both; }
.eszkozgombok.is-latszik .eszkozgomb + .eszkozgomb::after { animation-delay: .3s; }
.eszkozgombok.is-latszik .eszkozgomb + .eszkozgomb + .eszkozgomb::after { animation-delay: .45s; }
.eszkozgomb:focus-visible::after { animation: eg-csik-fut 1.2s linear infinite; }
@media (hover: hover) and (pointer: fine) { .eszkozgomb:hover::after { animation: eg-csik-fut 1.2s linear infinite; } }
.eszkozgomb:focus-visible .eg-mutato { animation: eg-mutato 1s cubic-bezier(.2, .8, .3, 1.25); }
@media (hover: hover) and (pointer: fine) { .eszkozgomb:hover .eg-mutato { animation: eg-mutato 1s cubic-bezier(.2, .8, .3, 1.25); } }
.eszkozgomb:focus-visible .eg-gep { animation: eg-gep .7s cubic-bezier(.3, .7, .3, 1.3); }
@media (hover: hover) and (pointer: fine) { .eszkozgomb:hover .eg-gep { animation: eg-gep .7s cubic-bezier(.3, .7, .3, 1.3); } }
.eszkozgomb:focus-visible .eg-cso { animation: eg-cso .8s ease; }
@media (hover: hover) and (pointer: fine) { .eszkozgomb:hover .eg-cso { animation: eg-cso .8s ease; } }
.eszkozgomb:focus-visible .eg-ho path { animation: eg-ho 1.2s ease-in-out infinite; }
@media (hover: hover) and (pointer: fine) { .eszkozgomb:hover .eg-ho path { animation: eg-ho 1.2s ease-in-out infinite; } }
.eszkozgomb:focus-visible .eg-ho path + path { animation-delay: .3s; }
@media (hover: hover) and (pointer: fine) { .eszkozgomb:hover .eg-ho path + path { animation-delay: .3s; } }
}
@keyframes eg-mutato-be { from { transform: rotate(-115deg); } to { transform: none; } }
@keyframes eg-mutato { from { transform: rotate(-115deg); } to { transform: none; } }
@keyframes eg-gep-be { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes eg-gep { from { opacity: .2; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes eg-cso-be { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes eg-cso { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes eg-ho-be { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes eg-ho { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: .45; transform: translateY(-2.5px); } }
@keyframes eg-csik-be { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes eg-csik-fut { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
.eszkozgomb, .eszkozgomb > .icon { transition: none; }
}
.kalk { padding-block: clamp(2rem, 4vw, 3rem) var(--space); }
.kalk-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: clamp(1.5rem, 4vw, 3.5rem); }
.kalk-form { display: grid; gap: 1.5rem; }
.kalk-mezok { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
.kalk .field input { border-color: var(--line-strong); }
@media (hover: hover) and (pointer: fine) { .kalk .field input:hover { border-color: var(--navy); } }
.kalk .optional { font-weight: 400; color: var(--ink-soft); }
.kalk-csoport { margin: 0; padding: 0; border: 0; }
.kalk-csoport legend { margin-bottom: .6rem; padding: 0; font-size: .98rem; font-weight: 600; }
.kalk-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.kalk-chip { position: relative; cursor: pointer; }
.kalk-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kalk-chip span {
display: inline-block;
padding: .55rem 1rem;
border: 1.5px solid var(--line-strong);
border-radius: 999px;
font-size: .95rem;
font-weight: 600;
line-height: 1.3;
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .kalk-chip:hover span { border-color: var(--c, var(--navy)); } }
.kalk-chip input:checked + span { border-color: var(--c, var(--navy)); background: var(--c, var(--navy)); color: var(--white); }
.kalk-chip input:focus-visible + span { outline: 3px solid var(--cool-2); outline-offset: 2px; }
.kalk-check { display: flex; align-items: center; gap: .6rem; font-weight: 600; cursor: pointer; }
.kalk-check input { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--c, var(--navy)); }
.kalk-gaz { display: grid; gap: 1.1rem; padding: 1.25rem; border-radius: var(--radius); background: var(--paper); }
.kalk-gaz-cim { margin: 0; font-weight: 650; }
.kalk-tipp { margin: -.4rem 0 0; font-size: .92rem; color: var(--ink-soft); }
.kalk-korlat { margin: .25rem 0 0; padding-left: .6rem; border-left: 3px solid var(--warm-2); font-size: .9rem; line-height: 1.4; color: var(--ink); }
.kalk-mezok-egy { grid-template-columns: minmax(0, 15rem); }
.kalk-pontosabb { border-radius: var(--radius); background: var(--paper); }
.kalk-pontosabb > summary { padding: 1rem 1.25rem; font-weight: 650; cursor: pointer; }
.kalk-pontosabb > summary .optional { font-weight: 400; }
.kalk-pontosabb-test { display: grid; gap: 1.25rem; padding: .25rem 1.25rem 1.25rem; }
.kalk-szobak { display: grid; gap: 1.25rem; }
.kalk-szoba { display: grid; gap: 1.5rem; min-width: 0; }
.kalk-szoba-fej, .kalk-szoba-eredmeny { display: none; }
.kalk-szobak.is-tobb .kalk-szoba { gap: 1.25rem; padding: .75rem 1.25rem 1.25rem; border: 1.5px solid var(--line-strong); border-radius: var(--radius); }
.kalk-szobak.is-tobb .kalk-szoba-fej { display: flex; align-items: center; gap: .5rem; margin-inline: -.6rem; }
.kalk-szobak.is-tobb .kalk-szoba-eredmeny { display: block; margin: -.25rem 0 0; font-weight: 650; color: var(--c, var(--navy)); }
.kalk-szoba-nev { flex: 1; min-width: 0; padding: .4rem .6rem; border: 1.5px solid transparent; border-radius: 10px; background: none; font: inherit; font-size: 1.15rem; font-weight: 650; color: var(--ink); }
.kalk-szoba-nev::placeholder { color: var(--ink-soft); opacity: 1; }
.kalk-szoba-nev:focus { border-color: var(--line-strong); outline: none; }
.kalk-szoba-nev:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 1px; }
.kalk-szoba-torol { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; padding: 0; border: 1.5px solid transparent; border-radius: 10px; background: none; color: var(--ink-soft); cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
.kalk-szoba-nev:hover { border-color: var(--line-strong); }
.kalk-szoba-torol:hover { border-color: var(--line-strong); color: var(--ink); }
}
.kalk-szoba-torol:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 1px; }
.kalk-szoba-uj { justify-self: start; gap: .45rem; }
.kalk-szoba-uj[hidden] { display: none; }
.kalk-tetelek { display: grid; gap: .45rem; margin: 0 0 1.25rem; padding-left: 1.2rem; font-size: 1.05rem; line-height: 1.6; }
.kalk-szamok { margin: 1.25rem 0; }
.kalk-szamok > summary { font-weight: 650; cursor: pointer; }
.kalk-szamok .table-wrap { margin: 1rem 0 .75rem; }
.kalk-szamok tbody th { font-weight: 600; }
.kalk-modszer .kalk-forras { font-size: .9rem; line-height: 1.55; color: var(--ink-soft); }
.kalk-eredmeny {
position: sticky;
top: 5.5rem;
display: grid;
gap: .8rem;
padding: clamp(1.25rem, 3vw, 1.75rem);
border-radius: 20px;
background: var(--ink);
color: var(--white);
}
.kalk-eredmeny p { margin: 0; }
.kalk-cimke { font-size: .95rem; font-weight: 600; color: rgba(255, 255, 255, .7); }
.kalk-osztaly { font-size: clamp(2.6rem, 6vw, 3.6rem); font-stretch: 112%; font-weight: 650; line-height: 1; letter-spacing: -.01em; }
.kalk-igeny { color: rgba(255, 255, 255, .82); }
.kalk-skala { list-style: none; margin: .2rem 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .3rem; }
.kalk-skala li {
min-width: 0;
padding: .3rem 0;
border: 1.5px solid rgba(255, 255, 255, .2);
border-radius: 8px;
font-size: .85rem;
font-weight: 600;
text-align: center;
color: rgba(255, 255, 255, .72);
transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.kalk-skala li.is-fo { border-color: transparent; background: var(--c-pipe, var(--navy)); color: var(--white); }
.kalk-skala li.is-masik { border-style: dashed; border-color: rgba(255, 255, 255, .8); color: var(--white); }
.kalk-ajanlas { line-height: 1.5; }
.kalk-markak { font-size: .95rem; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.kalk-megjegyzes { padding: .75rem .9rem; border-left: 3px solid var(--warm-2); border-radius: 0 10px 10px 0; background: rgba(255, 255, 255, .08); font-size: .93rem; line-height: 1.5; }
.kalk-eredmeny .kalk-cta { justify-self: start; background: var(--white); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .kalk-eredmeny .kalk-cta:hover { background: var(--paper); color: var(--ink); } }
.kalk-eredmeny .kalk-gepek { justify-self: start; color: var(--white); font-weight: 600; text-decoration-thickness: 1.5px; }
@media (hover: hover) and (pointer: fine) { .kalk-eredmeny .kalk-gepek:hover { color: rgba(255, 255, 255, .85); } }
.kalk-lepesek { font-size: .9rem; color: rgba(255, 255, 255, .78); }
.kalk-lepesek summary { cursor: pointer; font-weight: 600; color: rgba(255, 255, 255, .92); }
.kalk-lepesek ol { display: grid; gap: .25rem; margin: .5rem 0 0; padding-left: 1.2rem; }
.kalk-lepesek ol.is-tobb { padding-left: 0; list-style: none; }
.kalk-lepesek li.kalk-lepes-fej { margin-top: .5rem; font-weight: 650; color: rgba(255, 255, 255, .92); }
.kalk-gep-lista { display: grid; gap: .45rem; margin: 0; padding-left: 1.25rem; line-height: 1.45; }
.kalk-gep-lista small { font-size: .9rem; color: rgba(255, 255, 255, .75); }
.kalk-apro { font-size: .85rem; color: rgba(255, 255, 255, .75); }
.kalk-modszer { padding-bottom: var(--space); }
.process + .kalk-modszer { padding-top: var(--space); }
.kalk-modszer h2 { margin-top: 2.5rem; font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.kalk-modszer h2:first-child { margin-top: 0; }
.kalk-modszer p { font-size: 1.05rem; line-height: 1.65; }
.faq h3 { margin: 1.6rem 0 .4rem; font-size: 1.15rem; font-stretch: 108%; font-weight: 650; line-height: 1.3; }
.faq p { margin: 0; line-height: 1.65; }
@media (min-width: 901px) {
.kalk-eredmeny { max-height: calc(100vh - 6.5rem); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 900px) {
.kalk-grid { grid-template-columns: minmax(0, 1fr); }
.kalk-eredmeny { position: static; }
}
.gepek { padding-block: clamp(2rem, 4vw, 3rem) var(--space); }
.gep-szint + .gep-szint { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.gep-szint h2,
.gep-meretek h2 { margin-bottom: .4rem; font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.gep-szint-leiras { margin-bottom: 1.25rem; color: var(--ink-soft); }
.gep-kartyak { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.25rem; }
.gep-kartya {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1.5px solid var(--line);
border-radius: 16px;
background: var(--white);
transition: border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .gep-kartya:hover { border-color: var(--navy); } }
.gep-kartya-rajz { display: grid; place-items: center; padding: 2.25rem 1.5rem 1.5rem; background: linear-gradient(#F8FAFD, #ECF0F7); }
.gep-kartya-rajz .gep-rajz { width: min(100%, 17rem); }
.gep-kartya-test { display: flex; flex: 1; flex-direction: column; gap: .6rem; padding: 1.1rem 1.25rem 1.25rem; }
.gep-nev { font-size: 1.35rem; font-stretch: 108%; font-weight: 650; line-height: 1.2; }
.gep-nev a { color: var(--ink); text-decoration: none; }
.gep-nev a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.gep-nev a:focus-visible { outline: none; }
.gep-nev a:focus-visible::after { outline: 3px solid var(--cool-2); outline-offset: -3px; }
.gep-marka { display: block; margin-bottom: .1rem; font-size: .92rem; font-stretch: 100%; font-weight: 600; color: var(--ink-soft); }
.gep-tenyek { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; font-size: .95rem; color: var(--ink-soft); }
.gep-ar { margin: auto 0 0; padding-top: .75rem; border-top: 1px solid var(--line); font-size: 1.2rem; font-stretch: 106%; font-weight: 650; }
.gep-ar small,
.gep-meret-ar small { font-size: .85rem; font-stretch: 100%; font-weight: 500; color: var(--ink-soft); }
.gep-ar.is-keres,
.gep-meret .gep-meret-ar.is-keres { font-size: 1rem; font-stretch: 100%; font-weight: 600; color: var(--ink-soft); }
.szin-pottyok { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .92rem; color: var(--ink-soft); }
.szin-potty { width: 1rem; height: 1rem; border: 1.5px solid var(--line-strong); border-radius: 50%; }
.szin-feher { background: #FFFFFF; }
.szin-fekete { border-color: #1F2228; background: #1F2228; }
.szin-sotetszurke { border-color: #4A4E56; background: #4A4E56; }
.szin-nevek { margin-left: .2rem; }
.gep-csomag { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: clamp(1.25rem, 3vw, 2rem); border-radius: 20px; background: var(--paper); }
.gep-csomag h2,
.gep-reszlet h2 { margin-bottom: 1rem; font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
.gep-csomag .pipa-lista { margin-bottom: 1.1rem; }
.gep-csomag p { margin: 0; color: var(--ink-soft); }
.gep-hero-marka { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; font-size: 1.05rem; font-weight: 650; color: var(--ink-soft); }
.gep-kiemelt { grid-template-columns: minmax(0, 1fr); margin-top: 1.25rem; }
.gep-hero-rajz { padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem) 1.25rem; border-radius: 20px; background: linear-gradient(#FFFFFF, #E9EEF6); }
.gep-hero-rajz figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.gep-illusztracio { font-size: .85rem; color: var(--ink-soft); }
.gep-rajzok > .gep-rajz:not(:first-child) { display: none; }
.gep-hero-rajz:has(:checked) .gep-rajzok > .gep-rajz { display: none; }
.gep-hero-rajz:has([value="feher"]:checked) .rajz-feher,
.gep-hero-rajz:has([value="fekete"]:checked) .rajz-fekete,
.gep-hero-rajz:has([value="sotetszurke"]:checked) .rajz-sotetszurke { display: block; }
:is(.gep-kartya-rajz, .szalag-gep-rajz, .gep-hero-rajz, .szr-galeria).is-foto[style] { background: var(--foto-hatter, #FFFFFF); }
.gep-foto { height: auto; max-width: 100%; }
:is(.gep-kartya-rajz, .szalag-gep-rajz) .gep-foto { aspect-ratio: 2.4; object-fit: contain; }
.hsz-kartya .gep-kartya-rajz .gep-foto { width: auto; height: 100%; aspect-ratio: auto; }
img.szr-repulo { object-fit: contain; }
.gep-hero-rajz .gep-foto { width: 100%; max-height: min(24rem, 56vh); object-fit: contain; object-position: center bottom; }
.gep-hero-racs { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "fej kep" "vasar kep" "tobb kep"; grid-template-rows: auto auto 1fr; align-items: start; row-gap: 1.5rem; }
.gep-hero-fej { grid-area: fej; }
.gep-hero-fej h1 { margin-bottom: 0; }
.gep-hero-racs > .gep-hero-rajz { grid-area: kep; }
.gep-hero-vasar { grid-area: vasar; display: grid; gap: .75rem; }
.gep-hero-tobb { grid-area: tobb; }
.gep-hero-linkek { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin: 0; font-size: .95rem; }
@media (max-width: 860px) {
.gep-hero-racs { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fej" "kep" "vasar" "tobb"; grid-template-rows: none; row-gap: 1.25rem; }
.gep-hero-racs > .gep-hero-rajz { padding: 1rem 1rem .9rem; }
.gep-hero-racs > .gep-hero-rajz figcaption { margin-top: .6rem; }
.gep-hero-racs .gep-hero-rajz .gep-foto { max-height: min(13rem, 30vh); }
.page-hero.gep-hero { padding-top: 1.5rem; }
}
.ardoboz { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .5rem .8rem; max-width: 31rem; padding: 1.1rem 1.25rem 1.25rem; border: 1.5px solid var(--line); border-radius: 16px; background: var(--white); }
.ardoboz-cimke { font-size: .95rem; font-weight: 650; color: var(--ink-soft); }
.ardoboz > :not(.ardoboz-cimke, .ardoboz-valaszto) { grid-column: 1 / -1; }
.ardoboz-valaszto { width: 100%; min-height: 3rem; padding: .55rem 2.75rem .55rem .9rem; border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A2150' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .85rem center / 1.15rem; color: var(--ink); font: inherit; font-size: 1.02rem; font-weight: 600; -webkit-appearance: none; appearance: none; cursor: pointer; }
.ardoboz-valaszto:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ardoboz-valaszto:hover { border-color: var(--navy); } }
.ardoboz-meret { display: grid; gap: .2rem; margin-top: .3rem; }
.ardoboz-ar { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; margin: 0; }
.ardoboz-ar-cimke { font-size: .95rem; font-weight: 600; color: var(--ink-soft); }
.ardoboz-ar strong { font-size: clamp(1.75rem, 3.4vw, 2.2rem); font-stretch: 108%; font-weight: 700; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.ardoboz-ar.is-keres { font-size: 1.35rem; font-stretch: 106%; font-weight: 650; color: var(--ink); }
.ardoboz-bontas, .ardoboz-tenyek { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--ink-soft); }
.ardoboz-gombok { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.szr-adatok .ardoboz { max-width: none; margin: .5rem 0 .4rem; }
@media (max-width: 860px) { .gep-hero-vasar .ardoboz { max-width: none; } }
@media (max-width: 760px) {
.szalag-reszlet .szr-galeria { padding-top: 2.75rem; }
.szalag-reszlet .szr-galeria .kepsor-kep .gep-foto { max-height: min(12rem, 26vh); }
}
.gep-kartyak > .szalag-elem { width: auto; }
.gep-segitseg { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.gep-segitseg h2 { margin-bottom: 1rem; }
.szolg-fo-cim { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.szolg-szoveg > h3 { margin: 2rem 0 .9rem; font-size: clamp(1.3rem, 2.2vw, 1.55rem); }
.ar-kartya h3 { margin: 0; font-size: 1.4rem; }
.gep-fotok-megjegyzes { margin-top: 1rem; font-size: .9rem; color: var(--ink-soft); }
.kepsor { position: relative; display: flex; flex-direction: column; min-width: 0; }
.kepsor[data-szin].kepsor-masik-szin { display: none; }
:is(.gep-hero-rajz, .szr-galeria):has(.szin-valaszto :checked) .kepsor[data-szin] { display: none; }
:is(.gep-hero-rajz, .szr-galeria):has(.szin-valaszto [value="feher"]:checked) .kepsor[data-szin="feher"],
:is(.gep-hero-rajz, .szr-galeria):has(.szin-valaszto [value="fekete"]:checked) .kepsor[data-szin="fekete"],
:is(.gep-hero-rajz, .szr-galeria):has(.szin-valaszto [value="sotetszurke"]:checked) .kepsor[data-szin="sotetszurke"] { display: flex; }
.kepsor-ablak { position: relative; }
.kepsor-sav { display: flex; margin: 0; padding: 0; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.kepsor-sav::-webkit-scrollbar { display: none; }
.kepsor-sav:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 3px; }
.kepsor-kep { flex: 0 0 100%; display: grid; place-items: center; min-width: 0; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.kepsor-nagyit { position: relative; display: block; width: 100%; cursor: zoom-in; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.kepsor-lupe { position: absolute; right: .5rem; bottom: .5rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px -2px rgba(20, 26, 64, .3); color: var(--ink); pointer-events: none; }
.kepsor-lupe .icon { width: 1.15rem; height: 1.15rem; }
.kepsor-nyil { position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-top: -1.375rem; padding: 0; border: 1.5px solid var(--line-strong); border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ink); box-shadow: 0 6px 16px -10px rgba(20, 26, 64, .45); cursor: pointer; touch-action: manipulation; transition: opacity .2s ease, transform .12s cubic-bezier(.23, 1, .32, 1); }
.kepsor-nyil .icon { width: 1.25rem; height: 1.25rem; }
.kepsor-elozo { left: .35rem; }
.kepsor-elozo .icon { transform: scaleX(-1); }
.kepsor-kovetkezo { right: .35rem; }
.kepsor-nyil:disabled { opacity: 0; pointer-events: none; }
.kepsor-nyil:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .kepsor-nyil:hover { border-color: var(--navy); } }
.kepsor-nyil:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 2px; }
.kepsor-alatt { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: .6rem 0 0; font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
.kepsor-szam { font-variant-numeric: tabular-nums; font-weight: 500; }
.kepsor-alatt.is-csak-szam { justify-content: center; }
.szin-valaszto { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; border: 0; }
.szin-gomb { position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem .35rem .45rem; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--white); font-size: .92rem; font-weight: 600; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .szin-gomb:hover { border-color: var(--navy); } }
.szin-gomb:has(input:checked) { border-color: var(--c, var(--navy)); box-shadow: inset 0 0 0 1px var(--c, var(--navy)); }
.szin-gomb:has(input:focus-visible) { outline: 3px solid var(--cool-2); outline-offset: 2px; }
.gep-meretek { padding-block: var(--space); }
.gep-meretek-tipp { max-width: 46rem; margin-bottom: 1.5rem; color: var(--ink-soft); }
.gep-meret-kartyak { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.25rem; }
.gep-meret { display: flex; flex-direction: column; gap: .9rem; padding: 1.35rem 1.4rem 1.4rem; border: 1.5px solid var(--line); border-radius: 16px; }
.gep-meret p { margin: 0; }
.gep-meret-kw { font-size: 2.4rem; font-stretch: 112%; font-weight: 650; line-height: 1; }
.gep-meret .gep-meret-terulet { margin-top: -.45rem; font-weight: 600; color: var(--c, var(--navy)); }
.gep-meret dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem 1rem; margin: 0; font-size: .95rem; }
.gep-meret dt { color: var(--ink-soft); }
.gep-meret dd { margin: 0; font-weight: 600; }
.gep-meret .gep-meret-kod { font-weight: 500; overflow-wrap: anywhere; }
.gep-meret-kod-szin { display: block; }
.gep-meret .gep-meret-ar { margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--line); font-size: 1.3rem; font-stretch: 106%; font-weight: 650; }
.gep-meret .gep-meret-szereles { margin: -.3rem 0 0; font-size: 1rem; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.gep-ar small, .szalag-gep-ar small, .szr-ar small { display: block; margin-top: .1rem; }
.ar-szereles { white-space: nowrap; }
.gep-meret .btn { justify-content: center; }
.gepek > .wrap > h2 { margin-bottom: 1.25rem; font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.marka-tenyek { padding: clamp(1.25rem, 3vw, 1.75rem); border: 1.5px solid var(--line); border-radius: 20px; background: var(--white); }
.marka-tenyek dl { display: grid; gap: .2rem; margin: 0; }
.marka-tenyek dt { font-size: .9rem; font-weight: 600; color: var(--ink-soft); }
.marka-tenyek dd { margin: 0 0 .8rem; line-height: 1.45; }
.marka-tenyek dd:last-child { margin-bottom: 0; }
.gep-valogatas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; max-width: 52rem; margin: 2rem 0 0; padding: 1rem 1.2rem;
border: 1.5px dashed var(--line-strong); border-radius: 12px; color: var(--ink-soft); line-height: 1.55; }
.gep-valogatas p { flex: 1 1 24rem; margin: 0; }
.gep-valogatas strong { color: var(--ink); }
.gep-valogatas .link-btn { font-weight: 650; white-space: nowrap; }
.marka-tobbi { margin: 1.5rem 0 0; color: var(--ink-soft); }
.marka-tobbi a { font-weight: 650; color: var(--ink); }
.gep-markak { margin: 1rem 0 0; color: var(--ink-soft); }
.gep-markak a { font-weight: 650; color: var(--ink); }
.gep-ajanlo { padding-block: var(--space); }
.gep-ajanlo.is-szurke { background: var(--paper); }
.chooser + .gep-ajanlo { padding-top: 0; }
.gep-ajanlo + .cat-photos { padding-top: var(--space); }
.gep-ajanlo-fej { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.5rem; }
.gep-ajanlo-fej h2 { margin-bottom: .5rem; }
.gep-ajanlo-fej p { max-width: 40rem; margin: 0; color: var(--ink-soft); }
.gep-reszlet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(2rem, 5vw, 4rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.gep-reszlet .gep-csomag { margin-top: 0; }
.gep-forras { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.gep-osszes { margin: 1.5rem 0 0; font-weight: 650; }
.szalag {
--szalag-fent: 4.6rem;
--szalag-lent: 0px;
--kartya: clamp(13.5rem, min(20vw, calc(var(--szalag-ablak, 100vh) * .36)), 19rem);
--koz: clamp(1.1rem, 2.4vw, 2rem);
--heveder: 1rem;
--gorgo: 1.5rem;
--labazat: 2.25rem;
--sor-eleje: max(var(--gutter), calc((100% - var(--wrap)) / 2));
position: relative;
padding: var(--space) 0 calc(var(--space) * .6);
background: var(--white);
}
.szalag-fej { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.szalag-fej h2 { margin-bottom: .5rem; }
.szalag-fej p { max-width: 42rem; margin: 0; color: var(--ink-soft); }
.szalag-szintek { display: flex; gap: .5rem; margin-bottom: clamp(.5rem, 2vh, 1.25rem); margin-bottom: clamp(.5rem, calc(var(--szalag-ablak, 100vh) * .02), 1.25rem); }
.szalag-szintek a { flex: 1 1 0; display: grid; gap: .4rem; font-size: .92rem; font-weight: 650; color: var(--ink-soft); text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.szalag-szintek a.is-aktiv { color: var(--ink); }
.szalag-szint-csik { display: block; height: 4px; overflow: hidden; border-radius: 999px; background: var(--line); }
.szalag-szint-csik span { display: block; height: 100%; border-radius: inherit; background: var(--c-pipe); transform: scaleX(var(--toltes, 0)); transform-origin: 0 50%; }
.szalag-terep { position: relative; }
@media (min-width: 1600px) {
.szalag { --sor-eleje: 0px; }
.szalag-terep { width: 100%; max-width: var(--wrap); margin-inline: auto; }
}
.szalag-hatter { display: none; }
.szalag-jelzes { display: none; }
.szalag.is-ragado .szalag-jelzes {
position: absolute;
z-index: 1;
left: var(--sor-eleje);
bottom: calc(var(--labazat) + var(--gorgo) + var(--heveder) + var(--kartya-mag, 16rem) * .5);
display: flex;
align-items: flex-start;
gap: .5rem;
width: calc(46% - var(--sor-eleje) - 1.25rem);
max-width: 17rem;
margin: 0;
font-size: 1rem;
font-weight: 650;
line-height: 1.3;
color: var(--navy);
pointer-events: none;
transition: opacity .35s ease, transform .35s ease;
}
.szalag.is-ragado.is-elindult .szalag-jelzes { opacity: 0; transform: translateX(-1rem); }
.szalag-jelzes svg { flex: none; width: 1.35rem; height: 1.35rem; margin-top: -.05rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes szalag-nyil { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: no-preference) {
.szalag.is-lathato:not(.is-elindult) .szalag-jelzes svg { animation: szalag-nyil 1.4s ease-in-out infinite; }
}
.szalag-palya {
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scroll-padding-inline: var(--sor-eleje);
padding: 1rem 0 calc(var(--heveder) + var(--gorgo) + var(--labazat) + .25rem);
}
.szalag-sor { position: relative; display: grid; grid-auto-flow: column; align-content: end; align-items: stretch; gap: var(--koz); width: max-content; min-width: 100%; margin: 0; padding: 0 var(--sor-eleje); list-style: none; }
.szalag-sor::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: var(--heveder);
border-radius: 3px;
background:
repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 2px, transparent 2px 1.4rem) 0 0 / 100% 38% no-repeat,
linear-gradient(#3B4683, #2C3569 38%, #1A2150 38%, #0F1438);
box-shadow: 0 .8rem 1rem -.75rem rgba(26, 33, 80, .6);
}
.szalag-sor::before,
.szalag-terep::after {
content: "";
position: absolute;
left: 0;
right: 0;
background:
linear-gradient(var(--line-strong), var(--line-strong)) 0 0 / 100% 3px no-repeat,
repeating-linear-gradient(90deg, transparent 0 calc(22rem - 8px), #D3D9E5 calc(22rem - 8px) 22rem) 0 3px / 100% 100% no-repeat;
}
.szalag-sor::before {
top: calc(100% + var(--heveder));
height: calc(var(--gorgo) + var(--labazat));
background:
radial-gradient(circle closest-side, #5B6683 0 24%, #CBD2DF 29% 86%, transparent 92%) 1.5rem 0 / 5.5rem var(--gorgo) repeat-x,
linear-gradient(var(--line-strong), var(--line-strong)) 0 var(--gorgo) / 100% 3px no-repeat,
repeating-linear-gradient(90deg, transparent 0 calc(22rem - 8px), #D3D9E5 calc(22rem - 8px) 22rem) 0 calc(var(--gorgo) + 3px) / 100% 100% no-repeat;
}
.szalag-terep::after { display: none; bottom: 0; height: var(--labazat); }
.szalag-gorgok { display: none; }
.szalag-lapoz {
position: absolute;
z-index: 2;
top: calc(var(--kartya) / 4.8 + 1.85rem);
display: grid;
place-items: center;
width: 2.9rem;
height: 2.9rem;
padding: 0;
border: 1.5px solid var(--line-strong);
border-radius: 50%;
background: var(--white);
color: var(--ink);
box-shadow: 0 .6rem 1.1rem -.6rem rgba(26, 33, 80, .55);
translate: 0 -50%;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.szalag-lapoz[hidden], .szalag.is-ragado .szalag-lapoz { display: none; }
.szalag-lapoz .icon { width: 1.3rem; height: 1.3rem; }
.szalag-lapoz-elozo { left: max(.4rem, calc(var(--sor-eleje) - 1.45rem)); }
.szalag-lapoz-elozo .icon { rotate: 180deg; }
.szalag-lapoz-kov { right: max(.4rem, calc(var(--sor-eleje) - 1.45rem)); }
.szalag-lapoz:active { scale: .94; }
.szalag-lapoz:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .szalag-lapoz:hover { border-color: var(--navy); color: var(--navy); } }
.szalag-elem { flex: none; display: flex; flex-direction: column; width: var(--kartya); scroll-snap-align: start; }
.szalag-elem > .szalag-gep { flex: 1 0 auto; }
.szalag-gep {
position: relative;
display: flex;
flex-direction: column;
border: 1.5px solid var(--line);
border-radius: 16px;
background: var(--white);
box-shadow: 0 .9rem 1rem -.85rem rgba(26, 33, 80, .6);
rotate: var(--dolles, 0deg);
transform-origin: 50% 100%;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
.szalag-gep:active { scale: .98; }
.szalag-gep-rajz { position: relative; display: grid; place-items: center; padding: 1.6rem 1.1rem 1rem; border-radius: 14.5px 14.5px 0 0; background: linear-gradient(#F8FAFD, #ECF0F7); }
.szalag-gep-rajz .gep-rajz { width: 100%; }
.szalag-gep-test { flex: 1 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding: .85rem 1.1rem 1rem; }
.szalag-gep-nev { font-size: 1.22rem; font-stretch: 108%; font-weight: 650; line-height: 1.2; }
.szalag-gep-nev a { color: var(--ink); text-decoration: none; }
.szalag-gep-nev a::after { content: ""; position: absolute; inset: -1.5px; border-radius: 16px; }
.szalag-gep-nev a:focus-visible { outline: none; }
.szalag-gep-nev a:focus-visible::after { outline: 3px solid var(--cool-2); outline-offset: 2px; }
.szalag-gep .gep-tenyek { font-size: .9rem; line-height: 1.45; }
.szalag-gep-ar { margin: .1rem 0 0; font-weight: 650; }
.szalag-gep-ar small { font-weight: 500; color: var(--ink-soft); }
.szalag-gep-tovabb { display: inline-flex; align-items: center; gap: .45rem; margin-top: auto; font-size: .92rem; font-weight: 650; color: var(--c); }
.szalag-gep-tovabb .icon { width: 1.45rem; height: 1.45rem; padding: .2rem; border-radius: 50%; background: var(--c-tint); stroke-width: 2.2; }
@media (prefers-reduced-motion: no-preference) {
.szalag-gep { transition: translate .3s cubic-bezier(.23, 1, .32, 1), scale .12s ease-out, box-shadow .3s cubic-bezier(.23, 1, .32, 1), border-color .2s ease; }
}
@media (hover: hover) and (pointer: fine) {
.szalag-gep:hover { translate: 0 -.55rem; border-color: var(--navy); box-shadow: 0 2.2rem 2rem -1.7rem rgba(26, 33, 80, .5); }
.szalag-gep:hover .szalag-gep-tovabb .icon { background: var(--c); color: var(--white); }
.szalag-szintek a:hover { color: var(--ink); }
}
.szalag-elem.is-leemelve .szalag-gep { border-style: dashed; border-color: var(--line-strong); box-shadow: none; translate: none; }
.szalag-elem.is-leemelve .szalag-gep-rajz .gep-rajz { visibility: hidden; }
.szalag-elem.is-leemelve .szalag-gep-rajz::after { content: ""; position: absolute; inset: 1rem; border: 2px dashed var(--line-strong); border-radius: 12px; }
.szalag-vege { flex: none; align-self: end; width: calc(var(--kartya) * 1.2); scroll-snap-align: start; }
.szalag-vege-kartya { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; padding: 1.35rem 1.35rem 1.25rem; border: 1.5px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 .9rem 1rem -.85rem rgba(26, 33, 80, .45); }
.szalag-vege-kartya h3 { font-size: 1.3rem; font-stretch: 108%; font-weight: 650; line-height: 1.2; }
.szalag-vege-kartya p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.szalag-vege:has(.szalag-vege-egyben) { width: calc(var(--kartya) * 1.3); }
.szalag-vege-egyben { gap: 0; padding: 0; }
.szalag-vege-resz { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; width: 100%; padding: 1.05rem 1.15rem; }
.szalag-vege-resz + .szalag-vege-resz { border-top: 1.5px dashed var(--line-strong); }
.szalag-vege-egyben h3 { font-size: 1.15rem; }
.szalag-vege-egyben p { font-size: .9rem; line-height: 1.45; }
.szalag-vege-kartya .eszkozgombok { width: 100%; margin: 0; }
.szalag-vege-kartya .eszkozgomb { width: 100%; }
.szalag.is-ragado { padding-bottom: 0; }
.szalag.is-ragado .szalag-keret {
position: sticky;
top: calc(var(--szalag-fent) + var(--szalag-kozep, 0px));
display: flex;
flex-direction: column;
height: calc(100vh - var(--szalag-fent) - var(--szalag-lent));
height: min(calc(var(--szalag-ablak, 100svh) - var(--szalag-fent) - var(--szalag-lent)), 46rem);
padding: clamp(.75rem, 3vh, 2rem) 0 clamp(.5rem, 2vh, 1.25rem);
padding: clamp(.75rem, calc(var(--szalag-ablak, 100vh) * .03), 2rem) 0 clamp(.5rem, calc(var(--szalag-ablak, 100vh) * .02), 1.25rem);
}
.szalag.is-ragado .szalag-terep { flex: 1 1 auto; min-height: 0; overflow: hidden; overflow: clip; }
.szalag.is-ragado .szalag-palya { position: absolute; inset: 0; overflow: hidden; overflow: clip; padding: 0; scroll-snap-type: none; }
.szalag.is-ragado .szalag-sor { position: absolute; left: 0; top: .75rem; bottom: calc(var(--labazat) + var(--gorgo) + var(--heveder)); padding-left: 46%; will-change: transform; }
.szalag.is-ragado .szalag-sor::before { display: none; }
.szalag.is-ragado .szalag-sor::after { left: -50vw; right: -50vw; }
.szalag.is-ragado .szalag-gep { will-change: transform; }
.szalag.is-ragado .szalag-terep::after { display: block; }
@media (min-width: 761px) and (min-height: 700px) {
.szalag.is-ragado { --labazat: clamp(2.25rem, calc(var(--szalag-ablak, 100vh) * .11), 6.5rem); }
.szalag.is-ragado .szalag-terep::after {
background:
linear-gradient(var(--line-strong), var(--line-strong)) 0 0 / 100% 3px no-repeat,
linear-gradient(var(--line), var(--line)) 0 100% / 100% 2px no-repeat,
repeating-linear-gradient(90deg, transparent 0 calc(22rem - 8px), #D3D9E5 calc(22rem - 8px) 22rem) 0 3px / 100% 100% no-repeat;
}
}
.szalag.is-ragado .szalag-gorgok { position: absolute; left: 0; right: 0; bottom: var(--labazat); display: flex; gap: calc(5.5rem - var(--gorgo)); padding-left: calc(1.5rem + (5.5rem - var(--gorgo)) / 2); overflow: hidden; }
.szalag-gorgok span { position: relative; flex: none; width: var(--gorgo); height: var(--gorgo); border-radius: 50%; background: linear-gradient(160deg, #F2F5FA, #AEB8CA 62%, #8C97AD); box-shadow: inset 0 0 0 1px rgba(26, 33, 80, .22); }
.szalag-gorgok span::before { content: ""; position: absolute; inset: 16%; border-radius: 50%; background: linear-gradient(90deg, transparent 44%, rgba(26, 33, 80, .38) 44% 56%, transparent 56%); rotate: var(--forgas, 0deg); }
.szalag-gorgok span::after { content: ""; position: absolute; inset: 38%; border-radius: 50%; background: #5B6683; }
.szalag.is-ragado .szalag-hatter { display: block; position: absolute; inset: 0; pointer-events: none; }
.szalag-hatter > span {
position: absolute;
top: var(--szo-fent, 0px);
left: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .5rem;
max-width: var(--szo-szel, 100%);
opacity: 0;
transition: opacity .6s ease;
}
.szalag-hatter > span.is-aktiv { opacity: 1; }
.szalag-szo-nev {
font-size: var(--szo-meret, clamp(4.5rem, 14vw, 12rem));
font-stretch: 125%;
font-weight: 700;
line-height: .9;
letter-spacing: -.02em;
white-space: nowrap;
color: rgba(26, 33, 80, .04);
-webkit-text-stroke: max(2px, .012em) #A9B4C6;
}
.szalag-szo-leiras { max-width: 30rem; padding-left: .15em; font-size: clamp(.95rem, 1.1vw, 1.15rem); font-weight: 600; line-height: 1.35; color: var(--ink-soft); }
.szalag-hatter.is-sorban > span { flex-direction: row; align-items: flex-end; gap: 1.5rem; }
.szalag-hatter.is-sorban .szalag-szo-leiras { flex: none; width: 19rem; padding: 0 0 .25em; }
.szalag-hatter.is-csak-szo .szalag-szo-leiras { display: none; }
.szalag-hatter.is-nincs-szo .szalag-szo-nev { visibility: hidden; }
.szalag.is-tomor-1 .szalag-gep-rajz { padding: 1rem .9rem .55rem; }
.szalag.is-tomor-1 .szalag-gep-test { gap: .3rem; padding: .65rem .9rem .75rem; }
.szalag.is-tomor-1 .szalag-gep .gep-tenyek li:nth-child(3) { display: none; }
.szalag.is-tomor-1 .szalag-vege-kartya { gap: .6rem; padding: 1rem; }
.szalag.is-tomor-1 .szalag-vege-egyben { gap: 0; padding: 0; }
.szalag.is-tomor-1 .szalag-vege-resz { gap: .45rem; padding: .8rem .95rem; }
.szalag.is-tomor-2 .szalag-gep .gep-tenyek li:nth-child(2),
.szalag.is-tomor-2 .szalag-gep-tovabb,
.szalag.is-tomor-2 .szalag-gep-ar small,
.szalag.is-tomor-2 .szalag-vege-kartya p { display: none; }
.szalag.is-tomor-2 .szalag-gep-rajz { padding: .7rem .8rem .4rem; }
.szalag.is-tomor-2 .szalag-gep-ar { line-height: 1.25; }
.szalag.is-tomor-3 .szalag-gep .tag { display: none; }
.szalag.is-tomor-4 .szalag-gep-rajz { padding: .45rem .8rem .3rem; }
.szalag.is-tomor-4 .szalag-gep-rajz .gep-rajz { height: 3.6rem; }
.szalag.is-tomor-4 .szalag-gep .gep-tenyek { display: none; }
.szalag-sor.is-meres { align-items: start; }
.szalag-vege.is-rovid-1 .szalag-vege-resz:first-child p,
.szalag-vege.is-rovid-2 .szalag-vege-resz p,
.szalag-vege.is-rovid-3 .eszkozgomb-szoveg span { display: none; }
.szalag-vege.is-rovid-3 .szalag-vege-resz { gap: .4rem; padding: .65rem .85rem; }
.szalag-vege.is-rovid-3 h3 { font-size: 1.02rem; }
.szalag-vege.is-rovid-3 .eszkozgomb { min-height: 0; gap: .55rem; padding: .3rem .8rem .35rem .3rem; }
.szalag-vege.is-rovid-3 .eszkozgomb-ikon { width: 2.2rem; height: 2.2rem; }
.szalag-vege.is-rovid-3 .eszkozgomb-ikon svg { width: 1.5rem; height: 1.5rem; }
.szalag-vege.is-rovid-3 .btn { min-height: 2.75rem; padding-block: .5rem; }
.szalag-reszlet {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 0;
background: transparent;
color: var(--ink);
overscroll-behavior: contain;
}
.szalag-reszlet[open] { display: grid; place-items: center; }
.szalag-reszlet::backdrop { background: transparent; }
.szr-fuggony { position: fixed; inset: 0; background: rgba(14, 18, 44, .58); }
.szr-panel {
position: relative;
width: min(100% - 2rem, 64rem);
overflow: hidden;
border-radius: 24px;
background: var(--white);
box-shadow: 0 40px 90px -40px rgba(10, 14, 40, .75);
}
.szr-tartalom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); }
.szr-galeria { display: flex; flex-direction: column; gap: 1rem; min-height: 0; padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 3vw, 2.25rem) 1.25rem; background: linear-gradient(#FFFFFF, #E9EEF6); }
.szr-galeria .kepsor { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.szr-galeria .kepsor-kep > .gep-rajz, .szr-galeria .kepsor-nagyit { width: min(100%, 26rem); }
.szr-galeria .kepsor-kep .gep-foto { width: 100%; max-height: min(20rem, 42vh); object-fit: contain; }
.szr-meretek { display: flex; align-items: flex-start; gap: 1rem; width: 100%; }
.szr-meret { flex: 1 1 0; display: grid; gap: .45rem; min-width: 0; }
.szr-meret .gep-rajz { width: 100%; }
.szr-meret p { margin: 0; font-size: .82rem; line-height: 1.35; color: var(--ink-soft); }
.szr-meret-szel { display: flex; align-items: center; gap: .35rem; margin: -.15rem 2.5% .2rem; font-size: .78rem; font-weight: 650; white-space: nowrap; color: var(--ink-soft); }
.szr-meret-szel::before,
.szr-meret-szel::after { content: ""; flex: 1; min-width: .5rem; height: .6rem; background: linear-gradient(var(--line-strong), var(--line-strong)) center / 100% 1.5px no-repeat; }
.szr-meret-szel::before { border-left: 1.5px solid var(--line-strong); }
.szr-meret-szel::after { border-right: 1.5px solid var(--line-strong); }
.szr-meret strong { display: block; font-size: .9rem; color: var(--ink); }
.szr-meret p span { display: block; font-size: .78rem; white-space: nowrap; }
.szr-megjegyzes { margin: 0; font-size: .85rem; color: var(--ink-soft); }
.szr-adatok { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.25rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2rem); }
.szr-fej { display: flex; align-items: center; gap: .6rem; margin: 0 3rem .35rem 0; }
.szr-fej .gep-marka { margin: 0; font-size: 1rem; }
.szr-cim { margin-bottom: .6rem; font-size: clamp(1.7rem, 3vw, 2.2rem); font-stretch: 112%; font-weight: 650; }
.szr-leiras { color: var(--ink-soft); }
.szr-kiemelt { grid-template-columns: minmax(0, 1fr); gap: .5rem; margin-bottom: 1.5rem; }
.szr-kiemelt li { font-size: 1rem; }
.szr-alcim { margin: 0 0 .6rem; font-size: 1.1rem; font-weight: 650; }
.szr-meretlista { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.szr-meretlista li { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .1rem .9rem; padding: .7rem .9rem; border: 1.5px solid var(--line); border-radius: 12px; font-size: .92rem; color: var(--ink-soft); }
.szr-meretlista strong { grid-row: span 3; font-size: 1.15rem; font-stretch: 108%; color: var(--ink); }
.szr-ar { font-weight: 650; color: var(--ink); }
.szr-ar small { font-weight: 500; color: var(--ink-soft); }
.szr-ar.is-keres { font-weight: 600; color: var(--ink-soft); }
.szr-tipp { margin: .6rem 0 1.25rem; font-size: .85rem; color: var(--ink-soft); }
.szr-alapszereles { margin: .6rem 0 0; padding: .55rem .75rem; border-left: 3px solid var(--line-strong); font-size: .85rem; line-height: 1.45; color: var(--ink-soft); }
.szr-alapszereles strong { color: var(--ink); }
.szr-tenyek { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; margin: 0 0 1.5rem; font-size: .92rem; }
.szr-tenyek dt { color: var(--ink-soft); }
.szr-tenyek dd { margin: 0; font-weight: 600; }
.szr-gombok { display: flex; flex-wrap: wrap; gap: .6rem; }
.szr-adatok .eszkozgombok { margin-top: 1rem; }
.szr-bezar {
position: absolute;
top: .75rem;
right: .75rem;
z-index: 3;
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .92);
color: var(--ink);
box-shadow: 0 4px 14px -6px rgba(26, 33, 80, .45);
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.szr-bezar .icon { width: 1.3rem; height: 1.3rem; }
.szr-bezar:active { scale: .94; }
@media (hover: hover) and (pointer: fine) { .szr-bezar:hover { background: var(--white); color: var(--navy); } }
.szr-repulo { position: fixed; z-index: 2; margin: 0; transform-origin: 0 0; pointer-events: none; }
@media (max-width: 760px) {
.szalag-reszlet[open] { place-items: end stretch; }
.szr-panel { width: 100%; border-radius: 22px 22px 0 0; }
.szr-tartalom { display: block; max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); overflow-y: auto; overscroll-behavior: contain; }
.szr-galeria { padding: 3.25rem 1.25rem 1rem; }
.szr-adatok { overflow: visible; padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
.szr-fej { margin-right: 0; }
.szr-panel::before { content: ""; position: absolute; top: .55rem; left: 50%; z-index: 3; width: 2.5rem; height: 4px; margin-left: -1.25rem; border-radius: 2px; background: rgba(26, 33, 80, .24); pointer-events: none; }
}
@media (max-width: 860px) {
.gep-reszlet { grid-template-columns: minmax(0, 1fr); }
}
.hsz-kartya .gep-kartya-rajz { height: 12.5rem; }
.hsz-kartya .hsz-rajz { width: auto; max-width: 100%; height: 100%; }
.hsz-hero-rajz .hsz-rajz { display: block; width: min(100%, 22rem); margin-inline: auto; }
.gep-kiemelt .hsz-jelveny { align-items: center; gap: .8rem; margin-top: .3rem; font-size: .9rem; line-height: 1.4; color: var(--ink-soft); }
.szr-kiemelt .hsz-jelveny { align-items: center; gap: .7rem; font-size: .88rem; line-height: 1.4; color: var(--ink-soft); }
.szr-kiemelt .hsz-jelveny img { width: 3rem; height: 3rem; }
.szr-kiemelt .hsz-jelveny strong { font-size: .98rem; }
.hsz-jelveny img { flex: none; width: 3.5rem; height: 3.5rem; }
.hsz-jelveny strong { display: block; font-size: 1.05rem; font-weight: 650; color: var(--ink); }
.hsz-meretek .gep-meret-kartyak { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.hsz-tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.hsz-tabla th, .hsz-tabla td { padding: .35rem .4rem; border-bottom: 1px solid var(--line); text-align: left; }
.hsz-tabla thead th { font-size: .85rem; font-weight: 650; line-height: 1.25; color: var(--ink); vertical-align: bottom; }
.hsz-tabla thead small { display: block; font-weight: 500; color: var(--ink-soft); }
.hsz-tabla tbody th { font-weight: 500; color: var(--ink-soft); }
.hsz-tabla td { font-weight: 650; }
.hsz-tabla tr > :first-child { padding-left: 0; }
.fp { padding-block: clamp(2rem, 4vw, 3rem) var(--space); }
.fp-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; gap: clamp(1.5rem, 4vw, 3rem); }
.fp-szinpad {
position: relative;
min-height: 22rem;
overflow: hidden;
border: 1.5px dashed var(--line-strong);
border-radius: 18px;
background: linear-gradient(#FFFFFF, #EEF2F8);
user-select: none;
-webkit-user-select: none;
}
.fp-szinpad.van-kep { width: min(100%, calc(72vh * var(--ar))); min-height: 0; margin-inline: auto; aspect-ratio: var(--ar); border: 0; background: #DCE2EC; }
.fp-foto { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.fp-ures { display: grid; justify-items: center; gap: .6rem; padding: clamp(2rem, 6vw, 3.5rem) 1.5rem; text-align: center; }
.fp-ures p { max-width: 30rem; margin: 0; color: var(--ink-soft); }
.fp-ures .fp-ures-cim { font-size: clamp(1.35rem, 2.4vw, 1.6rem); font-stretch: 108%; font-weight: 650; color: var(--ink); }
.fp-ures-rajz { width: min(70%, 16rem); margin-bottom: 1rem; }
.fp-ures-gombok { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .75rem; }
.fp-fajl-gomb { position: relative; }
.fp-gep { position: absolute; z-index: 2; cursor: grab; touch-action: none; filter: drop-shadow(0 .5vw .7vw rgba(10, 16, 40, .3)); }
.fp-gep.is-huz { cursor: grabbing; }
.fp-gep svg { display: block; width: 100%; height: auto; pointer-events: none; }
.fp-gep img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.fp-gep:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 4px; border-radius: 6px; }
.fp-mero { position: absolute; inset: 0; z-index: 3; }
.fp-mero-vonal { position: absolute; height: 3px; margin-top: -1.5px; background: var(--warm-2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .8); transform-origin: 0 50%; pointer-events: none; }
.fp-pont {
position: absolute;
width: 30px;
height: 30px;
margin: -15px 0 0 -15px;
padding: 0;
border: 3px solid var(--white);
border-radius: 50%;
background: var(--warm-2);
box-shadow: 0 2px 6px rgba(10, 16, 40, .4);
cursor: grab;
touch-action: none;
}
.fp-pont:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 2px; }
.fp-sugo, .fp-hiba { margin: .75rem 0 0; font-size: .93rem; color: var(--ink-soft); }
.fp-hiba { font-weight: 600; color: var(--warm); }
.fp-panel { display: grid; gap: 1.5rem; padding: clamp(1.25rem, 3vw, 1.75rem); border: 1.5px solid var(--line); border-radius: 20px; background: var(--white); }
.fp-csoport { display: grid; gap: .9rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.fp-csoport legend { margin-bottom: .2rem; padding: 0; font-size: 1.15rem; font-stretch: 106%; font-weight: 650; }
.fp-csoport[disabled] { opacity: .5; }
.fp-csoport[disabled] .btn:disabled { opacity: 1; }
.fp .field select,
.fp .field input[type="text"] { border-color: var(--line-strong); }
@media (hover: hover) and (pointer: fine) { .fp .field select:hover, .fp .field input[type="text"]:hover { border-color: var(--navy); } }
.fp input[type="range"] { width: 100%; margin: .2rem 0; accent-color: var(--c, var(--navy)); }
.fp-valodi { margin: 0; padding: .6rem .8rem; border-radius: 10px; background: var(--c-tint, var(--paper)); font-size: .95rem; font-weight: 600; color: var(--c, var(--navy)); }
.fp-meres-gomb { justify-self: start; }
.fp-meres { display: grid; gap: .8rem; padding: 1rem; border-left: 3px solid var(--warm-2); border-radius: 0 12px 12px 0; background: #FFF6EE; }
.fp-meres p { margin: 0; font-size: .95rem; line-height: 1.5; }
.fp-meres-gombok { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }
.fp-gombok { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; }
.fp-masik { position: relative; font-weight: 600; cursor: pointer; }
.fp-adatvedelem { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }
.fp-tippek { grid-template-columns: minmax(0, 1fr); margin-bottom: 1.25rem; }
@media (max-width: 900px) {
.fp-grid { grid-template-columns: minmax(0, 1fr); }
}
.tr-hero { padding-block: clamp(2rem, 4.5vw, 3.25rem) clamp(1.75rem, 3.5vw, 2.75rem); }
.tr { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem); }
.tr-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; gap: clamp(1.25rem, 3vw, 2.5rem); }
.tr-bal { position: sticky; top: 5.5rem; display: grid; gap: .6rem; min-width: 0; }
html:not(.tr-reszletes) .tr-bal { position: static; }
.tr-eszkozok { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.tr-modok { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .35rem; flex: 1 1 100%; }
html:not(.tr-reszletes) .tr-csak-reszletes { display: none !important; }
html.tr-reszletes .tr-csak-egyszeru { display: none !important; }
html:not(.tr-reszletes) .tr-modok { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tr-reszletes-kapcs { justify-self: start; font-size: .95rem; }
.tr-harom-sav { position: relative; display: grid; gap: .3rem; padding: .45rem 2.75rem .55rem .55rem; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--white); }
.tr-harom { display: flex; align-items: center; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.tr-harom li { display: flex; flex: 0 1 auto; align-items: center; gap: .25rem; min-width: 0; }
.tr-harom li + li::before { content: ""; flex: none; width: .8rem; height: 1.5px; background: var(--line-strong); }
.tr-harom button { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; min-height: 2.6rem; padding: .2rem .7rem .2rem .25rem; border: 1.5px solid transparent; border-radius: 999px; background: none; color: var(--ink-soft); font: inherit; font-size: .92rem; font-weight: 650; line-height: 1.15; cursor: pointer; }
.tr-harom-szam { display: inline-grid; flex: none; place-items: center; width: 1.65rem; height: 1.65rem; border: 1.5px solid currentColor; border-radius: 50%; font-size: .8rem; font-weight: 700; }
.tr-harom-nev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-harom button.is-most { border-color: var(--navy); background: #EEF1FB; color: var(--ink); }
.tr-harom button.is-most .tr-harom-szam { border-color: var(--navy); background: var(--navy); color: var(--white); }
.tr-harom button.is-kesz { color: var(--ink); }
.tr-harom button.is-kesz .tr-harom-szam { border-color: var(--navy); background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4 4 9-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat; color: transparent; }
@media (hover: hover) and (pointer: fine) { .tr-harom button:hover { border-color: var(--line-strong); } .tr-harom button.is-most:hover { border-color: var(--navy); } }
.tr-harom button:focus-visible, .tr-harom-bezar:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 2px; }
.tr-harom-sugo { margin: 0 0 0 .3rem; font-size: .88rem; line-height: 1.4; color: var(--ink-soft); }
.tr-harom-sav.is-kesz .tr-harom-sugo { color: var(--ink); font-weight: 600; }
.tr-harom-tovabb { justify-self: start; margin-left: .3rem; padding: .4rem .9rem; font-size: .9rem; }
.tr-harom-bezar { position: absolute; top: .35rem; right: .35rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: none; color: var(--ink-soft); font: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .tr-harom-bezar:hover { color: var(--ink); background: var(--paper); } }
.tr-eszkoz.is-kovetkezo { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(38, 59, 170, .22); }
.tr-bal.is-teljes .tr-harom-sav { display: none; }
.tr-bal:has(> .tr-harom-sav:not([hidden])) { --tr-lepesek: 5.25rem; }
@media (max-width: 900px) {
.tr-harom-sav { padding-block: .3rem; }
.tr-harom-sav:not(.is-kesz) .tr-harom-sugo { display: none; }
}
@media (max-width: 420px) {
.tr-harom-sav { padding-right: 2.5rem; }
.tr-harom li + li::before { width: .35rem; }
.tr-harom button { gap: .3rem; padding-right: .5rem; font-size: .86rem; }
.tr-harom-szam { width: 1.45rem; height: 1.45rem; font-size: .75rem; }
}
.tr-reszletes-kapcs .tr-halk { font-weight: 400; color: var(--ink-soft); }
.tr-sugo-doboz > summary, .tr-ossz-reszlet > summary { cursor: pointer; font-weight: 650; }
.tr-sugo-doboz > summary { font-size: .9rem; color: var(--ink-soft); }
.tr-sugo-doboz[open] > summary { margin-bottom: .4rem; }
.tr-ossz-reszlet > summary { padding: .35rem 0; }
.tr-ossz-reszlet[open] > summary { margin-bottom: .75rem; }
.tr-modszer-resz > summary { cursor: pointer; }
.tr-modszer-resz > summary h2 { display: inline; margin: 0; }
.tr-modszer-resz + .tr-modszer-resz { margin-top: 1.5rem; }
.tr-modszer-resz[open] > summary { margin-bottom: 1rem; }
.tr-modok.is-tompa .tr-eszkoz { opacity: .55; }
.tr-modok.is-tompa .tr-eszkoz[aria-pressed="true"] { border-color: var(--line-strong); background: var(--white); color: var(--ink); }
.tr-muveletek { display: flex; flex: none; gap: .3rem; }
.tr-eszkoz {
display: grid;
justify-items: center;
gap: .12rem;
min-width: 0;
padding: .45rem .2rem .4rem;
border: 1.5px solid var(--line-strong);
border-radius: 12px;
background: var(--white);
color: var(--ink);
font: inherit;
font-size: .8rem;
font-stretch: 92%;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.tr-eszkoz span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .tr-eszkoz:hover { border-color: var(--navy); } }
.tr-eszkoz[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: var(--white); }
.tr-ikon-gomb {
display: inline-grid;
place-items: center;
width: 2.6rem;
height: 2.6rem;
padding: 0;
border: 1.5px solid var(--line-strong);
border-radius: 12px;
background: var(--white);
color: var(--ink);
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .tr-ikon-gomb:hover:not(:disabled) { border-color: var(--navy); color: var(--navy); } }
.tr-ikon-gomb:disabled { opacity: .4; cursor: not-allowed; }
.tr-nezetsor { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; min-width: 0; }
.tr-szintek { display: flex; flex: 1 1 8rem; gap: .3rem; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.tr-szint-ful {
flex: none;
min-height: 2.3rem;
padding: .3rem .85rem;
border: 1.5px solid var(--line-strong);
border-radius: 999px;
background: var(--white);
color: var(--ink);
font: inherit;
font-size: .88rem;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .tr-szint-ful:hover { border-color: var(--navy); } }
.tr-szint-ful[aria-pressed="true"] { border-color: var(--navy); background: var(--c-tint, #EAF1FD); color: var(--navy); }
.tr-szint-plusz { border-style: dashed; color: var(--ink-soft); }
.tr-oldal-valaszt { display: inline-flex; flex: 1 1 12rem; align-items: center; min-width: 0; font-size: .88rem; font-weight: 600; }
.tr-oldal-valaszt span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tr-oldal-valaszt select {
flex: 1;
min-width: 0;
max-width: 22rem;
min-height: 2.3rem;
padding: .3rem .6rem;
border: 1.5px solid var(--line-strong);
border-radius: 10px;
background: var(--white);
color: var(--ink);
font: inherit;
font-size: .88rem;
}
.tr-nezet { display: inline-flex; flex: none; margin-left: auto; padding: 3px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--white); }
.tr-nezet button {
min-height: 2.1rem;
padding: .25rem .85rem;
border: 0;
border-radius: 999px;
background: none;
color: var(--ink);
font: inherit;
font-size: .88rem;
font-weight: 600;
cursor: pointer;
}
.tr-nezet button[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.tr-nezet button:focus-visible, .tr-szint-ful:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 2px; }
.tr-lap[data-nezet="oldal"] .tr-vaszon { cursor: grab; }
.tr-lap-tarto { position: relative; }
.tr-lap { position: relative; height: clamp(18rem, calc(100vh - 19rem - var(--tr-lepesek, 0px)), 42rem); overflow: hidden; border: 1.5px solid var(--line-strong); border-radius: 16px; background: #FBFDFF; }
.tr-vaszon { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: crosshair; }
.tr-lap[data-mod="valaszt"] .tr-vaszon { cursor: default; }
.tr-vaszon:focus-visible { outline: 3px solid var(--cool-2); outline-offset: -3px; border-radius: 16px; }
.tr-tinta { fill: none; stroke: var(--navy); stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round; opacity: .55; vector-effect: non-scaling-stroke; pointer-events: none; }
.tr-tinta.is-cso { stroke: var(--warm-2); }
.tr-tinta.is-elhalvanyul { opacity: 0; transition: opacity .3s ease; }
.tr-ures { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .5rem; padding: 1.5rem; text-align: center; pointer-events: none; }
.tr-ures p { max-width: 25rem; margin: 0; color: var(--ink-soft); }
.tr-ures .tr-ures-cim { font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-stretch: 108%; font-weight: 650; color: var(--ink); }
.tr-ures .btn, .tr-ures a { pointer-events: auto; }
.tr-ures a { white-space: nowrap; }
.tr-ures .btn { margin-top: .5rem; }
.tr-ures { transition: opacity .15s ease; }
.tr-lap.is-rajzol .tr-ures { opacity: 0; }
.tr-ures.is-tomor { gap: .35rem; padding: .6rem; }
.tr-ures.is-tomor .tr-ures-cim { font-size: 1.1rem; }
.tr-ures.is-tomor p { font-size: .85rem; line-height: 1.4; }
.tr-ures.is-tomor .btn { margin-top: .15rem; padding: .45rem .9rem; font-size: .9rem; }
.tr-ures.is-tomor.is-szint p:not(.tr-ures-cim) { display: none; }
.tr-csak-keskeny { display: none; }
.tr-kijelolve {
position: absolute;
top: .6rem;
right: .6rem;
display: flex;
align-items: center;
gap: .6rem;
max-width: calc(100% - 1.2rem);
padding: .3rem .35rem .3rem .85rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--white);
box-shadow: 0 12px 26px -16px rgba(26, 33, 80, .55);
font-size: .9rem;
font-weight: 600;
}
.tr-kijelolve span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-kijelolve-torles {
display: inline-flex;
align-items: center;
gap: .35rem;
flex: none;
padding: .4rem .75rem;
border: 0;
border-radius: 999px;
background: #FFF1E7;
color: var(--warm);
font: inherit;
font-weight: 650;
cursor: pointer;
}
.tr-kijelolve-torles .icon { width: 1.05rem; height: 1.05rem; }
@media (hover: hover) and (pointer: fine) { .tr-kijelolve-torles:hover { background: #FFE2CF; } }
.tr-almod { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.tr-almod legend { float: left; margin-right: .3rem; padding: 0; font-size: .92rem; font-weight: 600; }
.tr-almod .kalk-chip span { padding: .4rem .85rem; font-size: .9rem; }
.tr-ablak-meret { display: inline-flex; flex: none; gap: .25rem; }
.tr-ablak-meret button,
.tr-jel-gombok button:not(.tr-torol) {
display: inline-grid;
place-items: center;
width: 2.1rem;
height: 2.1rem;
padding: 0;
border: 1.5px solid var(--line-strong);
border-radius: 999px;
background: var(--white);
color: var(--ink);
font: inherit;
font-size: 1.05rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .tr-ablak-meret button:hover, .tr-jel-gombok button:not(.tr-torol):hover { border-color: var(--navy); color: var(--navy); } }
.tr-allapot-sor {
position: absolute;
left: .6rem;
bottom: .6rem;
z-index: 2;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .35rem .7rem;
max-width: min(38rem, calc(100% - 1.2rem));
padding: .45rem 2.4rem .45rem .8rem;
border: 1px solid var(--line);
border-radius: 12px;
background: rgba(255, 255, 255, .95);
box-shadow: 0 12px 26px -18px rgba(26, 33, 80, .55);
transition: opacity .2s ease;
}
.tr-allapot-sor { pointer-events: none; }
.tr-allapot-sor button { pointer-events: auto; }
.tr-allapot-sor.is-ures, .tr-lap-tarto:has(.tr-ures:not([hidden])) .tr-allapot-sor { opacity: 0; }
.tr-lap-tarto:has(.tr-ures:not([hidden])) .tr-allapot-sor button { visibility: hidden; }
.tr-allapot-sor .tr-allapot { flex: 1 1 14rem; }
.tr-allapot-gomb { min-height: 2.3rem; padding: .35rem .95rem; background: var(--white); font-size: .9rem; }
.tr-allapot { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--ink); }
.tr-allapot-bezar {
position: absolute;
top: .2rem;
right: .25rem;
width: 2rem;
height: 2rem;
padding: 0;
border: 0;
border-radius: 999px;
background: none;
color: var(--ink-soft);
font: inherit;
font-size: 1.3rem;
line-height: 1;
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .tr-allapot-bezar:hover { background: var(--paper); color: var(--ink); } }
.tr-lap-alatt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.tr-lap-alatt .link-btn { font-weight: 600; }
.tr-mentes-jel { color: var(--warm); }
.tr-sugo { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--ink-soft); }
.tr-panel { display: grid; gap: 1.75rem; min-width: 0; }
.tr-resz { display: grid; gap: .9rem; min-width: 0; }
.tr-resz > .btn { justify-self: start; }
.tr-resz-cim { margin: 0; font-size: 1.35rem; font-stretch: 108%; font-weight: 650; }
.tr-lista { display: grid; gap: .75rem; }
.tr-ures-lista { margin: 0; padding: .9rem 1rem; border: 1.5px dashed var(--line-strong); border-radius: 14px; font-size: .95rem; color: var(--ink-soft); }
.tr-kartya { display: grid; gap: .75rem; min-width: 0; padding: 1rem; border: 1.5px solid var(--line); border-radius: 14px; background: var(--white); transition: border-color .2s ease, box-shadow .2s ease; }
.tr-kartya[aria-current="true"] { border-color: var(--cool); box-shadow: 0 0 0 3px var(--c-tint, #EAF1FD); }
.tr-kartya-fej { display: flex; align-items: center; gap: .5rem; }
.tr-kartya-cim { display: flex; align-items: center; gap: .55rem; flex: 1; min-width: 0; margin: 0; font-weight: 650; }
.tr-nev {
flex: 1;
min-width: 0;
padding: .45rem .65rem;
border: 1.5px solid transparent;
border-radius: 10px;
background: var(--paper);
color: var(--ink);
font: inherit;
font-size: 1.05rem;
font-weight: 650;
}
@media (hover: hover) and (pointer: fine) { .tr-nev:hover { border-color: var(--line-strong); } }
.tr-nev:focus-visible { outline: 3px solid var(--cool-2); outline-offset: 1px; }
.tr-torol {
display: inline-grid;
place-items: center;
flex: none;
width: 2.5rem;
height: 2.5rem;
padding: 0;
border: 1.5px solid transparent;
border-radius: 10px;
background: none;
color: var(--ink-soft);
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .tr-torol:hover { border-color: #F6C8AE; color: var(--warm); } }
.tr-mezok { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .75rem; }
.tr .field label { font-size: .92rem; }
.tr .field, .tr .field input, .tr .field select, .tr-kartya > * { min-width: 0; }
.tr .field input,
.tr .field select { padding: .6rem .7rem; border-color: var(--line-strong); }
@media (hover: hover) and (pointer: fine) { .tr .field input:hover, .tr .field select:hover { border-color: var(--navy); } }
.tr .optional { font-weight: 400; color: var(--ink-soft); }
.tr .kalk-csoport legend { font-size: .92rem; }
.tr .kalk-chip span { padding: .45rem .85rem; font-size: .9rem; }
.tr-szam-mezo { max-width: 16rem; }
.tr-kartya-sor { margin: 0; font-size: .95rem; line-height: 1.5; }
.tr-sugo-kicsi { margin: -.25rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--ink-soft); }
.tr-reszletek summary { cursor: pointer; font-size: .93rem; font-weight: 600; color: var(--navy); }
.tr-reszletek-test { display: grid; gap: 1rem; margin-top: .9rem; }
.tr-reszletek + .tr-reszletek { margin-top: -.25rem; }
.tr-jel-lista { list-style: none; display: grid; gap: .35rem; margin: 0; padding: 0; }
.tr-jel-lista:empty { display: none; }
.tr-jel-lista li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .75rem; font-size: .95rem; }
.tr-jel-gombok { display: inline-flex; align-items: center; gap: .25rem; }
.tr-jel-lista .tr-jel-mag { display: flex; flex: 1 1 100%; align-items: center; gap: .6rem; }
.tr-jel-lista .tr-jel-mag label { font-size: .88rem; font-weight: 500; color: var(--ink-soft); }
.tr-jel-lista .tr-jel-mag input { width: 5.5rem; padding: .4rem .6rem; }
.tr-kartya .tr-figy { font-weight: 600; color: var(--warm); }
.tr-eredmeny .tr-figy { font-weight: 600; color: #FFC6A6; }
.tr-jel-gombok .tr-torol { width: 2.1rem; height: 2.1rem; }
.tr-jel-uj { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.tr .tr-kis-gomb { min-height: 2.4rem; padding: .4rem .85rem; font-size: .9rem; }
.tr-jel {
display: inline-grid;
place-items: center;
flex: none;
min-width: 1.7rem;
height: 1.7rem;
padding: 0 .4rem;
border-radius: 999px;
background: var(--navy);
color: var(--white);
font-size: .82rem;
font-weight: 700;
line-height: 1;
}
.tr-jel.is-kul { background: var(--ink); }
.tr-uj-szoba { display: grid; gap: .8rem; padding: 1rem; border-radius: 14px; background: var(--paper); }
.tr-uj-szoba .btn { justify-self: start; min-height: 2.75rem; }
.tr-uj-szoba .field input { border-color: var(--line-strong); }
.tr-alcim { margin: 0; font-weight: 650; }
.tr-hiba { margin: 0; font-size: .93rem; font-weight: 600; color: var(--warm); }
.tr-osszesites { padding-bottom: var(--space); }
.tr-eredmeny { display: grid; gap: 1.25rem; padding: clamp(1.25rem, 3.5vw, 2.25rem); border-radius: 22px; background: var(--ink); color: var(--white); }
.tr-eredmeny h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.tr-eredmeny h3 { margin: 0 0 .6rem; font-size: 1.05rem; font-stretch: 104%; font-weight: 650; }
.tr-eredmeny a:not(.btn) { color: var(--white); }
@media (hover: hover) and (pointer: fine) { .tr-eredmeny a:not(.btn):hover { color: var(--cool-3); } }
.tr-eredmeny p { margin: 0; }
.tr-eredmeny-tartalom { display: grid; gap: 1.4rem; }
.tr-eredmeny-ures { color: rgba(255, 255, 255, .85); }
.tr-gep-lista { list-style: none; display: grid; gap: .9rem; margin: 0; padding: 0; }
.tr-gep-lista li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .8rem; line-height: 1.5; }
.tr-gep-lista .tr-jel { margin-top: .05rem; background: var(--white); color: var(--ink); }
.tr-gep-lista .tr-jel.is-kul { background: rgba(255, 255, 255, .16); color: var(--white); }
.tr-gep-lista .tr-jel.is-ures { background: rgba(255, 255, 255, .16); }
.tr-meret { margin-top: .15rem !important; font-size: 1.1rem; font-weight: 650; }
.tr-reszlet { font-size: .93rem; color: rgba(255, 255, 255, .78); }
.tr-ar-blokk { display: grid; gap: .35rem; padding: 1rem 1.15rem; border-radius: 14px; background: rgba(255, 255, 255, .07); }
.tr-cimke { font-size: .95rem; font-weight: 600; color: rgba(255, 255, 255, .7); }
.tr-ar { font-size: clamp(1.9rem, 5vw, 2.8rem); font-stretch: 112%; font-weight: 650; line-height: 1.05; }
.tr-ar-bontas { font-size: .95rem; line-height: 1.45; color: rgba(255, 255, 255, .88); font-variant-numeric: tabular-nums; }
.tr-ketto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2.5rem; }
.tr-pipak, .tr-tetelek { list-style: none; display: grid; gap: .4rem; margin: 0; padding: 0; font-size: .95rem; line-height: 1.45; }
.tr-pipak li { position: relative; padding-left: 1.5rem; color: rgba(255, 255, 255, .88); }
.tr-pipak li::before { content: ""; position: absolute; left: .15rem; top: .38em; width: .75rem; height: .4rem; border-left: 2px solid var(--cool-3); border-bottom: 2px solid var(--cool-3); transform: rotate(-45deg); }
.tr-tetelek li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem 1rem; padding-bottom: .4rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.tr-tetelek small { color: rgba(255, 255, 255, .65); }
.tr-tetel-ar { margin-left: auto; font-weight: 650; white-space: nowrap; }
.tr-apro { font-size: .9rem; line-height: 1.55; color: rgba(255, 255, 255, .75); }
.tr-cta { display: flex; flex-wrap: wrap; gap: .6rem; }
.tr-cta .btn-outline-light { background: transparent; }
.tr button.btn-ghost { background: var(--white); }
.tr-adatvedelem { font-size: .88rem; line-height: 1.5; color: rgba(255, 255, 255, .68); }
.tr-lepesek { display: grid; gap: .7rem; margin: 0 0 2rem; padding-left: 1.3rem; font-size: 1.05rem; line-height: 1.6; }
@media (max-width: 900px) {
.tr-grid { grid-template-columns: minmax(0, 1fr); }
.tr-bal { position: static; }
.tr-lap { height: clamp(13rem, calc(100vh - 23rem), 36rem); height: clamp(13rem, calc(100svh - 23rem), 36rem); }
.tr-csak-szeles { display: none; }
.tr-csak-keskeny { display: inline; }
}
@media (max-width: 640px) {
.tr-ketto { grid-template-columns: minmax(0, 1fr); }
.tr-modok { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tr-muveletek { order: 1; }
.tr-nezet { order: 2; margin-left: auto; }
.tr-szintek, .tr-oldal-valaszt { order: 3; flex-basis: 100%; }
.tr-nezet-vege { display: none; }
.tr-oldal-valaszt select { max-width: none; }
}
@media (max-width: 640px) and (pointer: coarse) {
.tr-nagyito { display: none; }
}
@media (pointer: coarse) {
.tr-szint-ful, .tr-oldal-valaszt select, .tr .tr-kis-gomb, .tr-allapot-gomb { min-height: 2.75rem; }
.tr-nezet button { min-height: 2.5rem; }
.tr .kalk-chip span { padding-block: .7rem; }
.tr-ablak-meret button, .tr-jel-gombok button:not(.tr-torol), .tr-jel-gombok .tr-torol, .tr-torol { width: 2.75rem; height: 2.75rem; }
.tr-kijelolve-torles { min-height: 2.5rem; }
.tr-allapot-sor { padding-right: 3rem; }
.tr-allapot-bezar { top: 0; right: 0; width: 2.75rem; height: 2.75rem; }
}
@media (max-width: 900px) {
.tr-allapot-sor { position: relative; left: auto; bottom: auto; max-width: none; margin-top: .55rem; pointer-events: auto; box-shadow: none; }
.tr-allapot-sor.is-ures { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }
.tr-lap-tarto:has(.tr-ures:not([hidden])) .tr-allapot-sor:not(.is-ures) { opacity: 1; }
.tr-lap-tarto:has(.tr-ures:not([hidden])) .tr-allapot-sor button { visibility: visible; }
}
@media (max-width: 900px) and (pointer: coarse) {
.tr-lap { height: clamp(12rem, calc(100vh - 24.5rem), 36rem); height: clamp(max(12rem, min(15.5rem, 100svh - 24.5rem)), calc(100svh - 28rem), 36rem); }
}
@media (max-width: 359px) {
.tr-eszkoz { font-size: .74rem; }
.tr-ikon-gomb { width: 2.45rem; height: 2.45rem; }
}
.tr-teljes-gomb, .tr-teljes-ki, .tr-bal.is-teljes .tr-teljes-be { display: none; }
.tr-bal.is-teljes .tr-teljes-ki { display: inline-grid; }
@media (max-width: 900px) {
.tr-teljes-gomb { display: inline-flex; gap: .35rem; width: auto; padding-inline: .6rem .75rem; font: inherit; font-size: .88rem; font-weight: 650; white-space: nowrap; }
html.tr-reszletes .tr-bal:not(.is-teljes) .tr-teljes-szoveg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html.tr-reszletes .tr-bal:not(.is-teljes) .tr-teljes-gomb { width: 2.6rem; padding: 0; justify-content: center; }
}
html.tr-teljes, html.tr-teljes body { overflow: hidden; overscroll-behavior: none; }
html.tr-teljes .site-header, html.tr-teljes .mobile-bar { visibility: hidden; }
html.tr-teljes .tr-bal.is-teljes {
position: fixed;
inset: 0;
z-index: 35;
display: flex;
flex-direction: column;
gap: .45rem;
padding: calc(.5rem + env(safe-area-inset-top, 0px)) calc(.6rem + env(safe-area-inset-right, 0px)) calc(.45rem + env(safe-area-inset-bottom, 0px)) calc(.6rem + env(safe-area-inset-left, 0px));
background: var(--white);
}
.tr-bal.is-teljes > :not(.tr-eszkozok):not(.tr-nezetsor):not(.tr-lap-tarto):not(.tr-almod) { display: none; }
.tr-bal.is-teljes .tr-lap-tarto { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.tr-bal.is-teljes .tr-lap { flex: 1 1 auto; height: auto; min-height: 8rem; }
.tr-bal.is-teljes .tr-allapot-sor,
.tr-bal.is-teljes .tr-allapot-sor.is-ures { position: relative; left: auto; bottom: auto; flex: none; width: auto; max-width: none; height: 4.3rem; margin: .45rem 0 0; padding: .35rem 2.6rem .35rem .7rem; overflow-y: auto; clip-path: none; border: 1px solid var(--line); box-shadow: none; pointer-events: auto; }
.tr-bal.is-teljes .tr-allapot-sor.is-ures { visibility: hidden; }
.tr-bal.is-teljes .tr-allapot { font-size: .9rem; line-height: 1.4; }
.tr-bal.is-teljes .tr-ures-meretek { display: none; }
@media (prefers-reduced-motion: reduce) {
.tr-tinta.is-elhalvanyul, .tr-eszkoz, .tr-kartya, .tr-allapot-sor { transition: none; }
}
.eszkoz-szakasz { padding-block: var(--space); background: var(--paper); }
.eszkoz-sav { background: var(--white); border-top: 1px solid var(--line); }
.eszkoz-oldal { padding-top: 0; }
.eszkozok { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1.25rem; margin: 0; padding: 0; }
.eszkoz { display: flex; min-width: 0; }
.eszkoz:nth-child(2) { --kartya: .12s; }
.eszkoz:nth-child(3) { --kartya: .24s; }
.eszkoz:nth-child(4) { --kartya: .36s; }
.eszkoz-link {
display: flex;
flex-direction: column;
width: 100%;
overflow: hidden;
border: 1.5px solid var(--line);
border-radius: 18px;
background: var(--white);
color: var(--ink);
text-decoration: none;
transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease;
}
@media (hover: hover) and (pointer: fine) { .eszkoz-link:hover { border-color: var(--navy); box-shadow: 0 20px 40px -28px rgba(26, 33, 80, .6); color: var(--ink); } }
.eszkoz-link:focus-visible { border-radius: 18px; }
.eszkoz-abra { display: block; aspect-ratio: 5 / 3; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #F8FAFE, #EEF3FB); }
.eszkoz-abra svg { display: block; width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.eszkoz-szoveg { display: flex; flex: 1; flex-direction: column; gap: .5rem; padding: 1.1rem 1.25rem 1.25rem; }
.eszkoz-cim { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 1.15rem; font-stretch: 106%; font-weight: 650; line-height: 1.25; }
.eszkoz-uj { padding: .15rem .55rem; border-radius: 999px; background: var(--navy); color: var(--white); font-size: .75rem; font-stretch: 100%; font-weight: 700; letter-spacing: .02em; }
.eszkoz-leiras { color: var(--ink-soft); font-size: .97rem; line-height: 1.5; }
.eszkoz-kiemeles { align-self: flex-start; padding: .2rem .65rem; border-radius: 999px; background: #EAF1FD; color: var(--navy); font-size: .85rem; font-weight: 700; }
.eszkoz-gomb { display: inline-flex; align-items: center; gap: .3rem; margin-top: auto; padding-top: .4rem; color: var(--navy); font-weight: 650; }
.eszkoz-gomb .icon { width: 1.1rem; height: 1.1rem; transition: transform .25s ease; }
.eszkoz-link:focus-visible .eszkoz-gomb .icon { transform: translateX(4px); }
@media (hover: hover) and (pointer: fine) { .eszkoz-link:hover .eszkoz-gomb .icon { transform: translateX(4px); } }
.ea-racs { stroke: #E3E9F4; stroke-width: 1; }
.ea-fal { stroke: var(--navy); stroke-width: 3; }
.ea-gep { fill: var(--white); stroke: var(--navy); stroke-width: 2; }
.ea-ventil { stroke: var(--cool); stroke-width: 2; transform-box: fill-box; transform-origin: 50% 50%; }
.ea-cso { stroke: var(--warm-2); stroke-width: 3; }
.ea-cso-aram { stroke: var(--white); stroke-width: 1.3; stroke-dasharray: .04 .06; opacity: 0; }
.ea-papir { fill: var(--white); stroke: var(--line-strong); stroke-width: 1.5; }
.ea-keret { stroke: var(--cool); stroke-width: 2.5; }
.ea-vonal-vekony { stroke: var(--line-strong); stroke-width: 1.5; }
.ea-led { fill: var(--cool-2); }
.ea-meret { stroke: var(--warm-2); stroke-width: 2; }
.ea-felirat { fill: var(--ink-soft); font-family: var(--font); font-size: 11px; font-weight: 650; }
.ea-aramlas path { stroke: var(--cool-2); stroke-width: 2; opacity: 0; }
.ea-skala-alap { stroke: var(--line); stroke-width: 10; }
.ea-skala { stroke: var(--cool); stroke-width: 10; stroke-dasharray: 1; stroke-dashoffset: .3; }
.ea-rovatkak { stroke: var(--line-strong); stroke-width: 2; }
.ea-mutato, .ea-mutato-ing { transform-box: view-box; transform-origin: 100px 92px; }
.ea-mutato { transform: rotate(36deg); }
.ea-mutato path { stroke: var(--warm); stroke-width: 3.5; }
.ea-tengely { fill: var(--navy); }
.ea-ho path { stroke: var(--warm-2); stroke-width: 2.5; }
.ea-talaj { stroke: var(--line-strong); stroke-width: 2; }
.ea-kijelzo { fill: var(--navy); }
.ea-kod { fill: #EAF4FF; font-family: var(--font); font-size: 10.5px; font-weight: 750; letter-spacing: .08em; }
.ea-lencse { fill: rgba(255, 255, 255, .14); stroke: var(--navy); stroke-width: 3; }
.ea-nyel { stroke: var(--navy); stroke-width: 6; stroke-linecap: round; }
.eszkozok.is-varakozik .ea-rajzol { stroke-dasharray: 1; stroke-dashoffset: 1; }
.eszkozok.is-varakozik .ea-skala { stroke-dashoffset: 1; }
.eszkozok.is-varakozik .ea-feltunik, .eszkozok.is-varakozik .ea-leereszkedik { opacity: 0; }
.eszkozok.is-varakozik .ea-mutato { transform: rotate(-90deg); }
.eszkozok.is-latszik .ea-rajzol { animation: ea-rajzol 1.1s cubic-bezier(.4, 0, .2, 1) both; }
.eszkozok.is-latszik .ea-skala { animation: ea-skala 1.4s cubic-bezier(.2, .8, .2, 1) both; }
.eszkozok.is-latszik .ea-feltunik { animation: ea-feltunik .5s ease both; }
.eszkozok.is-latszik .ea-leereszkedik { animation: ea-leereszkedik .8s cubic-bezier(.3, .7, .3, 1.2) both; }
.eszkozok.is-latszik .ea-mutato { animation: ea-mutato 1.5s cubic-bezier(.2, .8, .3, 1.15) both; }
.eszkozok.is-latszik .ea-k1 { animation-delay: calc(var(--kartya, 0s) + .1s); }
.eszkozok.is-latszik .ea-k2 { animation-delay: calc(var(--kartya, 0s) + .55s); }
.eszkozok.is-latszik .ea-k3 { animation-delay: calc(var(--kartya, 0s) + .95s); }
.eszkozok.is-latszik .ea-k4 { animation-delay: calc(var(--kartya, 0s) + 1.2s); }
.eszkozok.is-latszik .ea-k5 { animation-delay: calc(var(--kartya, 0s) + 1.6s); }
@keyframes ea-rajzol { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ea-skala { from { stroke-dashoffset: 1; } to { stroke-dashoffset: .3; } }
@keyframes ea-feltunik { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ea-leereszkedik { 0% { opacity: 0; transform: translateY(-22px); } 60% { opacity: 1; transform: translateY(3px); } 100% { opacity: 1; transform: none; } }
@keyframes ea-mutato { from { transform: rotate(-90deg); } to { transform: rotate(36deg); } }
@media (prefers-reduced-motion: no-preference) {
@media (hover: hover) and (pointer: fine) { .eszkoz-link:hover { transform: translateY(-3px); } }
.eszkoz-link:focus-visible .ea-cso-aram { opacity: .95; animation: ea-aramlik .9s linear infinite; }
@media (hover: hover) and (pointer: fine) { .eszkoz-link:hover .ea-cso-aram { opacity: .95; animation: ea-aramlik .9s linear infinite; } }
.eszkoz-link:focus-visible .ea-ventil { animation: ea-forog 1.6s linear infinite; }
@media (hover: hover) and (pointer: fine) { .eszkoz-link:hover .ea-ventil { animation: ea-forog 1.6s linear infinite; } }
.eszkoz-link:focus-visible .ea-aramlas path { animation: ea-fuj 1.5s ease-in-out infinite; }
@media (hover: hover) and (pointer: fine) { .eszkoz-link:hover .ea-aramlas path { animation: ea-fuj 1.5s ease-in-out infinite; } }
.eszkoz-link:focus-visible .ea-aramlas path:nth-child(2) { animation-delay: .2s; }
@media (hover: hover) and (pointer: fine) { .eszkoz-link:hover .ea-aramlas path:nth-child(2) { animation-delay: .2s; } }
.eszkoz-link:focus-visible .ea-aramlas path:nth-child(3) { animation-delay: .4s; }
@media (hover: hover) and (pointer: fine) { .eszkoz-link:hover .ea-aramlas path:nth-child(3) { animation-delay: .4s; } }
.eszkoz-link:focus-visible .ea-mutato-ing { animation: ea-ingadozik 1.4s ease-in-out infinite; }
@media (hover: hover) and (pointer: fine) { .eszkoz-link:hover .ea-mutato-ing { animation: ea-ingadozik 1.4s ease-in-out infinite; } }
.eszkoz-link:focus-visible .ea-ho path { animation: ea-emelkedik 1.6s ease-in-out infinite; }
@media (hover: hover) and (pointer: fine) { .eszkoz-link:hover .ea-ho path { animation: ea-emelkedik 1.6s ease-in-out infinite; } }
.eszkoz-link:focus-visible .ea-ho path:nth-child(2) { animation-delay: .25s; }
@media (hover: hover) and (pointer: fine) { .eszkoz-link:hover .ea-ho path:nth-child(2) { animation-delay: .25s; } }
.eszkoz-link:focus-visible .ea-ho path:nth-child(3) { animation-delay: .5s; }
@media (hover: hover) and (pointer: fine) { .eszkoz-link:hover .ea-ho path:nth-child(3) { animation-delay: .5s; } }
.eszkoz-link:focus-visible .ea-villog { animation: ea-villog 1s steps(1) infinite; }
@media (hover: hover) and (pointer: fine) { .eszkoz-link:hover .ea-villog { animation: ea-villog 1s steps(1) infinite; } }
}
@keyframes ea-villog { 50% { opacity: 0; } }
@keyframes ea-aramlik { to { stroke-dashoffset: -.2; } }
@keyframes ea-forog { to { transform: rotate(360deg); } }
@keyframes ea-fuj { 0% { opacity: 0; transform: translateY(-3px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(7px); } }
@keyframes ea-ingadozik { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-6deg); } }
@keyframes ea-emelkedik { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-5px); opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
.eszkoz-link, .eszkoz-gomb .icon, .hero-uj .icon { transition: none; }
}
@media (max-width: 560px) {
.eszkozok:not(.eszkozok-reszletes) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.eszkozok:not(.eszkozok-reszletes) .eszkoz-leiras { display: none; }
.eszkozok:not(.eszkozok-reszletes) .eszkoz-szoveg { gap: .35rem; padding: .8rem .85rem .9rem; }
.eszkozok:not(.eszkozok-reszletes) .eszkoz-cim { font-size: 1rem; }
.eszkozok:not(.eszkozok-reszletes) .eszkoz-gomb { font-size: .95rem; }
.eszkoz-link, .eszkoz-link:focus-visible { border-radius: 14px; }
}
.eszkoz-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(2rem, 4vw, 3rem); padding: 1.5rem 1.75rem; border-radius: 18px; background: var(--ink); color: var(--white); }
.eszkoz-cta p { margin: 0; font-size: 1.1rem; font-weight: 600; }
.eszkoz-cta div { display: flex; flex-wrap: wrap; gap: .75rem; }
.site-footer { padding-block: 2rem 1.25rem; background: var(--paper); font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }
.site-footer a { color: var(--ink); }
.site-footer p { margin: 0; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.lablec { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr) minmax(0, 1.55fr); gap: 1.5rem 2rem; }
.lablec-ceg { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; align-items: center; gap: .4rem .8rem; }
.lablec-logo { width: auto; height: 2.4rem; }
.lablec-ceg p { font-size: .86rem; line-height: 1.4; }
.lablec-ceg .lablec-fgaz { grid-column: 1 / -1; }
.lablec-kapcsolat { display: grid; align-content: start; gap: .1rem; }
.lablec-oldalak ul { columns: 3 8.5rem; column-gap: 1.25rem; }
.lablec-oldalak li { break-inside: avoid; padding-block: .06rem; }
.lablec-also { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.5rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .85rem; }
.lablec-also ul { display: flex; flex-wrap: wrap; gap: .1rem 1.1rem; }
.lablec-kozosseg { margin-left: auto; }
@media (max-width: 960px) {
.lablec { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lablec-oldalak { grid-column: 1 / -1; }
.lablec-oldalak ul { columns: 3 9rem; }
}
@media (max-width: 600px) {
.lablec { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
.lablec-logo { height: 2rem; }
.lablec-ceg p { font-size: .8rem; line-height: 1.35; }
.lablec-oldalak .lablec-eszkoz { display: none; }
.lablec-oldalak ul { columns: auto; display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
.lablec-kozosseg { margin-left: 0; }
}
@media (pointer: coarse) {
.lablec-oldalak a, .lablec-also a, .lablec-also .link-btn { display: inline-block; padding-block: .3rem; }
.lablec-kapcsolat a { display: inline-block; padding-block: .22rem; }
}
.mobile-bar { display: none; }
@media (max-width: 760px) {
.mobile-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 30;
display: grid;
grid-template-columns: 1fr 1fr;
gap: .6rem;
padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
background: var(--white);
border-top: 1px solid var(--line);
box-shadow: 0 -12px 30px -24px rgba(26, 33, 80, .5);
}
.mobile-bar .btn { min-height: 2.9rem; padding-inline: .75rem; }
body { padding-bottom: 4.4rem; }
}
.suti {
position: fixed;
right: max(1.25rem, env(safe-area-inset-right, 0px));
bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
z-index: 40;
width: min(26rem, 100% - 2.5rem);
padding: 1.25rem 1.35rem 1.1rem;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: 0 26px 50px -26px rgba(26, 33, 80, .5);
animation: suti-be .4s cubic-bezier(.2, .7, .2, 1);
}
.suti p { margin: 0 0 .9rem; font-size: .95rem; line-height: 1.5; color: var(--ink-soft); }
.suti .suti-cim { margin-bottom: .35rem; font-size: 1.15rem; font-stretch: 112%; font-weight: 650; line-height: 1.25; color: var(--ink); }
.suti .suti-allapot { font-weight: 600; color: var(--ink); }
.suti-gombok { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .8rem; }
.suti-gombok .btn { min-height: 2.75rem; padding-inline: .7rem; }
.suti .suti-reszlet { margin: 0; font-size: .9rem; }
.suti .suti-reszlet a { color: var(--ink); }
@keyframes suti-be { from { opacity: 0; transform: translateY(1rem); } }
@media (max-width: 760px) {
.suti { left: max(.5rem, env(safe-area-inset-left, 0px)); right: max(.5rem, env(safe-area-inset-right, 0px)); bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); width: auto; padding: 1.1rem 1.1rem 1rem; }
}
@media (max-width: 359px) {
.suti-gombok { grid-template-columns: minmax(0, 1fr); }
}
.link-btn {
padding: 0;
border: 0;
background: none;
font: inherit;
color: var(--ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .18em;
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .link-btn:hover { color: var(--navy); } }
.lb-open { overflow: hidden; }
.lb {
width: 100%;
height: 100%;
max-width: none;
max-height: none;
margin: 0;
padding: 0;
border: 0;
background: rgba(14, 18, 44, .96);
color: var(--white);
overscroll-behavior: contain;
}
.lb[open] { display: grid; place-items: center; }
.lb::backdrop { background: rgba(14, 18, 44, .6); }
.lb, .lb::backdrop { opacity: 0; transition: opacity .2s ease, display .2s allow-discrete, overlay .2s allow-discrete; }
.lb[open], .lb[open]::backdrop { opacity: 1; }
@starting-style { .lb[open], .lb[open]::backdrop { opacity: 0; } }
.lb-figure { transition: scale .25s cubic-bezier(.23, 1, .32, 1); }
@starting-style { .lb[open] .lb-figure { scale: .97; } }
.lb-figure { display: grid; justify-items: center; gap: .75rem; max-width: 100%; padding: 4rem 4.5rem 1.5rem; }
.lb-img {
width: auto;
height: auto;
max-width: 100%;
max-height: calc(100vh - 9.5rem);
max-height: calc(100dvh - 9.5rem);
object-fit: contain;
border-radius: 6px;
background: rgba(255, 255, 255, .05);
transition: opacity .25s ease;
}
.lb-img.is-loading { opacity: .35; }
.lb-cap { max-width: 52rem; text-align: center; font-size: .95rem; color: rgba(255, 255, 255, .8); }
.lb-count { position: fixed; top: max(1.2rem, env(safe-area-inset-top, 0px)); left: max(1.25rem, env(safe-area-inset-left, 0px)); margin: 0; font-size: .95rem; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .72); }
.lb-btn {
position: fixed;
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .1);
color: var(--white);
cursor: pointer;
transition: background-color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .lb-btn:hover { background: rgba(255, 255, 255, .22); } }
.lb-btn svg { width: 1.4rem; height: 1.4rem; }
.lb-btn[hidden] { display: none; }
.lb-close { top: max(.75rem, env(safe-area-inset-top, 0px)); right: max(.75rem, env(safe-area-inset-right, 0px)); }
.lb-prev,
.lb-next { top: 50%; transform: translateY(-50%); }
.lb-prev { left: max(.75rem, env(safe-area-inset-left, 0px)); }
.lb-next { right: max(.75rem, env(safe-area-inset-right, 0px)); }
@media (max-width: 700px) {
.lb-figure { padding: 3.75rem .75rem calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
.lb-img { max-height: calc(100vh - 12rem); max-height: calc(100dvh - 12rem); }
.lb-prev,
.lb-next { top: auto; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); transform: none; }
.lb-prev { left: calc(50% - 3.75rem); }
.lb-next { right: calc(50% - 3.75rem); }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition: none !important; animation: none !important; }
@media (hover: hover) and (pointer: fine) { .project-card:hover img, .gallery-grid a:hover img, .post-card:hover .post-card-photo img { transform: none; } }
}
html.terv {
--t-papir: #FAF6EE;
--t-halo: #EDE6D8;
--t-halo-eros: #E2D8C5;
--t-grafit: #3D3A35;
--t-grafit-2: #8F897E;
--t-tinta: #172366;
--t-tinta-2: #48528F;
--t-kek: #263BAA;
--t-tervrajz: #263BAA;
--t-cim: #263BAA;
--t-fenykek: #B4BEFF;
--t-kek-halvany: #F0F1F9;
--t-szalag: rgba(98, 114, 214, .5);
--t-tervrajz-vonal: rgba(255, 255, 255, .13);
--t-narancs: #F26B1D;
--t-csillag: #E0A100;
--white: #FFFDF8;
--paper: #FAF6EE;
--line: #E6DED0;
--line-strong: #CFC3AE;
--ink: #172366;
--ink-soft: #48528F;
--t-kezi: var(--font);
--t-szemcse: url("../img/terv/grafit-szemcse.png");
--t-ease: cubic-bezier(.23, 1, .32, 1);
--space: clamp(2.5rem, 5.5vw, 5rem);
background: var(--t-papir);
}
html.terv body {
position: relative;
z-index: 0;
background-color: var(--t-papir);
color: var(--t-tinta);
}
.t-lapkeret { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.t-lapkeret::before, .t-lapkeret::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 10px;
border-left: 1px solid rgba(58, 63, 70, .3);
border-right: 2px solid rgba(58, 63, 70, .55);
background: repeating-linear-gradient(to bottom, transparent 0 119px, rgba(58, 63, 70, .4) 119px 120px);
}
.t-lapkeret::before { left: 12px; }
.t-lapkeret::after { right: 12px; transform: scaleX(-1); }
@media (max-width: 760px) { .t-lapkeret { display: none; } }
.t-szlogen, .t-hos-megj, .t-szolg-fotok-cim, .t-lepes-szam, .t-felirat, .t-cetli h3, .t-markak-megj { font-stretch: 75%; letter-spacing: .015em; }
.terv ::selection { background: #F8DCC8; }
html.terv { -webkit-tap-highlight-color: transparent; }
.terv :is(a, button, .btn, .t-gomb, [role="button"], summary, label) { touch-action: manipulation; }
.terv :is(button, .btn, .t-gomb, [role="button"]) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (pointer: coarse) {
.terv :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { font-size: max(16px, 1em); }
}
.terv :is(h1, h2, h3, .t-szlogen) { text-wrap: balance; }
.terv :is(h1, h2, h3) { hyphens: auto; overflow-wrap: anywhere; }
.terv .szo { white-space: nowrap; -webkit-hyphens: manual; hyphens: manual; }
.terv p { text-wrap: pretty; }
.terv :focus-visible { outline-color: var(--t-kek); }
.terv h2 { font-size: clamp(2rem, 3.6vw, 3rem); font-stretch: 116%; font-weight: 740; line-height: 1.04; letter-spacing: -.015em; }
.terv :is(h1, h2) { color: var(--t-cim); }
.terv :is(.t-kek, .cta-band, .quote, .hero, .kalk-eredmeny, .tr-eredmeny, .eszkoz-cta, .project-card, .munka-foto) { --t-cim: currentColor; }
@media (max-width: 400px) {
.terv .page-hero h1 { font-size: clamp(1.7rem, 7.6vw, 2.1rem); }
.terv h2 { font-size: clamp(1.6rem, 7.2vw, 2rem); }
}
.terv .section-head p { color: var(--t-tinta-2); }
.terv .chooser, .terv .eszkoz-szakasz, .terv .szalag, .terv .area, .terv .gep-ajanlo { background: transparent; }
.terv .btn { border-radius: 4px; }
.terv .btn-ghost { border-color: var(--t-tinta); color: var(--t-tinta); }
@media (hover: hover) and (pointer: fine) { .terv .btn-ghost:hover { background: var(--t-tinta); color: var(--white); } }
.terv .site-header {
background: rgba(250, 246, 238, .9);
-webkit-backdrop-filter: saturate(1.15) blur(10px);
backdrop-filter: saturate(1.15) blur(10px);
border-bottom: 1px solid rgba(58, 63, 70, .3);
}
.terv .main-nav a:not(.btn) { color: var(--t-tinta); }
.terv .nav-call { background: transparent; color: var(--t-tinta); box-shadow: inset 0 0 0 1.5px var(--t-tinta); }
.terv .menu-toggle { border-radius: 4px; border-color: var(--t-tinta); background: transparent; }
@media (hover: hover) and (pointer: fine) {
.terv .main-nav a:not(.btn):hover { color: var(--t-tinta); border-bottom-color: var(--t-narancs); }
.terv .nav-call:hover { background: var(--t-tinta); color: var(--white); box-shadow: none; }
}
@media (max-width: 1099px) {
.terv .main-nav { background: var(--t-papir); border-bottom: 1px solid rgba(58, 63, 70, .3); }
}
.t-gomb {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 3.2rem;
padding: .8rem 1.45rem;
border: 0;
border-radius: 4px;
font: inherit;
font-size: 1.02rem;
font-stretch: 106%;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
-webkit-user-select: none;
user-select: none;
transition: transform .18s var(--t-ease), background-color .2s ease, color .2s ease;
}
.t-gomb > span { display: inline-flex; align-items: center; gap: .55rem; }
.t-gomb .icon { width: 1.15rem; height: 1.15rem; }
.t-gomb-fo { background: var(--t-narancs); color: var(--t-tinta); }
.t-gomb-fo:hover { color: var(--t-tinta); }
.t-gomb-masod { background: transparent; color: var(--t-tinta); box-shadow: inset 0 0 0 2px var(--t-tinta); }
.t-gomb-masod:hover { color: var(--t-tinta); }
.t-gomb:active { transform: scale(.96); }
.t-gomb-fo:active { background: #DE5C10; }
.t-gomb-masod:active { background: rgba(26, 33, 80, .06); }
.t-gomb:focus-visible { outline: 3px solid var(--t-kek); outline-offset: 5px; border-radius: 4px; }
.t-keret { position: absolute; top: -7px; left: -8px; width: calc(100% + 16px); max-width: none; height: calc(100% + 14px); overflow: visible; pointer-events: none; }
.t-keret path {
fill: none;
stroke: var(--t-grafit);
stroke-width: 1.5;
stroke-linecap: round;
stroke-dasharray: 600px;
stroke-dashoffset: 600px;
vector-effect: non-scaling-stroke;
transition: stroke-dashoffset .45s cubic-bezier(.4, .1, .3, 1);
}
@media (hover: hover) and (pointer: fine) {
.t-gomb:hover { transform: translateY(-2px); }
.t-gomb:hover .t-keret path { stroke-dashoffset: 0; }
.t-gomb:active { transform: scale(.97); }
}
.t-gomb:focus-visible .t-keret path { stroke-dashoffset: 0; }
.t-gomb.is-keretes .t-keret path { stroke-dashoffset: 0; transition-duration: .8s; }
@media (hover: none) {
.t-gomb .t-keret { top: -10px; left: -11px; width: calc(100% + 22px); height: calc(100% + 20px); }
}
.js-rajz [data-rajzol] .r { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.js-rajz [data-rajzol] .m { opacity: 0; }
.js-rajz [data-rajzol].is-rajzolva .r { animation: t-huz var(--t, .8s) cubic-bezier(.45, .05, .25, 1) var(--d, 0s) forwards; }
.js-rajz [data-rajzol].is-rajzolva .m { animation: t-megjelen .5s ease var(--d, 0s) forwards; }
@keyframes t-huz { to { stroke-dashoffset: 0; } }
@keyframes t-megjelen { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.js-rajz [data-rajzol] .r { stroke-dashoffset: 0 !important; }
.js-rajz [data-rajzol] .m { opacity: 1 !important; }
}
.terv :is(.t-hos-foto, .page-hero-photo img, .t-ragasztott img, .photo-grid img, .post-figure img, .post-card-photo img) {
filter: sepia(.07) saturate(.95) contrast(1.02);
}
.terv .t-m-render { mix-blend-mode: multiply; }
.terv :is(.t-gomb-fo, .btn-primary):not(.nav-call) {
box-shadow: 0 0 0 1px rgba(255, 160, 90, .35), 0 12px 32px -12px rgba(255, 122, 26, .8);
}
@media (prefers-reduced-motion: no-preference) {
.js-rajz:not(.mozgas-indult) :is(.t-hos-szoveg > :is(.t-szlogen, h1), .t-hos-jobb > *,
.page-hero .wrap > :is(.crumbs, .gep-hero-marka, h1, .lead, ul, .hero-actions, .eszkozgombok),
.page-hero .page-hero-grid > div > :is(.crumbs, .gep-hero-marka, h1, .lead, ul, .hero-actions, .eszkozgombok, .ardoboz, .gep-hero-linkek),
.page-hero .page-hero-grid > :is(.page-hero-photo, .gep-hero-rajz)) { opacity: 0; }
.mozog-cim .szo { display: inline-block; overflow: hidden; vertical-align: top; padding: .16em .06em .14em; margin: -.16em -.06em -.14em; }
.mozog-cim .szo-b { display: inline-block; translate: 0 115%; }
.mozog-cim.is-megjelent .szo-b { translate: none; animation: mozog-szo .8s var(--t-ease) calc(var(--mk, 0ms) + var(--i, 0) * 45ms) both; }
.mozog-fel { opacity: 0; translate: 0 1.1rem; }
.mozog-fel.is-megjelent { opacity: 1; translate: none; animation: mozog-attun .6s ease var(--mk, 0ms) both, mozog-emel .8s var(--t-ease) var(--mk, 0ms) both; }
@keyframes mozog-szo { from { translate: 0 115%; } to { translate: none; } }
@keyframes mozog-attun { from { opacity: 0; } to { opacity: 1; } }
@keyframes mozog-emel { from { translate: 0 1.1rem; } to { translate: none; } }
.mozog-kep { opacity: 0; }
.mozog-kep img { scale: 1.08; }
.mozog-kep.is-megjelent { opacity: 1; animation: kep-feltarul .9s cubic-bezier(.65, 0, .35, 1) calc(var(--mk, 0ms) + 120ms) both; }
.mozog-kep.is-megjelent img { scale: 1; transition: scale 1.3s var(--t-ease) calc(var(--mk, 0ms) + 120ms); }
@keyframes kep-feltarul { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.gomb-gordul { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .12em; margin-block: -.12em; }
.gomb-gordul > span { display: inline-block; text-shadow: 0 1.6em currentColor; transition: translate .3s var(--t-ease); }
:is(.t-gomb, .btn):hover .gomb-gordul > span { translate: 0 -1.6em; }
}
@media (forced-colors: active) { .gomb-gordul > span { translate: none !important; } }
.gomb-gordul.is-tobb-sor > span { text-shadow: none; translate: none !important; }
.t-hos { padding: clamp(1.5rem, 3.2vw, 2.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.t-hos-szoveg { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.t-szlogen { margin: 0 0 .5rem; font-family: var(--t-kezi); font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 650; line-height: 1.2; color: var(--t-kek); }
.t-hos h1 { max-width: 30ch; font-size: clamp(2.15rem, 3.6vw, 3.4rem); font-stretch: 118%; font-weight: 770; line-height: 1.02; letter-spacing: -.02em; }
.t-hos-jobb {
display: grid;
grid-template-columns: minmax(0, 38rem) auto;
grid-template-areas: "lead gombok" "lead uj";
justify-content: space-between;
align-items: end;
gap: .9rem 3rem;
margin-top: 1.2rem;
}
.t-hos-lead { grid-area: lead; margin: 0; font-size: 1.1rem; color: var(--t-tinta-2); }
.t-gombok { grid-area: gombok; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .9rem 1.1rem; }
.t-uj { grid-area: uj; justify-self: end; display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--t-tinta); text-decoration: none; }
.t-uj-cimke { padding: .05rem .5rem; border: 1.5px solid var(--t-kek); border-radius: 3px; color: var(--t-kek); font-size: .82rem; font-weight: 750; }
.t-uj > span:last-child { text-decoration: underline; text-decoration-color: rgba(26, 33, 80, .3); text-underline-offset: .2em; }
@media (hover: hover) and (pointer: fine) { .t-uj:hover > span:last-child { text-decoration-color: var(--t-kek); } }
.t-hos-megj { width: min(100% - 2 * var(--gutter), var(--wrap)); margin: 1rem auto 0; font-family: var(--t-kezi); font-size: 1rem; font-weight: 550; color: var(--t-tinta-2); }
.t-hos-kep { width: min(100% - 2 * var(--gutter), 86rem); margin: clamp(1.25rem, 2.6vw, 2rem) auto 0; }
.t-hos-keret {
--x0: 150; --y0: 420; --cw: 3100; --ch: 1150;
position: relative;
overflow: hidden;
aspect-ratio: 3100 / 1150;
border-top: 1px solid rgba(58, 63, 70, .4);
border-bottom: 1px solid rgba(58, 63, 70, .4);
}
.t-hos-belso {
position: absolute;
left: calc(var(--x0) / var(--cw) * -100%);
top: calc(var(--y0) / var(--ch) * -100%);
width: calc(var(--kw, 3500) / var(--cw) * 100%);
aspect-ratio: var(--kw, 3500) / var(--kh, 2103);
}
.t-hos-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-hos-rontgen {
display: grid;
grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, 29rem) clamp(1.75rem, 3.5vw, 3.5rem) minmax(0, calc(var(--wrap) - 32.5rem)) minmax(var(--gutter), 1fr);
grid-template-areas: ". szoveg . kep kep";
align-items: center;
}
.t-hos-rontgen .t-hos-szoveg { grid-area: szoveg; width: auto; margin: 0; }
.t-hos-rontgen .t-hos-kep { grid-area: kep; width: auto; margin: 0; }
.t-hos-rontgen h1 { font-size: clamp(2.1rem, 3vw, 2.85rem); }
.t-hos-rontgen .t-hos-jobb { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lead" "gombok" "uj"; justify-content: start; gap: 1.1rem; }
.t-hos-rontgen .t-gombok { justify-content: flex-start; }
.t-hos-rontgen .t-uj { justify-self: start; }
.t-hos-rontgen .t-hos-szoveg > .t-hos-megj { width: auto; margin: 1.3rem 0 0; }
.t-rontgen .t-hos-keret { --kw: 2736; --kh: 1829; --x0: 330; --y0: 40; --cw: 2406; --ch: 1590; aspect-ratio: 2406 / 1590; border: 0; border-radius: 6px 0 0 6px; box-shadow: 0 30px 60px -42px rgba(10, 20, 60, .55); }
@media (hover: hover) and (pointer: fine) { .t-rontgen .t-hos-keret { cursor: crosshair; } }
.t-rontgen-reteg { position: absolute; inset: 0; clip-path: circle(var(--lr, 130px) at var(--lx, 45.7%) var(--ly, 33.9%)); pointer-events: none; }
.t-rontgen-rajz { position: absolute; inset: 0; width: 100%; height: 100%; }
.t-rontgen-elo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.t-elo-lapat path { fill: #545a54; }
.t-elo-racs { fill: none; stroke: #8b928c; stroke-width: 1.15; opacity: .85; }
.t-elo-tengely { fill: #646b65; }
.t-elo-lapat { animation: t-forog .85s linear infinite; animation-play-state: paused; }
.js-rajz .t-rontgen.is-lathato .t-elo-lapat { animation-play-state: running; }
.t-lencse {
position: absolute;
z-index: 2;
left: calc(38.2% - var(--lr, 130px));
top: calc(36.5% - var(--lr, 130px));
width: calc(var(--lr, 130px) * 2);
height: calc(var(--lr, 130px) * 2);
border-radius: 50%;
box-shadow: 0 0 0 min(2px, var(--lr, 130px)) rgba(255, 255, 255, .95), 0 0 0 min(7px, var(--lr, 130px)) rgba(38, 59, 170, .25), 0 18px 40px -12px rgba(10, 20, 60, .6), inset 0 0 44px rgba(4, 12, 40, .5);
pointer-events: none;
touch-action: none;
}
.t-lencse { transition: box-shadow .25s ease; }
.t-rontgen.is-mozog .t-lencse { box-shadow: 0 0 0 2px #fff, 0 0 0 8px rgba(180, 190, 255, .42), 0 0 36px rgba(180, 190, 255, .5), 0 18px 40px -12px rgba(10, 20, 60, .6), inset 0 0 44px rgba(4, 12, 40, .5); }
.t-rontgen.is-elo .t-lencse { left: 0; top: 0; transform: translate3d(calc(var(--kx, 0px) - var(--lr, 0px)), calc(var(--ky, 0px) - var(--lr, 0px)), 0); will-change: transform; }
.t-rontgen.is-elo .t-rontgen-reteg { clip-path: circle(var(--lr, 0px) at var(--lx, 0px) var(--ly, 0px)); }
.t-rontgen.is-teljes .t-lencse { box-shadow: none; }
.t-rontgen .t-hos-keret { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.t-rontgen img { -webkit-user-drag: none; }
.t-rontgen-gomb {
position: absolute;
right: .85rem;
bottom: .85rem;
z-index: 3;
display: inline-flex;
align-items: center;
gap: .45rem;
min-height: 2.75rem;
padding: .45rem .85rem;
border: 0;
border-radius: 4px;
background: rgba(251, 252, 254, .92);
color: var(--t-tinta);
box-shadow: 0 0 0 1px rgba(58, 63, 70, .35), 0 8px 18px -10px rgba(10, 20, 60, .5);
font: inherit;
font-size: .9rem;
font-weight: 650;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
user-select: none;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
transition: transform .16s var(--t-ease), background-color .2s ease, color .2s ease, opacity .3s ease;
}
.t-rontgen-gomb svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.t-rontgen-gomb:active { transform: scale(.96); }
.t-rontgen-gomb[aria-pressed="true"] { background: var(--t-tervrajz); color: var(--white); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 8px 18px -10px rgba(10, 20, 60, .5); }
.t-rontgen-gomb:focus-visible { outline: 3px solid var(--t-kek); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .t-rontgen-gomb:hover { background: var(--white); } .t-rontgen-gomb[aria-pressed="true"]:hover { background: #4053B4; } }
.t-rontgen-rajz path { vector-effect: non-scaling-stroke; }
.t-rontgen-rajz .x-hatter { fill: var(--t-tervrajz); }
.t-rontgen-rajz .x-racs { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 1; }
.t-rontgen-rajz .x-v { fill: none; stroke: rgba(234, 242, 255, .85); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.t-rontgen-rajz .x-vastag { stroke-width: 2.2; }
.t-rontgen-rajz .x-vekony { stroke-width: 1; stroke: rgba(234, 242, 255, .55); }
.t-rontgen-rajz .x-satir { fill: none; stroke: rgba(234, 242, 255, .28); stroke-width: .9; }
.x-hutes { --c: #6FC3FF; }
.x-futes { --c: #FF9F62; }
.x-legtech { --c: #8EE6CB; }
.x-viz { --c: #AFBDFF; }
.t-rontgen-rajz .x-gep, .t-rontgen-rajz .x-cso, .t-rontgen-rajz .x-padlo, .t-rontgen-rajz .x-lapat path { fill: none; stroke: var(--c); stroke-linecap: round; stroke-linejoin: round; }
.t-rontgen-rajz .x-gep { stroke-width: 1.9; }
.t-rontgen-rajz .x-cso { stroke-width: 1.5; }
.t-rontgen-rajz .x-padlo { stroke-width: 1.3; }
.t-rontgen-rajz .x-lapat path { stroke-width: 1.6; }
.t-rontgen-rajz .x-meleg-viz { stroke-dasharray: 6 5; }
.t-rontgen-rajz .x-csat { fill: none; stroke: #C7D0E6; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.t-rontgen-rajz .x-cimke { font-family: var(--t-kezi); font-size: 44px; font-stretch: 75%; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; fill: var(--c); }
.t-rontgen-rajz .x-meret { fill: none; stroke: rgba(234, 242, 255, .52); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }
.t-rontgen-rajz .x-szintjel { fill: rgba(234, 242, 255, .62); stroke: none; }
.t-rontgen-rajz .x-kozep { fill: none; stroke: rgba(234, 242, 255, .38); stroke-width: .8; stroke-dasharray: 12 4 2 4; }
.t-rontgen-rajz .x-apro { font-family: var(--t-kezi); font-size: 30px; font-stretch: 75%; font-weight: 600; letter-spacing: .04em; fill: rgba(234, 242, 255, .8); }
.t-rontgen-rajz .x-helyiseg { font-family: var(--t-kezi); font-size: 30px; font-stretch: 75%; font-weight: 600; letter-spacing: .12em; fill: rgba(234, 242, 255, .5); }
.t-rontgen-rajz .x-cim { font-weight: 700; letter-spacing: .08em; fill: rgba(234, 242, 255, .9); }
.t-rontgen-rajz .x-kod { fill: var(--c); }
.t-rontgen-rajz .x-lapat { animation: t-forog 1.1s linear infinite; animation-play-state: paused; }
.t-rontgen-rajz .x-aram { fill: none; stroke: var(--c); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 8 9; animation: t-aram var(--ido, 1.3s) linear infinite; animation-play-state: paused; }
.t-rontgen-rajz .x-aram { --per: 17px; }
.t-rontgen-rajz .x-a-hideg { --ido: 1.2s; }
.t-rontgen-rajz .x-a-meleg { --ido: 1.6s; }
.t-rontgen-rajz .x-a-leg { --ido: 1s; }
.t-rontgen-rajz .x-a-viz { --ido: .9s; stroke: #FFFFFF; stroke-width: 1.2; stroke-dasharray: 3 14; }
.t-rontgen-rajz .x-a-csepp { --ido: .55s; stroke-dasharray: 6 11; }
.t-rontgen-rajz .x-a-csat { --ido: 1.3s; stroke: var(--t-tervrajz); stroke-width: 1.4; stroke-dasharray: 4 13; }
.t-rontgen-rajz .x-a-cso { --per: 18px; --ido: .7s; stroke: #fff; stroke-opacity: .85; stroke-width: 1.4; stroke-dasharray: 2 16; }
.t-rontgen-rajz .x-a-padlo { --ido: 1.15s; }
.js-rajz .t-rontgen.is-lathato :is(.x-aram, .x-lapat) { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
.t-rontgen-rajz :is(.x-aram, .x-lapat), .t-elo-lapat { animation: none !important; }
}
.t-rontgen-szkenner {
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
height: 0;
border-top: 2px solid var(--t-fenykek);
box-shadow: 0 0 12px 1px rgba(180, 190, 255, .75);
transform: translate3d(0, 0, 0);
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
}
.t-rontgen.is-szkennel .t-rontgen-szkenner { opacity: 1; }
.t-rontgen-szkenner span {
position: absolute;
left: .9rem;
bottom: .5rem;
padding: .1rem .45rem;
border: 1.5px solid var(--t-fenykek);
border-radius: 3px;
background: rgba(23, 35, 102, .88);
color: #EAF2FF;
font-size: .78rem;
font-weight: 700;
font-stretch: 75%;
letter-spacing: .04em;
font-variant-numeric: tabular-nums;
}
.t-nyit-vag, .t-nyit-vag-belso { position: absolute; inset: 0; }
.t-nyit-vag { overflow: hidden; }
.t-rontgen.is-szkennel .t-rontgen-reteg { clip-path: none; }
.js-rajz .t-rontgen.is-szkennel :is(.x-aram, .x-lapat) { animation-play-state: paused; }
.t-nyit-sav {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 140px;
overflow: hidden;
opacity: 0;
pointer-events: none;
transform: translate3d(0, -140px, 0);
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 50%);
mask-image: linear-gradient(to bottom, transparent, #000 50%);
}
.t-nyit-vazlat { position: absolute; top: 0; left: 0; width: 100%; height: auto; aspect-ratio: 2736 / 1829; }
.t-rontgen.is-szkennel .t-nyit-sav { opacity: 1; }
.t-rontgen-szkenner::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 72px; background: linear-gradient(to bottom, rgba(180, 190, 255, .3), rgba(180, 190, 255, 0)); }
@media (prefers-reduced-motion: no-preference) {
.js-rajz .t-rontgen:not(.nyitas-kesz) .t-rontgen-reteg { clip-path: none; }
.js-rajz .t-rontgen:not(.nyitas-kesz) :is(.t-lencse, .t-rontgen-gomb) { opacity: 0; pointer-events: none; }
.js-rajz .t-rontgen:not(.nyitas-kesz) .t-rontgen-rajz :is(.x-v, .x-satir, .x-gep, .x-cso, .x-padlo, .x-csat):not(.x-meleg-viz) { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.js-rajz .t-rontgen:not(.nyitas-kesz) .t-rontgen-rajz :is(.x-aram, .x-cimke, .x-lapat, .x-meleg-viz, .x-jel) { opacity: 0; }
.t-rontgen.is-huz .t-rontgen-rajz :is(.x-v, .x-satir, .x-gep, .x-cso, .x-padlo, .x-csat):not(.x-meleg-viz) { animation: t-huz .62s cubic-bezier(.45, .05, .25, 1) var(--d, 0s) forwards; }
.t-rontgen.is-huz .t-rontgen-rajz :is(.x-aram, .x-cimke, .x-lapat, .x-meleg-viz, .x-jel) { animation: t-megjelen .35s ease .55s forwards; animation-play-state: running; }
.t-rontgen-rajz .x-legtech { --d: .1s; }
.t-rontgen-rajz .x-futes { --d: .16s; }
.t-rontgen-rajz .x-hutes { --d: .22s; }
.t-rontgen-rajz .x-viz { --d: .28s; }
.js-rajz .t-rontgen.is-rajzolt:not(.nyitas-kesz) .t-rontgen-rajz :is(.x-v, .x-satir, .x-gep, .x-cso, .x-padlo, .x-csat):not(.x-meleg-viz) { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.js-rajz .t-rontgen.is-rajzolt:not(.nyitas-kesz) .t-rontgen-rajz :is(.x-aram, .x-cimke, .x-lapat, .x-meleg-viz, .x-jel) { opacity: 1; animation: none; }
}
.t-szolg { padding-block: var(--space); }
.t-szolg-fej { max-width: 46rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.t-szolg-fej h2 { margin-bottom: .6rem; }
.t-szolg-fej p { margin: 0; color: var(--t-tinta-2); }
.t-szolg-panel {
display: grid;
grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
grid-template-rows: auto 1fr;
grid-template-areas: "retegek lap" "also lap";
gap: 1.25rem clamp(2rem, 4vw, 3.5rem);
align-items: start;
}
.t-betu {
display: grid;
place-items: center;
flex: none;
width: 2.4rem;
height: 2.4rem;
border: 1.6px solid var(--t-kek);
border-radius: 50%;
color: var(--t-kek);
font-size: 1.15rem;
font-weight: 750;
transition: background-color .2s ease, color .2s ease;
}
.t-reteg-hutes, .t-m-hutes, .t-m-jel-hutes { --c: var(--cool); --c-tint: #EAF1FD; }
.t-reteg-futes, .t-m-futes, .t-m-jel-futes { --c: var(--warm); --c-tint: #FFF1E7; }
.t-reteg-epuletgepeszet, .t-m-epuletgepeszet, .t-m-jel-epuletgepeszet { --c: var(--navy); --c-tint: #ECEEF8; }
.t-retegek { grid-area: retegek; display: grid; gap: .6rem; }
.t-reteg {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: .85rem;
min-height: 4.1rem;
padding: .65rem .9rem .65rem .75rem;
border: 1.5px solid rgba(58, 63, 70, .35);
border-radius: 4px;
background: var(--t-papir);
color: var(--t-tinta);
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
-webkit-user-select: none;
user-select: none;
transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .16s var(--t-ease);
}
.t-reteg:hover { color: var(--t-tinta); }
.t-reteg:active { transform: scale(.985); }
.t-reteg:focus-visible { outline: 3px solid var(--t-kek); outline-offset: 3px; }
.t-reteg-szoveg { display: grid; gap: .1rem; min-width: 0; }
.t-reteg-nev { font-size: 1.15rem; font-stretch: 110%; font-weight: 700; line-height: 1.2; }
.t-reteg-al { font-size: .9rem; line-height: 1.35; color: var(--t-tinta-2); }
.t-kapcsolo { position: relative; flex: none; width: 2.75rem; height: 1.6rem; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(58, 63, 70, .55); transition: background-color .22s ease, box-shadow .22s ease; }
.t-kapcsolo::after {
content: "";
position: absolute;
top: .2rem;
left: .2rem;
width: 1.2rem;
height: 1.2rem;
border-radius: 50%;
background: var(--t-papir);
box-shadow: 0 0 0 1.5px rgba(58, 63, 70, .55), 0 2px 4px rgba(26, 33, 80, .15);
transition: transform .28s var(--t-ease), box-shadow .2s ease;
}
.t-reteg .t-betu { border-color: var(--c); color: var(--c); }
.t-reteg.is-on { border-color: var(--c); background: var(--c-tint); box-shadow: 4px 4px 0 color-mix(in srgb, var(--c) 14%, transparent); }
.t-reteg.is-on .t-betu { background: var(--c); color: var(--white); }
.t-reteg.is-on .t-kapcsolo { background: var(--c); box-shadow: none; }
.t-reteg.is-on .t-kapcsolo::after { transform: translateX(1.15rem); box-shadow: 0 2px 5px rgba(10, 20, 60, .3); }
@media (hover: hover) and (pointer: fine) { .t-reteg:hover, .t-reteg.is-elonezet { border-color: var(--c); } }
.t-mind {
justify-self: start;
margin-top: .15rem;
padding: .4rem 0;
border: 0;
background: none;
color: var(--t-kek);
font: inherit;
font-weight: 650;
text-decoration: underline;
text-decoration-color: rgba(38, 59, 170, .35);
text-underline-offset: .2em;
cursor: pointer;
touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) { .t-mind:hover { text-decoration-color: currentColor; } }
.t-szolg-fejlec { display: none; }
.t-szolg-fejlec { grid-area: fejlec; padding: 1.1rem 1.2rem 1.25rem; border: 1.5px solid var(--t-grafit); background: var(--t-papir); box-shadow: 4px 4px 0 rgba(58, 63, 70, .08); }
.t-szolg-fejlec h3 { margin: 0 0 .4rem; font-size: 1.25rem; font-stretch: 110%; font-weight: 720; line-height: 1.25; }
.t-szolg-fejlec p { margin: 0 0 1.15rem; color: var(--t-tinta-2); }
.t-lap {
grid-area: lap;
padding: clamp(.55rem, 1.2vw, .9rem);
background: var(--t-papir);
box-shadow: 0 0 0 1px rgba(58, 63, 70, .5), inset 0 0 0 5px var(--t-papir), inset 0 0 0 6.5px rgba(58, 63, 70, .45), 6px 6px 0 rgba(26, 33, 80, .05);
}
.t-metszet { --tk: 1.6s; display: block; width: 100%; height: auto; pointer-events: none; }
.t-metszet.is-kesz { --tk: 0s; }
.t-metszet .v { fill: none; stroke: var(--t-grafit); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.t-metszet .v-vastag { stroke-width: 3.4; }
.t-metszet .v-vekony { stroke-width: 1.4; opacity: .8; }
.t-metszet .v-halvany { stroke-width: 1.2; opacity: .35; }
.t-metszet .satir { fill: none; stroke: var(--t-grafit); stroke-width: 1.1; opacity: .42; }
.t-metszet .v-meret { fill: none; stroke: var(--t-kek); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.t-metszet .szam { font-family: var(--font); font-size: 20px; font-stretch: 82%; font-weight: 650; fill: var(--t-kek); }
.t-m-talalat { fill: transparent; stroke: none; pointer-events: all; cursor: pointer; }
.t-metszet .h { fill: none; stroke: var(--t-grafit); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .3; transition: opacity .18s ease, stroke .18s ease; }
.t-metszet .h.csat { stroke-width: 2.6; }
.t-metszet .i { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .28s cubic-bezier(.4, 0, 1, 1); }
.t-metszet .i.g { stroke: var(--t-grafit); stroke-width: 2.6; }
.t-metszet .i.gv { stroke: var(--t-grafit); stroke-width: 1.6; }
.t-metszet .i.cso { stroke: var(--c); stroke-width: 2.8; }
.t-metszet .i.viz { stroke: var(--c); stroke-width: 2.4; }
.t-metszet .i.csat { stroke: var(--t-grafit); stroke-width: 4.4; }
.t-metszet .i.kor { stroke: var(--c); stroke-width: 2; }
.t-m-test { fill: var(--c-tint); stroke: none; opacity: 0; transition: opacity .25s ease; }
.on-hutes .t-m-hutes .i, .on-futes .t-m-futes .i, .on-epuletgepeszet .t-m-epuletgepeszet .i {
stroke-dashoffset: 0;
transition: stroke-dashoffset .62s cubic-bezier(.45, .05, .25, 1) calc(var(--tk) + var(--k, 0) * 80ms);
}
.on-hutes .t-m-hutes .t-m-test, .on-futes .t-m-futes .t-m-test, .on-epuletgepeszet .t-m-epuletgepeszet .t-m-test { opacity: 1; transition: opacity .3s ease calc(var(--tk) + .2s); }
.t-m-lapat { animation: t-forog 1.1s linear infinite; animation-play-state: paused; }
.t-m-aram path { fill: none; stroke-linecap: round; opacity: 0; transition: opacity .2s ease; animation: t-aram var(--ido, 1.4s) linear infinite; animation-play-state: paused; }
.t-m-aram .a-hideg { --per: 19px; --ido: 1.25s; stroke: var(--c); stroke-width: 2; stroke-dasharray: 9 10; }
.t-m-aram .a-meleg { --per: 16px; --ido: 1.5s; stroke: var(--c); stroke-width: 1.8; stroke-dasharray: 7 9; }
.t-m-aram .a-viz { --per: 16px; --ido: .9s; stroke: var(--t-papir); stroke-width: 1.6; stroke-dasharray: 3 13; }
.t-m-aram .a-csepp { --per: 14px; --ido: .55s; stroke: var(--c); stroke-width: 1.6; stroke-dasharray: 5 9; }
.t-m-aram .a-csat { --per: 20px; --ido: 1.3s; stroke: var(--t-papir); stroke-width: 1.6; stroke-dasharray: 4 16; }
.on-hutes .t-m-hutes .t-m-aram path, .on-futes .t-m-futes .t-m-aram path, .on-epuletgepeszet .t-m-epuletgepeszet .t-m-aram path { opacity: 1; transition: opacity .4s ease calc(var(--tk) + .6s); }
.js-rajz .on-hutes .t-metszet.is-lathato .t-m-hutes :is(.t-m-lapat, .t-m-aram path),
.js-rajz .on-futes .t-metszet.is-lathato .t-m-futes :is(.t-m-lapat, .t-m-aram path),
.js-rajz .on-epuletgepeszet .t-metszet.is-lathato .t-m-epuletgepeszet .t-m-aram path { animation-play-state: running; }
@keyframes t-forog { to { transform: rotate(360deg); } }
@keyframes t-aram { to { stroke-dashoffset: calc(var(--per) * -2); } }
.t-m-jel circle { fill: var(--t-papir); stroke: var(--c); stroke-width: 2.2; transition: fill .2s ease; }
.t-m-jel text { font-family: var(--font); font-size: 26px; font-weight: 750; fill: var(--c); transition: fill .2s ease; }
.on-hutes .t-m-jel-hutes circle, .on-futes .t-m-jel-futes circle, .on-epuletgepeszet .t-m-jel-epuletgepeszet circle { fill: var(--c); }
.on-hutes .t-m-jel-hutes text, .on-futes .t-m-jel-futes text, .on-epuletgepeszet .t-m-jel-epuletgepeszet text { fill: var(--white); }
.t-metszet .t-m-ping { fill: none; opacity: 0; transform-box: fill-box; transform-origin: center; }
.js-rajz .t-metszet.is-rajzolva .t-m-ping { animation: t-ping 1.3s ease-out calc(var(--d, 0s) + .45s) 1; }
@keyframes t-ping { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
.elonezet-hutes .t-m-hutes .h, .elonezet-futes .t-m-futes .h, .elonezet-epuletgepeszet .t-m-epuletgepeszet .h { opacity: .55; stroke: var(--c); }
.t-m-vaszon { position: relative; }
.t-m-render { position: absolute; inset: 0; width: 100%; height: 100%; }
.t-m-vaszon .t-metszet { position: relative; }
.js-rajz .t-m-render {
-webkit-mask-image: url(../img/terv/tus-maszk.png), url(../img/terv/tus-maszk-2.png);
mask-image: url(../img/terv/tus-maszk.png), url(../img/terv/tus-maszk-2.png);
-webkit-mask-size: 100% 240%;
mask-size: 100% 240%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: 0 2.86%, 0 2.86%;
mask-position: 0 2.86%, 0 2.86%;
}
.js-rajz .t-m-vaszon.is-tus .t-m-render { -webkit-mask-position: 0 97.15%, 0 97.15%; mask-position: 0 97.15%, 0 97.15%; }
@keyframes t-tus {
0%   { -webkit-mask-position: 0 2.86%, 0 2.86%;   mask-position: 0 2.86%, 0 2.86%; }
12%  { -webkit-mask-position: 0 10.4%, 0 6.63%;   mask-position: 0 10.4%, 0 6.63%; }
28%  { -webkit-mask-position: 0 27.38%, 0 19.83%; mask-position: 0 27.38%, 0 19.83%; }
45%  { -webkit-mask-position: 0 47.18%, 0 42.46%; mask-position: 0 47.18%, 0 42.46%; }
62%  { -webkit-mask-position: 0 65.09%, 0 66.98%; mask-position: 0 65.09%, 0 66.98%; }
80%  { -webkit-mask-position: 0 83.01%, 0 85.84%; mask-position: 0 83.01%, 0 85.84%; }
100% { -webkit-mask-position: 0 97.15%, 0 97.15%; mask-position: 0 97.15%, 0 97.15%; }
}
@media (prefers-reduced-motion: no-preference) {
.js-rajz .t-m-vaszon.is-tus .t-m-render { animation: t-tus 3.2s linear both; }
}
.js-rajz .t-metszet:not(.is-rajzolva) .i { stroke-dashoffset: 1 !important; transition: none !important; }
.js-rajz .t-metszet:not(.is-rajzolva) :is(.t-m-test, .t-m-aram path) { opacity: 0 !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
.t-metszet .i, .t-m-test, .t-m-aram path, .t-reteg, .t-kapcsolo, .t-kapcsolo::after { transition: none !important; }
.t-m-lapat, .t-m-aram path, .t-metszet .t-m-ping { animation: none !important; }
}
.t-talalat-hivas { grid-column: 1 / -1; display: none; align-items: center; gap: .55rem; margin: .35rem 0 0; font-size: 1.08rem; font-weight: 680; line-height: 1.3; color: var(--t-kek); }
.t-talalat-hivas svg { flex: none; width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.t-talalat-hivas .t-csak-ujj { display: none; }
@media (hover: none), (pointer: coarse) { .t-talalat-hivas .t-csak-eger { display: none; } .t-talalat-hivas .t-csak-ujj { display: inline; } }
.js-rajz .t-szolg-panel:not(.on-hutes):not(.on-futes):not(.on-epuletgepeszet) .t-talalat-hivas { display: flex; }
.js-rajz .t-szolg-panel:not(.on-hutes):not(.on-futes):not(.on-epuletgepeszet) .t-szolg-also { display: none; }
@keyframes t-nyil { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes t-doboz-be { from { opacity: 0; transform: translateY(-10px); } }
@media (prefers-reduced-motion: no-preference) {
.t-talalat-hivas.is-lathato svg { animation: t-nyil 1.5s ease-in-out infinite; }
.t-szolg-also { animation: t-doboz-be .4s var(--t-ease); }
}
.t-szolg-also {
grid-area: also;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
align-items: start;
padding: 1.1rem 1.15rem 1.3rem;
border: 1.5px solid var(--t-grafit);
background: var(--t-papir);
box-shadow: 4px 4px 0 rgba(58, 63, 70, .08);
}
.t-talalat-cim { grid-column: 1 / -1; justify-self: start; margin: 0; padding: .15rem .35rem; border-radius: 3px; font-size: 1.25rem; font-stretch: 110%; font-weight: 740; line-height: 1.25; color: var(--t-tinta); }
.t-talalat-gomb { margin-top: 1.1rem; }
.t-szolg-also .row { grid-template-columns: minmax(0, 1fr) 1.25rem; grid-template-areas: "name go" "short go" "tags go"; }
.t-szolg-also .row-tags { justify-content: flex-start; margin-top: .35rem; }
@media (min-width: 961px) and (min-height: 640px) {
.t-lap { position: sticky; top: 5.75rem; }
}
.terv .rows { position: relative; border-top: 1.5px solid var(--t-grafit); }
.terv .row { border-bottom: 1px solid rgba(58, 63, 70, .22); border-radius: 0; }
@media (hover: hover) and (pointer: fine) { .terv .row:hover { background: var(--t-kek-halvany, #EEF4FF); } }
.terv .row-tags .tag { border-radius: 3px; }
.t-szolg .row-tags { display: grid; grid-template-columns: 4.4rem 4.4rem 7.9rem; gap: .3rem .35rem; justify-items: start; }
.t-szolg .tag-hutes { grid-column: 1; }
.t-szolg .tag-futes { grid-column: 2; }
.t-szolg .tag-epuletgepeszet { grid-column: 3; }
.t-szolg .tag { gap: .3rem; padding: .1rem .45rem .1rem .22rem; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 38%, transparent); color: var(--c); font-weight: 600; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.t-szolg .tag::before { display: grid; place-items: center; width: 1.1rem; height: 1.1rem; background: none; box-shadow: inset 0 0 0 1.2px currentColor; font-size: .66rem; font-weight: 800; line-height: 1; }
.t-szolg .tag-hutes::before { content: "A"; content: "A" / ""; }
.t-szolg .tag-futes::before { content: "B"; content: "B" / ""; }
.t-szolg .tag-epuletgepeszet::before { content: "C"; content: "C" / ""; }
.on-hutes .tag-hutes, .on-futes .tag-futes, .on-epuletgepeszet .tag-epuletgepeszet { background: var(--c-tint); box-shadow: inset 0 0 0 1.5px var(--c); }
.t-szolg-oldalak { margin: 1rem 0 0; font-size: .95rem; color: var(--t-tinta-2); }
.t-szolg-oldalak a { color: var(--t-kek); font-weight: 600; }
.t-szolg-fotok-cim { margin: 0 0 1.1rem; font-family: var(--t-kezi); font-size: .92rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; color: var(--t-tinta-2); }
.terv .thumbs { gap: 1.1rem; }
.terv .thumbs a { position: relative; overflow: visible; aspect-ratio: auto; border-radius: 0; padding: 5px 5px 7px; background: var(--white); box-shadow: 0 1px 2px rgba(26, 33, 80, .14), 0 8px 16px -12px rgba(26, 33, 80, .5); }
.terv .thumbs li:nth-child(odd) a { rotate: -1.4deg; }
.terv .thumbs li:nth-child(even) a { rotate: 1.2deg; }
.terv .thumbs img { aspect-ratio: 4 / 3; }
@media (min-width: 961px) {
.t-szolg-fotok .thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.2rem; }
.t-szolg-fotok .thumbs li:nth-child(1 of :not([hidden])) { grid-column: 1 / -1; }
.t-szolg-fotok .thumbs li:nth-child(1 of :not([hidden])) a { rotate: -.8deg; }
}
.t-szolg-fotok .thumbs a::before {
content: "";
position: absolute;
z-index: 1;
top: -.55rem;
left: 50%;
width: 3.4rem;
height: 1.1rem;
margin-left: -1.7rem;
background: var(--t-szalag, rgba(86, 146, 232, .55));
rotate: -3deg;
-webkit-mask-image: var(--t-szemcse);
mask-image: var(--t-szemcse);
-webkit-mask-size: 48px;
mask-size: 48px;
}
.t-kek {
background-color: var(--t-tervrajz);
box-shadow: inset 0 0 0 12px var(--t-tervrajz), inset 0 0 0 13px rgba(255, 255, 255, .3), inset 0 0 0 19px var(--t-tervrajz), inset 0 0 0 21px rgba(255, 255, 255, .45);
color: #EAF2FF;
}
@media (max-width: 760px) { .t-kek { box-shadow: none; } }
.t-kek h2, .t-kek h3 { color: var(--white); }
.t-kek .t-keret path { stroke: var(--white); }
.t-kek .t-gomb:focus-visible { outline-color: var(--white); }
.t-folyamat { padding-block: var(--space); }
.t-lepesek-keret { position: relative; margin-top: clamp(2rem, 4vw, 3rem); }
.t-lepesek { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin: 0; padding: 0; list-style: none; }
.t-lepes { position: relative; }
.t-lepes-jel {
display: grid;
place-items: center;
width: 76px;
height: 76px;
margin-bottom: 1.15rem;
border-radius: 50%;
background: var(--t-tervrajz);
box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .45);
transition: box-shadow .4s ease;
}
.t-lepes.is-kesz .t-lepes-jel { box-shadow: 0 0 0 2px var(--white), 0 0 0 9px rgba(255, 255, 255, .1); }
.t-lepes-ikon { width: 44px; height: 44px; fill: none; stroke: var(--white); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.t-lepes-szam { display: block; font-family: var(--t-kezi); font-size: 1.15rem; font-weight: 700; line-height: 1; color: var(--t-fenykek, #9DD7FF); }
.t-lepes h3 { margin: .25rem 0 .5rem; font-size: 1.28rem; font-stretch: 108%; font-weight: 720; line-height: 1.2; }
.t-lepes p { margin: 0; color: rgba(234, 242, 255, .84); }
.js-rajz .t-lepes-ikon path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.45, .05, .25, 1); }
.js-rajz .t-lepes.is-kesz .t-lepes-ikon path { stroke-dashoffset: 0; }
.js-rajz .t-lepes h3, .js-rajz .t-lepes p, .js-rajz .t-lepes-szam { opacity: .38; transition: opacity .45s ease; }
.js-rajz .t-lepes.is-kesz h3, .js-rajz .t-lepes.is-kesz p, .js-rajz .t-lepes.is-kesz .t-lepes-szam { opacity: 1; }
.t-cso { position: absolute; z-index: 0; left: var(--x1, 38px); width: calc(var(--x2, 0px) - var(--x1, 0px)); top: calc(var(--y1, 38px) - 6px); height: 12px; border-top: 1.5px solid rgba(255, 255, 255, .28); border-bottom: 1.5px solid rgba(255, 255, 255, .28); }
.t-cso-tolt { position: absolute; inset: -1.5px 0; border-top: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.t-csepp { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--t-fenykek, #9DD7FF); box-shadow: 0 0 0 5px rgba(180, 190, 255, .22); }
@media (prefers-reduced-motion: reduce) {
.js-rajz .t-lepes-ikon path { stroke-dashoffset: 0 !important; }
.js-rajz .t-lepes h3, .js-rajz .t-lepes p, .js-rajz .t-lepes-szam { opacity: 1 !important; }
.t-csepp { display: none; }
}
.terv .szalag-fej p { color: var(--t-tinta-2); }
.terv .szalag-szint-csik { height: 2px; background: rgba(58, 63, 70, .25); }
.terv .szalag-szint-csik span { background: var(--t-kek); }
.terv .szalag-szintek a.is-aktiv { color: var(--t-tinta); }
.terv .szalag-szo-nev { color: rgba(38, 97, 222, .07); -webkit-text-stroke: max(2px, .012em) rgba(58, 63, 70, .5); }
.terv .szalag-szo-leiras { color: var(--t-tinta-2); }
.terv .szalag-jelzes { font-weight: 680; color: var(--t-kek); }
.terv .szalag-sor::after {
border-top: 2px solid var(--t-grafit);
border-bottom: 2px solid var(--t-grafit);
border-radius: 0;
background: repeating-linear-gradient(90deg, rgba(58, 63, 70, .5) 0 1.5px, transparent 1.5px 1.4rem) 0 0 / 100% 45% no-repeat, var(--t-papir);
box-shadow: none;
}
.terv .szalag-sor::before,
.terv .szalag-terep::after,
.terv .szalag.is-ragado .szalag-terep::after {
background:
linear-gradient(var(--t-grafit), var(--t-grafit)) 0 0 / 100% 2px no-repeat,
repeating-linear-gradient(90deg, transparent 0 calc(22rem - 3px), var(--t-grafit) calc(22rem - 3px) 22rem) 0 2px / 100% 100% no-repeat;
opacity: .8;
}
.terv .szalag-sor::before {
background:
radial-gradient(circle closest-side, var(--t-grafit) 0 14%, var(--t-papir) 16% 80%, var(--t-grafit) 82% 90%, transparent 93%) 1.5rem 0 / 5.5rem var(--gorgo) repeat-x,
linear-gradient(var(--t-grafit), var(--t-grafit)) 0 var(--gorgo) / 100% 2px no-repeat,
repeating-linear-gradient(90deg, transparent 0 calc(22rem - 3px), var(--t-grafit) calc(22rem - 3px) 22rem) 0 calc(var(--gorgo) + 2px) / 100% 100% no-repeat;
}
.terv .szalag-gorgok span { background: var(--t-papir); box-shadow: inset 0 0 0 1.6px var(--t-grafit); }
.terv .szalag-gorgok span::before { background: linear-gradient(90deg, transparent 45%, var(--t-grafit) 45% 55%, transparent 55%); opacity: .7; }
.terv .szalag-gorgok span::after { background: var(--t-grafit); }
.terv .szalag-gep { border: 1.5px solid var(--t-grafit); border-radius: 4px; background: var(--t-papir); box-shadow: 4px 4px 0 rgba(58, 63, 70, .1); }
.terv .szalag-elem[data-szint="belepo"] .szalag-gep {
border-color: #8DB0A3;
background: radial-gradient(120% 70% at 100% 0%, rgba(255, 255, 255, .9), transparent 55%), linear-gradient(165deg, #FFFFFF 0%, #EEF5F1 48%, #D3E6DD 100%);
box-shadow: 4px 4px 0 rgba(47, 107, 92, .14);
}
.terv .szalag-elem[data-szint="kozep"] .szalag-gep {
border-color: rgba(38, 59, 170, .5);
background: radial-gradient(120% 70% at 100% 0%, rgba(255, 255, 255, .9), transparent 55%), linear-gradient(165deg, #FFFFFF 0%, #EEF1FC 48%, #D5DCF6 100%);
box-shadow: 4px 4px 0 rgba(38, 59, 170, .14);
}
.terv .szalag-elem[data-szint="premium"] .szalag-gep {
border: 1.5px solid #B8964F;
background: radial-gradient(120% 70% at 100% 0%, rgba(255, 253, 244, .95), transparent 55%), linear-gradient(165deg, #FFFEF9 0%, #F8EFDA 48%, #EAD5A4 100%);
box-shadow: 4px 4px 0 rgba(150, 112, 40, .2);
}
.terv .szalag-gep-rajz { border-radius: 2px 2px 0 0; background: transparent; border-bottom: 1px dashed rgba(58, 63, 70, .4); }
.terv .szalag-gep-rajz .gep-rajz rect { fill: var(--t-papir); stroke: var(--t-grafit); stroke-width: 3; }
.terv .szalag-gep-rajz .gep-rajz path { stroke: var(--t-grafit); opacity: .55; }
.terv .szalag-gep-rajz .gep-rajz ellipse { fill: var(--t-grafit); opacity: .07; }
.terv .szalag-gep-rajz .gep-rajz circle { fill: var(--t-kek); }
.terv .szalag-gep .tag { border-radius: 3px; background: transparent; box-shadow: inset 0 0 0 1px currentColor; color: var(--t-kek); }
.terv .szalag-gep-tovabb { color: var(--t-kek); }
.terv .szalag-gep-tovabb .icon { border-radius: 3px; background: transparent; box-shadow: inset 0 0 0 1.4px currentColor; }
.terv .tag.szint-belepo { color: #2F6B5C; background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.terv .tag.szint-kozep { color: var(--t-kek); background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.terv .tag.szint-premium { color: #5A4416; background: #F3EAD3; box-shadow: inset 0 0 0 1px #C2A66C; }
.terv .szalag-szintek [data-szalag-szint="belepo"] .szalag-szint-csik span { background: linear-gradient(90deg, #8DC2B0, #3F7F6E); }
.terv .szalag-szintek [data-szalag-szint="kozep"] .szalag-szint-csik span { background: linear-gradient(90deg, #7F92E6, var(--t-kek)); }
.terv .szalag-szintek [data-szalag-szint="premium"] .szalag-szint-csik span { background: linear-gradient(90deg, #DDB95F, #A97F2F); }
.terv [data-szalag-szo="belepo"] .szalag-szo-nev { color: rgba(63, 127, 110, .08); -webkit-text-stroke-color: rgba(47, 107, 92, .55); }
.terv [data-szalag-szo="kozep"] .szalag-szo-nev { color: rgba(38, 59, 170, .07); -webkit-text-stroke-color: rgba(38, 59, 170, .55); }
.terv [data-szalag-szo="premium"] .szalag-szo-nev { color: rgba(214, 172, 80, .16); -webkit-text-stroke-color: rgba(160, 120, 40, .8); }
.terv .tag.szint-alap { color: #2F6B5C; background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.terv .szalag-szintek [data-szalag-szint="alap"] .szalag-szint-csik span { background: linear-gradient(90deg, #8DC2B0, #3F7F6E); }
.terv [data-szalag-szo="alap"] .szalag-szo-nev { color: rgba(63, 127, 110, .08); -webkit-text-stroke-color: rgba(47, 107, 92, .55); }
@media (hover: hover) and (pointer: fine) {
.terv .szalag-gep:hover { border-color: var(--t-kek); box-shadow: 6px 10px 0 rgba(58, 63, 70, .1); }
.terv .szalag-gep:hover .szalag-gep-tovabb .icon { background: var(--t-kek); color: var(--white); box-shadow: none; }
}
.terv .szalag-elem.is-leemelve .szalag-gep { border-style: dashed; box-shadow: none; }
.terv .szalag-vege-kartya { border: 1.5px solid var(--t-grafit); border-radius: 4px; background: var(--t-kek-halvany, #EEF4FF); box-shadow: 4px 4px 0 rgba(58, 63, 70, .1); }
.terv .szalag-lapoz { border-color: var(--t-grafit); border-radius: 4px; background: var(--t-papir); box-shadow: 3px 3px 0 rgba(58, 63, 70, .14); color: var(--t-tinta); }
@media (hover: hover) and (pointer: fine) { .terv .szalag-lapoz:hover { border-color: var(--t-kek); color: var(--t-kek); } }
.terv .szalag-elem { --uveg-a: rgba(38, 170, 132, .85); --uveg-b: rgba(110, 214, 186, .8); --uveg-el: rgba(24, 112, 88, .32); --uveg-arnyek: rgba(30, 110, 90, .3); position: relative; isolation: isolate; }
.terv .szalag-elem[data-szint="kozep"] { --uveg-a: rgba(164, 82, 232, .8); --uveg-b: rgba(234, 108, 196, .66); --uveg-el: rgba(112, 48, 170, .3); --uveg-arnyek: rgba(112, 48, 170, .3); }
.terv .szalag-elem[data-szint="premium"] { --uveg-a: rgba(222, 178, 64, .82); --uveg-b: rgba(240, 214, 140, .78); --uveg-el: rgba(138, 104, 28, .34); --uveg-arnyek: rgba(138, 106, 36, .3); }
.terv .szalag-elem::before {
content: ""; position: absolute; z-index: -1; inset: 8% 3% 3%; border-radius: 24px; pointer-events: none;
background: radial-gradient(85% 55% at 12% 52%, var(--uveg-a), transparent 72%), radial-gradient(80% 55% at 92% 92%, var(--uveg-b), transparent 72%), radial-gradient(60% 40% at 85% 38%, var(--uveg-b), transparent 75%);
}
.terv .szalag-elem[data-szint] .szalag-gep {
--dol-x: 0deg; --dol-y: 0deg; --feny-x: 18%; --feny-y: 0%;
border: 1px solid rgba(255, 255, 255, .55); border-radius: 18px;
background: linear-gradient(140deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .14) 55%, rgba(255, 255, 255, .26));
-webkit-backdrop-filter: blur(16px) saturate(175%); backdrop-filter: blur(16px) saturate(175%);
transform: perspective(900px) rotateX(var(--dol-x)) rotateY(var(--dol-y));
box-shadow:
inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 1.5px 0 0 rgba(255, 255, 255, .55),
inset 0 -2.5px 0 var(--uveg-el), inset -1.5px 0 0 var(--uveg-el),
0 3px 0 -1px var(--uveg-el), 0 5px 0 -2px rgba(255, 255, 255, .45),
0 26px 40px -22px var(--uveg-arnyek), 0 10px 16px -12px rgba(20, 24, 50, .22);
}
.terv .szalag-elem[data-szint] .szalag-gep::before {
content: ""; position: absolute; z-index: 2; inset: -1px; padding: 1.5px; border-radius: inherit; pointer-events: none;
background: linear-gradient(135deg, rgba(255, 255, 255, .95), var(--uveg-a) 30%, rgba(255, 255, 255, .25) 55%, var(--uveg-b) 80%, rgba(255, 255, 255, .7));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
opacity: .8;
}
.terv .szalag-elem[data-szint] .szalag-gep::after {
content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; pointer-events: none;
background:
radial-gradient(40% 30% at var(--feny-x) var(--feny-y), rgba(255, 255, 255, .5), transparent 70%),
linear-gradient(118deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .1) 22%, transparent 23%, transparent 62%, rgba(255, 255, 255, .12) 63%, transparent 76%);
mix-blend-mode: soft-light;
}
.terv .szalag-elem[data-szint] .szalag-gep-rajz { margin: .5rem .5rem 0; border: 0; border-radius: 12px; box-shadow: inset 0 1px 3px rgba(20, 30, 60, .1), 0 1px 0 rgba(255, 255, 255, .8); }
.terv .szalag-elem[data-szint] .tag { background: rgba(255, 255, 255, .55); }
@media (hover: hover) and (pointer: fine) {
.terv .szalag-elem[data-szint] .szalag-gep:hover {
border-color: rgba(255, 255, 255, .8);
box-shadow:
inset 0 1.5px 0 rgba(255, 255, 255, 1), inset 1.5px 0 0 rgba(255, 255, 255, .6),
inset 0 -2.5px 0 var(--uveg-el), inset -1.5px 0 0 var(--uveg-el),
0 3px 0 -1px var(--uveg-el), 0 5px 0 -2px rgba(255, 255, 255, .45),
0 40px 50px -26px var(--uveg-arnyek), 0 16px 22px -14px rgba(20, 24, 50, .26);
}
}
@media (prefers-reduced-motion: no-preference) {
.terv .szalag-elem[data-szint] .szalag-gep { transition: translate .3s cubic-bezier(.23, 1, .32, 1), scale .12s ease-out, box-shadow .3s cubic-bezier(.23, 1, .32, 1), border-color .2s ease, transform .25s ease-out; }
.terv .szalag-elem[data-szint] .szalag-gep.is-dol { transition: translate .3s cubic-bezier(.23, 1, .32, 1), scale .12s ease-out, box-shadow .3s cubic-bezier(.23, 1, .32, 1), border-color .2s ease, transform .08s linear; }
}
.terv .szalag-elem.is-leemelve[data-szint] .szalag-gep { border: 1.5px dashed rgba(58, 63, 70, .35); background: rgba(255, 255, 255, .3); box-shadow: none; transform: none; }
.terv .szalag-elem.is-leemelve[data-szint] .szalag-gep::before, .terv .szalag-elem.is-leemelve[data-szint] .szalag-gep::after { display: none; }
.terv .szalag-elem.is-leemelve::before { opacity: .35; }
.terv .tag.szint-kozep { color: #7A3DB8; }
.terv .szalag-szintek [data-szalag-szint="kozep"] .szalag-szint-csik span { background: linear-gradient(90deg, #D49BEF, #8A4FD0); }
.terv [data-szalag-szo="kozep"] .szalag-szo-nev { color: rgba(138, 79, 208, .07); -webkit-text-stroke-color: rgba(122, 61, 184, .55); }
.terv .szalag-vege-kartya {
border: 1px solid rgba(255, 255, 255, .78); border-radius: 18px;
background: linear-gradient(140deg, rgba(255, 255, 255, .7), rgba(232, 238, 255, .4));
-webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 -2px 0 rgba(38, 59, 170, .14), 0 3px 0 -1px rgba(38, 59, 170, .2), 0 22px 36px -20px rgba(38, 59, 170, .26);
}
.terv .szr-panel { border-radius: 6px; background: var(--t-papir); box-shadow: 0 0 0 1.5px var(--t-grafit), 0 40px 90px -40px rgba(10, 14, 40, .75); }
.terv .szr-galeria { background: transparent; border-right: 1px solid rgba(58, 63, 70, .3); }
.terv .szr-meretlista li { border-radius: 3px; border-color: rgba(58, 63, 70, .3); }
.terv .ardoboz { border: 1.5px solid var(--t-grafit); border-radius: 4px; background: var(--white); box-shadow: 4px 4px 0 rgba(58, 63, 70, .08); }
.terv .ardoboz-valaszto { border-color: rgba(58, 63, 70, .55); border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .terv .ardoboz-valaszto:hover { border-color: var(--t-kek); } }
.terv .ardoboz-ar strong, .terv .ardoboz-ar.is-keres { color: var(--t-tinta); }
.terv .szr-bezar { border-radius: 4px; }
.terv .eszkoz-link { border: 1.5px solid var(--t-grafit); border-radius: 4px; background: var(--t-papir); box-shadow: 4px 4px 0 rgba(58, 63, 70, .08); }
.terv .eszkoz-link:focus-visible { border-radius: 4px; }
.terv .eszkoz-abra { background: transparent; border-bottom: 1px dashed rgba(58, 63, 70, .4); }
.terv .ea-racs { display: none; }
.terv .ea-fal { stroke: var(--t-grafit); }
.terv .ea-gep { fill: var(--t-papir); stroke: var(--t-grafit); }
.terv .eszkoz-uj { border-radius: 3px; background: var(--t-narancs); color: var(--t-tinta); }
.terv .eszkoz-kiemeles { border-radius: 3px; }
.terv .eszkoz-gomb { color: var(--t-kek); }
@media (hover: hover) and (pointer: fine) {
.terv .eszkoz-link:hover { border-color: var(--t-kek); box-shadow: 6px 10px 0 rgba(58, 63, 70, .1); transform: translateY(-2px); }
}
.t-ragasztott {
position: relative;
display: block;
padding: 9px 9px 11px;
background: var(--white);
box-shadow: 0 1px 2px rgba(26, 33, 80, .16), 0 14px 26px -18px rgba(26, 33, 80, .5);
color: var(--white);
rotate: var(--r, 0deg);
transition: rotate .35s var(--t-ease), translate .35s var(--t-ease), box-shadow .35s var(--t-ease);
}
.t-ragasztott img { display: block; width: 100%; height: auto; }
.t-ragasztott::before,
.t-ragasztott::after {
content: "";
position: absolute;
top: -.75rem;
width: 5.4rem;
height: 1.55rem;
background: var(--t-szalag, rgba(86, 146, 232, .55));
-webkit-mask-image: var(--t-szemcse);
mask-image: var(--t-szemcse);
-webkit-mask-size: 48px;
mask-size: 48px;
}
.t-ragasztott::before { left: -1.3rem; rotate: -36deg; }
.t-ragasztott::after { right: -1.3rem; rotate: 34deg; }
.t-tabla .t-ragasztott::before,
.t-ragasztott-kicsi::before { left: 50%; margin-left: -2.6rem; rotate: -4deg; }
.t-tabla-elem:nth-child(even) .t-ragasztott::before { rotate: 3deg; }
.t-ragasztott-kicsi::before { margin-left: -2.2rem; width: 4.4rem; }
.t-tabla .t-ragasztott::after,
.t-ragasztott-kicsi::after { display: none; }
.t-ragasztott::before { transform-origin: 0 50%; }
.t-ragasztott::after { transform-origin: 100% 50%; }
.js-rajz [data-tuz]:not(.is-tuzve) .t-ragasztott,
.js-rajz [data-tuz]:not(.is-tuzve) .t-cetli { opacity: 0; translate: 0 -14px; scale: 1.04; rotate: calc(var(--r, 0deg) + 3deg); }
.js-rajz [data-tuz]:not(.is-tuzve) .t-ragasztott::before,
.js-rajz [data-tuz]:not(.is-tuzve) .t-ragasztott::after { scale: 0 1; }
.js-rajz [data-tuz].is-tuzve:not(.is-tuzve-kesz) .t-ragasztott,
.js-rajz [data-tuz].is-tuzve:not(.is-tuzve-kesz) .t-cetli {
transition: opacity .3s ease var(--dl, 0s), translate .65s var(--t-ease) var(--dl, 0s), scale .65s var(--t-ease) var(--dl, 0s), rotate .65s var(--t-ease) var(--dl, 0s);
}
.js-rajz [data-tuz].is-tuzve:not(.is-tuzve-kesz) .t-ragasztott::before,
.js-rajz [data-tuz].is-tuzve:not(.is-tuzve-kesz) .t-ragasztott::after { transition: scale .24s cubic-bezier(.3, .7, .4, 1) calc(var(--dl, 0s) + .45s); }
.js-rajz .t-markak [data-tuz]:not(.is-tuzve) .t-logo { opacity: 0; scale: 1.15; }
.js-rajz .t-markak [data-tuz].is-tuzve:not(.is-tuzve-kesz) .t-logo { transition: opacity .12s linear var(--dl, 0s), scale .26s cubic-bezier(.2, .9, .35, 1) var(--dl, 0s); }
@media (prefers-reduced-motion: reduce) {
.js-rajz [data-tuz]:not(.is-tuzve) .t-ragasztott,
.js-rajz [data-tuz]:not(.is-tuzve) .t-cetli { opacity: 1; translate: none; scale: none; rotate: var(--r, 0deg); }
.js-rajz [data-tuz]:not(.is-tuzve) .t-ragasztott::before,
.js-rajz [data-tuz]:not(.is-tuzve) .t-ragasztott::after,
.js-rajz .t-markak [data-tuz]:not(.is-tuzve) .t-logo { opacity: 1; scale: none; }
}
.t-rolunk, .t-munkak { overflow-x: clip; }
.t-rolunk { padding-block: var(--space); }
.t-rolunk-racs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(2rem, 6vw, 5.5rem); }
.t-ragasztott-nagy { width: min(100%, 26rem); max-width: 26rem; justify-self: center; }
.t-rolunk-szoveg p { font-size: 1.08rem; color: var(--t-tinta-2); }
.t-fejlec-tabla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1.75rem 0 0; border: 1.5px solid var(--t-grafit); }
.t-fejlec-tabla > div { padding: .9rem 1.1rem 1rem; }
.t-fejlec-tabla > div + div { border-left: 1px solid rgba(58, 63, 70, .45); }
.t-fejlec-tabla dt { font-size: clamp(1.9rem, 3vw, 2.5rem); font-stretch: 115%; font-weight: 760; line-height: 1.05; color: var(--t-tinta); }
.t-fejlec-tabla dd { margin: .3rem 0 0; font-size: .95rem; line-height: 1.4; color: var(--t-tinta-2); }
.t-munkak { padding-block: var(--space); }
.t-tabla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.5rem, 4.5vw, 3.75rem) clamp(1.75rem, 3.2vw, 3rem); margin: 0; padding: 0; list-style: none; }
.t-tabla-elem .t-ragasztott { cursor: zoom-in; }
.t-tabla-elem .t-ragasztott img { aspect-ratio: 4 / 3; object-fit: cover; }
.t-fotoszam { position: absolute; right: 17px; bottom: 19px; display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .55rem; border-radius: 3px; background: rgba(26, 33, 80, .78); color: var(--white); font-size: .82rem; font-weight: 650; }
.t-fotoszam .icon { width: 1rem; height: 1rem; }
.t-felirat { margin: 1.05rem 0 .25rem; font-family: var(--t-kezi); font-size: 1.12rem; font-weight: 700; line-height: 1.2; color: var(--t-tinta); }
.t-felirat-mit { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--t-tinta-2); }
@media (hover: hover) and (pointer: fine) {
.t-tabla-elem .t-ragasztott:hover { rotate: 0deg; translate: 0 -5px; box-shadow: 0 2px 4px rgba(26, 33, 80, .18), 0 26px 40px -22px rgba(26, 33, 80, .55); }
}
.t-ragasztott:focus-visible { outline: 3px solid var(--t-kek); outline-offset: 4px; }
.t-cetli-elem { align-self: center; }
.t-cetli { padding: 1.5rem 1.5rem 1.6rem; background: #E6F0FF; box-shadow: 0 1px 2px rgba(26, 33, 80, .14), 0 14px 26px -18px rgba(26, 33, 80, .5); rotate: var(--r, 0deg); }
.t-cetli h3 { margin-bottom: .5rem; font-family: var(--t-kezi); font-size: 1.35rem; font-weight: 720; line-height: 1.15; color: var(--t-tinta); }
.t-cetli p { color: var(--t-tinta-2); }
.t-cetli-tel { display: block; margin-bottom: .4rem; font-size: 1.5rem; font-stretch: 112%; font-weight: 700; color: var(--t-tinta); text-decoration: none; }
.t-cetli .t-gomb { margin-top: .9rem; }
.t-tabla-elem .t-album-kartya { cursor: pointer; text-decoration: none; }
.t-album-kartya-szoveg {
position: absolute;
inset: 9px 9px 11px;
display: grid;
place-content: center;
gap: .45rem;
padding: .75rem;
background: color-mix(in srgb, var(--t-tinta) 76%, transparent);
color: var(--white);
text-align: center;
transition: background-color .25s ease;
}
.t-album-kartya-szoveg strong { font-size: clamp(1.3rem, 2.2vw, 1.65rem); font-stretch: 112%; font-weight: 720; line-height: 1.15; }
.t-album-kartya-szoveg span { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; font-size: .95rem; font-weight: 600; line-height: 1.3; }
.t-album-kartya-szoveg .icon { flex: none; width: 1rem; height: 1rem; }
@media (hover: hover) and (pointer: fine) {
.t-album-kartya:hover .t-album-kartya-szoveg { background: color-mix(in srgb, var(--t-tinta) 86%, transparent); }
}
.t-album { overflow-x: clip; padding-block: clamp(2.5rem, 5vw, 4rem) var(--space); }
.t-album-cim { margin: 0 0 1.75rem; font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-stretch: 112%; font-weight: 720; }
.t-album-cim:not(:first-child) { margin-top: clamp(3.5rem, 6vw, 5rem); }
.t-album-munkak { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
.t-album-munka { display: grid; gap: .8rem; min-width: 0; }
.t-album-munka.is-szeles { grid-column: 1 / -1; }
.t-album-fo, .t-album-kicsik a {
position: relative;
display: block;
padding: 9px;
background: var(--white);
box-shadow: 0 1px 2px rgba(26, 33, 80, .16), 0 14px 26px -18px rgba(26, 33, 80, .5);
cursor: zoom-in;
transition: translate .35s var(--t-ease), box-shadow .35s var(--t-ease);
}
.t-album-fo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.t-album-munka.is-szeles .t-album-fo img { aspect-ratio: 2 / 1; }
.t-album-kicsik { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.t-album-kicsik a { width: 6.5rem; padding: 5px; }
.t-album-kicsik img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.t-album-fejlec { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem 1.25rem; padding: .85rem 1.1rem .95rem; border: 1.5px solid var(--t-grafit); background: var(--t-papir); }
.t-album-fejlec h3 { margin: 0 0 .25rem; font-family: var(--t-kezi); font-size: 1.15rem; font-stretch: 75%; font-weight: 700; letter-spacing: .015em; line-height: 1.2; color: var(--t-tinta); }
.t-album-fejlec p { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--t-tinta-2); }
.t-album-cimkek { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.t-album-cimkek .t-pecset { padding: .2rem .55rem; font-size: .78rem; }
.t-album-tabla { columns: 3; column-gap: clamp(1.5rem, 3vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
.t-album-tabla li { break-inside: avoid; padding: .9rem 0 clamp(1.25rem, 2.5vw, 2rem); }
.t-album-tabla .t-ragasztott { cursor: zoom-in; }
.t-album-veg { display: flex; justify-content: center; margin-top: clamp(2.5rem, 5vw, 4rem); }
.t-album-veg .t-cetli { max-width: 26rem; }
@media (hover: hover) and (pointer: fine) {
.t-album-fo:hover, .t-album-kicsik a:hover { translate: 0 -4px; box-shadow: 0 2px 4px rgba(26, 33, 80, .18), 0 26px 40px -22px rgba(26, 33, 80, .55); }
.t-album-tabla .t-ragasztott:hover { rotate: 0deg; translate: 0 -5px; box-shadow: 0 2px 4px rgba(26, 33, 80, .18), 0 26px 40px -22px rgba(26, 33, 80, .55); }
}
.t-album-fo:focus-visible, .t-album-kicsik a:focus-visible { outline: 3px solid var(--t-kek); outline-offset: 4px; }
.t-markak { margin-top: clamp(3rem, 6vw, 4.5rem); }
.t-markak-cim { margin-bottom: 1rem; font-weight: 700; color: var(--t-tinta); }
.t-logok { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.7rem 1.2rem; margin: 0; padding: 0; list-style: none; }
.t-logo { grid-column: span 2; rotate: var(--r, 0deg); }
.t-logo-kinalat { grid-column: span 3; }
.t-logo-lap {
position: relative;
display: grid;
place-items: center;
height: 4.75rem;
padding: .6rem 1rem;
border: 1px solid rgba(26, 33, 80, .14);
border-radius: 3px;
background: #fff;
box-shadow: 0 1px 2px rgba(26, 33, 80, .12), 0 10px 18px -14px rgba(26, 33, 80, .5);
color: var(--t-tinta);
font-weight: 750;
text-decoration: none;
}
.t-logo-kinalat .t-logo-lap { height: 5.75rem; border-color: rgba(38, 59, 170, .35); }
.t-logo-lap img { display: block; width: auto; max-width: 100%; height: var(--lh, 28px); object-fit: contain; }
a.t-logo-lap { transition: translate .2s ease, box-shadow .2s ease, scale .15s ease; }
a.t-logo-lap:active { scale: .98; }
a.t-logo-lap:focus-visible { outline: 3px solid var(--t-kek); outline-offset: 10px; }
.js-rajz .t-logok.is-tuzve-kesz .t-logo-kinalat,
html:not(.js-rajz) .t-logo-kinalat { animation: t-logo-hullam 5s cubic-bezier(.3, .7, .4, 1) calc(var(--i, 0) * .16s + .4s) infinite; }
@keyframes t-logo-hullam {
0%, 24%, 100% { translate: 0 0; }
8% { translate: 0 -8px; }
16% { translate: 0 1.5px; }
}
.t-logo-pecset {
--r: -6deg;
position: absolute;
right: -.6rem;
bottom: -.85rem;
padding: .14rem .45rem;
background: #fff;
font-size: .72rem;
line-height: 1.2;
white-space: nowrap;
transition: background-color .2s ease, color .2s ease;
}
.js-rajz .t-logok:not(.is-tuzve) .t-logo-pecset { opacity: 0; scale: 1.6; }
.js-rajz .t-logok.is-tuzve:not(.is-tuzve-kesz) .t-logo-pecset {
transition: opacity .12s linear calc(var(--dl, 0s) + 1.05s), scale .28s cubic-bezier(.2, .9, .35, 1) calc(var(--dl, 0s) + 1.05s), background-color .2s ease, color .2s ease;
}
a.t-logo-lap:focus-visible .t-logo-pecset { background: var(--t-kek); color: var(--white); }
@media (hover: hover) and (pointer: fine) {
a.t-logo-lap:hover { translate: 0 -3px; box-shadow: 0 2px 4px rgba(26, 33, 80, .16), 0 16px 26px -16px rgba(26, 33, 80, .55); }
a.t-logo-lap:hover .t-logo-pecset { background: var(--t-kek); color: var(--white); }
}
@media (prefers-reduced-motion: reduce) {
.js-rajz .t-logok:not(.is-tuzve) .t-logo-pecset { opacity: 1; scale: none; }
.t-logok .t-logo-kinalat { animation: none !important; }
}
.t-pecset {
padding: .3rem .75rem;
border: 2px solid rgba(38, 59, 170, .75);
border-radius: 3px;
color: rgba(38, 59, 170, .9);
font-size: .9rem;
font-stretch: 82%;
font-weight: 750;
letter-spacing: .07em;
text-transform: uppercase;
rotate: var(--r, 0deg);
-webkit-mask-image: var(--t-szemcse);
mask-image: var(--t-szemcse);
-webkit-mask-size: 64px;
mask-size: 64px;
}
.t-markak-megj { margin: 1rem 0 0; font-family: var(--t-kezi); font-size: 1rem; font-weight: 550; color: var(--t-tinta-2); }
.terv .area-text p { color: var(--t-tinta-2); }
.terv .towns li { border-radius: 3px; border-color: rgba(58, 63, 70, .4); background: var(--t-papir); }
.terv .towns .is-home { border-color: var(--t-tinta); background: var(--t-tinta); }
.terv .towns .has-munka { background: none; }
.terv .towns .has-munka a { border-radius: 3px; }
.terv .area-map { border-radius: 4px; background: var(--t-papir); box-shadow: 0 0 0 1.5px var(--t-grafit), 6px 6px 0 rgba(58, 63, 70, .07); }
.terv .map-river { stroke: #A9CDF2; }
.terv .map-city { fill: var(--t-papir); stroke: var(--t-grafit); }
.terv .map-dot { fill: var(--t-grafit); stroke: var(--t-papir); }
.terv .map-home circle { fill: var(--t-tinta); }
.terv .map-label { fill: var(--t-tinta); stroke: var(--t-papir); }
.terv .map-card { border-radius: 4px; }
.terv .map-card-foto { border-radius: 2px; }
.terv .map-wrap.is-varakozik .map-river { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.terv .map-wrap.is-latszik .map-river { animation: t-huz 1.4s cubic-bezier(.45, .05, .25, 1) forwards; }
.terv .map-wrap.is-latszik .map-river + .map-river { animation-delay: .35s; }
.terv .map-wrap.is-latszik .map-pin-jel { animation-delay: calc(var(--i, 0) * 110ms + 1000ms); }
.terv .map-wrap.is-latszik .map-pin-jel::after { animation-delay: calc(var(--i, 0) * 110ms + 1500ms); }
.terv .t-ajanlat .quote-intro p { color: rgba(234, 242, 255, .86); }
.terv .t-ajanlat .field input,
.terv .t-ajanlat .field select,
.terv .t-ajanlat .field textarea { border-radius: 3px; border: 1.5px solid rgba(255, 255, 255, .0); }
.terv .t-ajanlat .field input:focus-visible,
.terv .t-ajanlat .field select:focus-visible,
.terv .t-ajanlat .field textarea:focus-visible { outline: 3px solid var(--t-narancs); outline-offset: 1px; }
.terv .t-ajanlat .field select { min-height: 3.33rem; line-height: 1.6; }
.terv .t-ajanlat :is(a, .check input):focus-visible { outline: 3px solid var(--t-narancs); outline-offset: 3px; }
.terv .t-ajanlat .field [aria-invalid="true"] { border-color: var(--t-narancs); }
.terv .t-ajanlat .pill-face { border-radius: 3px; }
.terv .t-ajanlat .t-gomb { justify-self: start; }
.terv .t-ajanlat .check input { accent-color: var(--t-narancs); }
.t-pipa { display: block; width: 4rem; height: 4rem; margin-bottom: .75rem; }
.t-pipa path { fill: none; stroke: var(--white); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.terv .site-footer { background: transparent; color: var(--t-tinta-2); }
.terv .lablec { gap: 0; border: 1.5px solid var(--t-grafit); background: var(--t-papir); }
.terv .lablec > * { padding: 1rem 1.25rem; }
.terv .lablec > * + * { border-left: 1px solid rgba(58, 63, 70, .4); }
.terv .lablec-also { border-top: 0; padding-top: 0; }
@media (max-width: 960px) {
.terv .lablec-oldalak { border-left: 0 !important; border-top: 1px solid rgba(58, 63, 70, .4); }
}
@media (max-width: 600px) {
.terv .lablec > * { padding: .75rem .9rem; }
.terv .lablec > * + * { border-left: 0; border-top: 1px solid rgba(58, 63, 70, .4); }
.terv .site-footer { padding-block: 1.25rem .6rem; }
}
.terv .mobile-bar { background: rgba(250, 246, 238, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top-color: rgba(58, 63, 70, .3); }
.terv .mobile-bar .btn { border-radius: 4px; }
.terv .mobile-bar .btn-primary { background: var(--t-narancs); color: var(--t-tinta); }
@media (pointer: coarse) and (max-width: 760px) {
.terv .mobile-bar { transition: translate .2s var(--t-ease), visibility 0s linear 0s; }
.terv:has(:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"]), textarea, select):focus) .mobile-bar {
translate: 0 110%;
visibility: hidden;
transition: translate .2s var(--t-ease), visibility 0s linear .2s;
}
}
@media (min-width: 1600px) {
html.terv { --wrap: 1400px; }
.t-hos-rontgen {
--hos-w: min(100% - 2 * var(--gutter), var(--wrap));
--hos-res: clamp(3rem, 4vw, 5.5rem);
--hos-kep: min(calc((100svh - 12rem) * 2406 / 1590), calc(var(--hos-w) - 32rem - var(--hos-res)));
grid-template-columns: minmax(0, 1fr) calc(var(--hos-w) - var(--hos-kep) - var(--hos-res)) var(--hos-res) var(--hos-kep) minmax(0, 1fr);
grid-template-areas: ". szoveg . kep .";
}
.t-hos-rontgen h1 { font-size: clamp(2.85rem, 2.5vw, 4rem); }
.t-hos-rontgen .t-hos-lead { font-size: 1.18rem; }
.t-rontgen .t-hos-keret { border-radius: 6px; }
}
@media (min-width: 2100px) {
html.terv { font-size: 112.5%; }
}
@media (max-width: 1099px) {
.t-hos-rontgen { display: flex; flex-direction: column; }
.t-hos-rontgen .t-hos-szoveg { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.t-hos-rontgen .t-hos-kep { width: min(100% - 2 * var(--gutter), 62rem); margin: clamp(1.25rem, 2.6vw, 2rem) auto 0; }
.t-rontgen .t-hos-keret { border-radius: 6px; }
}
@media (max-width: 960px) {
.t-hos-jobb { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lead" "gombok" "uj"; }
.t-gombok { justify-content: flex-start; }
.t-uj { justify-self: start; }
.t-szolg-panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "lap" "retegek" "also"; gap: 1.25rem; }
.t-retegek { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.t-mind { grid-column: 1 / -1; }
.t-tabla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.t-rolunk-racs { grid-template-columns: minmax(0, 1fr); }
.t-lepesek { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; max-width: 40rem; }
.t-lepes { min-height: 76px; padding-left: 100px; }
.t-lepes-jel { position: absolute; top: 0; left: 0; margin: 0; }
.t-cso { left: calc(var(--x1, 38px) - 6px); width: 12px; top: var(--y1, 38px); height: calc(var(--y2, 0px) - var(--y1, 0px)); border: 0; border-left: 1.5px solid rgba(255, 255, 255, .28); border-right: 1.5px solid rgba(255, 255, 255, .28); }
.t-cso-tolt { inset: 0 -1.5px; border: 0; border-left: 2px solid var(--white); border-right: 2px solid var(--white); transform: scaleY(var(--p, 0)); transform-origin: 50% 0; }
.t-csepp { top: calc(var(--p, 0) * 100%); left: 50%; }
}
@media (max-width: 760px) {
.t-hos { display: flex; flex-direction: column; }
.t-hos-szoveg { display: contents; }
.t-szlogen, .t-hos h1, .t-hos-jobb { width: calc(100% - 2 * var(--gutter)); margin-inline: auto; }
.t-szlogen { order: 1; }
.t-hos h1 { order: 2; font-size: clamp(1.75rem, 8.4vw, 2.3rem); }
.t-hos-kep { order: 3; margin-top: 1.1rem; }
.t-hos-jobb { order: 4; margin-top: 1.4rem; }
.t-hos-megj { order: 5; }
.t-hos-rontgen .t-hos-kep { width: 100%; margin-top: 1.1rem; }
.t-rontgen .t-hos-keret { --x0: 520; --y0: 50; --cw: 2216; --ch: 1520; aspect-ratio: 2216 / 1520; border-radius: 0; }
.t-hos-rontgen .t-hos-szoveg > .t-hos-megj { width: calc(100% - 2 * var(--gutter)); margin: 1.2rem auto 0; }
.t-hos .t-gombok { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.t-hos .t-gomb, .t-talalat-gomb .t-gomb, .t-cetli .t-gomb { width: 100%; }
.t-rontgen-szkenner::after { height: 40px; }
.t-rontgen-szkenner span { left: .6rem; font-size: .72rem; }
.t-rontgen-rajz .x-cimke { font-size: 86px; }
.t-rontgen-rajz :is(.x-apro, .x-helyiseg) { font-size: 50px; }
.t-rontgen-rajz .x-csak-gep { display: none; }
.t-rontgen-gomb { right: .6rem; bottom: .6rem; min-height: 2.5rem; padding: .35rem .7rem; font-size: .84rem; }
.t-lepes { padding-left: 92px; }
.t-szolg-also { gap: .9rem; padding: .9rem .85rem 1.1rem; }
.t-talalat-cim { font-size: 1.12rem; }
.t-retegek { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.t-reteg { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: .35rem; min-height: 0; padding: .6rem .3rem .7rem; text-align: center; }
.t-reteg .t-betu { width: 2.1rem; height: 2.1rem; font-size: 1rem; }
.t-reteg-nev { font-size: .95rem; font-stretch: 100%; }
.t-reteg-al, .t-kapcsolo { display: none; }
.t-lap { margin-inline: calc(var(--gutter) * -.4); padding: .45rem; }
.t-metszet .v { stroke-width: 3.6; }
.t-metszet .v-vastag { stroke-width: 5.2; }
.t-metszet .v-vekony { stroke-width: 2.4; }
.t-metszet .satir { stroke-width: 1.8; }
.t-metszet .v-meret { stroke-width: 3; }
.t-metszet .szam { display: none; }
.t-metszet .h { stroke-width: 2.4; }
.t-metszet .h.csat { stroke-width: 4; }
.t-metszet .i.g { stroke-width: 4; }
.t-metszet .i.gv { stroke-width: 2.6; }
.t-metszet .i.cso { stroke-width: 4.4; }
.t-metszet .i.viz { stroke-width: 3.8; }
.t-metszet .i.csat { stroke-width: 6.4; }
.t-metszet .i.kor { stroke-width: 3; }
.t-m-aram .a-hideg, .t-m-aram .a-meleg { stroke-width: 3; }
.t-m-aram .a-viz, .t-m-aram .a-csat { stroke-width: 2.4; }
.t-m-aram .a-csepp { stroke-width: 2.6; }
.t-m-jel { transform-box: fill-box; transform-origin: center; scale: 1.45; }
.t-szolg .thumbs { gap: .8rem; }
.t-tabla { grid-template-columns: minmax(0, 1fr); }
.t-logok { gap: 1.6rem 1.1rem; }
.t-logo { grid-column: span 4; }
.t-logo-kinalat { grid-column: span 6; }
.t-logo-lap { height: 3.9rem; padding: .45rem .55rem; }
.t-logo-kinalat .t-logo-lap { height: 4.9rem; }
.t-logo-lap img { height: calc(var(--lh, 28px) * .82); }
.t-album-munkak { grid-template-columns: minmax(0, 1fr); }
.t-album-munka.is-szeles .t-album-fo img { aspect-ratio: 4 / 3; }
.t-album-fejlec { flex-direction: column; }
.t-album-cimkek { justify-content: flex-start; }
.t-album-tabla { columns: 2; column-gap: 1.1rem; }
.t-album-kicsik a { width: 5.5rem; }
.t-fejlec-tabla { grid-template-columns: minmax(0, 1fr); }
.t-fejlec-tabla > div + div { border-left: 0; border-top: 1px solid rgba(58, 63, 70, .45); }
}
@media (prefers-reduced-motion: reduce) {
.t-ragasztott { transition: none; }
}
.terv .btn { font-stretch: 106%; font-weight: 700; transition: transform .18s var(--t-ease), background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.terv .btn:active { transform: scale(.96); }
.terv .btn-primary, .terv .btn-primary:hover { background: var(--t-narancs); color: var(--t-tinta); }
.terv .btn-primary:active { background: #DE5C10; }
.terv .btn-ghost, .terv .btn-ghost:hover { border-color: transparent; background: transparent; box-shadow: inset 0 0 0 2px var(--t-tinta); color: var(--t-tinta); }
.terv .btn-ghost:active { background: rgba(26, 33, 80, .06); }
.terv .btn-light, .terv .btn-light:hover { background: var(--t-papir); color: var(--t-tinta); }
.terv .btn-outline-light, .terv .btn-outline-light:hover { border-color: transparent; background: transparent; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); color: var(--white); }
.terv .btn-outline-light:active { background: rgba(255, 255, 255, .1); }
@media (hover: hover) and (pointer: fine) {
.terv .btn-primary:hover { background: #F57A31; }
.terv .btn-ghost:hover { background: var(--t-tinta); color: var(--white); }
.terv .btn-light:hover { background: var(--white); }
.terv .btn-outline-light:hover { background: rgba(255, 255, 255, .1); }
}
.terv .btn:focus-visible { outline: 3px solid var(--t-kek); outline-offset: 4px; }
.terv .page-hero { background: transparent; border-bottom: 1px solid rgba(58, 63, 70, .3); }
.terv .page-hero h1 { font-weight: 740; letter-spacing: -.015em; color: var(--t-cim); }
.terv .page-hero .lead, .terv .crumbs, .terv .page-tags { color: var(--t-tinta-2); }
.terv .crumbs a { color: var(--t-tinta-2); text-decoration-color: rgba(26, 33, 80, .3); }
.terv .page-hero-photo { position: relative; padding: 6px 6px 8px; background: var(--white); box-shadow: 0 1px 2px rgba(26, 33, 80, .14), 0 14px 26px -18px rgba(26, 33, 80, .55); rotate: -.8deg; }
.terv .page-hero-photo img { border-radius: 0; }
.terv .page-hero-photo::before {
content: "";
position: absolute;
z-index: 1;
top: -.6rem;
left: 50%;
width: 4.2rem;
height: 1.2rem;
margin-left: -2.1rem;
background: var(--t-szalag, rgba(86, 146, 232, .55));
rotate: -3deg;
-webkit-mask-image: var(--t-szemcse);
mask-image: var(--t-szemcse);
-webkit-mask-size: 48px;
mask-size: 48px;
}
.terv .page-hutes .page-hero-photo::after, .terv .page-futes .page-hero-photo::after, .terv .page-epuletgepeszet .page-hero-photo::after { height: 3px; margin-top: .55rem; border-radius: 0; }
.terv .tag { border-radius: 3px; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.terv .tag::before { border-radius: 1px; }
.terv .eszkozgomb { border: 1.5px solid var(--t-grafit); border-radius: 4px; background: var(--t-papir); box-shadow: 4px 4px 0 rgba(58, 63, 70, .08); color: var(--t-tinta); }
.terv .eszkozgomb:hover { background: var(--t-papir); box-shadow: 4px 4px 0 rgba(58, 63, 70, .08); color: var(--t-tinta); }
.terv .eszkozgomb::after { height: 2px; }
.terv .eszkozgomb-ikon { border-radius: 3px; background: transparent; color: var(--t-kek); }
.terv .eszkozgomb-hoszivattyu .eszkozgomb-ikon { color: var(--warm); }
.terv .eszkozgomb-szoveg span, .terv .eszkozgomb-hoszivattyu .eszkozgomb-szoveg span { color: var(--t-kek); }
.terv .eszkozgomb > .icon { color: var(--t-tinta); }
.terv .eszkozgomb:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
.terv .eszkozgomb:hover { border-color: var(--t-kek); box-shadow: 6px 8px 0 rgba(58, 63, 70, .1); }
}
.terv .cta-band { background-color: var(--t-tervrajz); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(255, 255, 255, .3); }
.terv .cta-band p { color: #D9E6FF; }
.terv .pipa-lista .icon { color: var(--c, var(--t-kek)); }
.terv .nav-call, .terv .nav-call:hover { background: transparent; color: var(--t-tinta); box-shadow: inset 0 0 0 1.5px var(--t-tinta); }
@media (hover: hover) and (pointer: fine) { .terv .nav-call:hover { background: var(--t-tinta); color: var(--white); box-shadow: none; } }
.terv :is(.combo-link, .post-card, .post-toc, .szolg-mod, .gep-kartya, .gep-meret, .marka-tenyek, .fp-panel, .tr-kartya) {
border: 1.5px solid var(--t-grafit);
border-radius: 4px;
background: var(--t-papir);
box-shadow: 4px 4px 0 rgba(58, 63, 70, .08);
}
.terv .gep-nev a::after { border-radius: 4px; }
.terv :is(.legal-summary, .gep-csomag, .ar-kartya, .kalk-gaz, .kalk-pontosabb, .kalk-szobak.is-tobb > .kalk-szoba, .tr-uj-szoba, .table-wrap) { border: 1px solid rgba(58, 63, 70, .35); border-radius: 4px; background: var(--t-papir); }
.terv .post-draft { border-radius: 4px; }
.terv .gep-hero-rajz { border: 1px solid rgba(58, 63, 70, .35); border-radius: 4px; background: var(--white); }
.terv :is(.kalk-eredmeny, .tr-eredmeny, .eszkoz-cta) { border-radius: 4px; background-color: var(--t-tervrajz); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.terv .tr-ar-blokk { border-radius: 3px; }
.terv .csatolt-rajz { border-radius: 4px; }
@media (hover: hover) and (pointer: fine) {
.terv :is(.combo-link, .post-card, .gep-kartya, .szolg-mod):hover { border-color: var(--t-kek); box-shadow: 6px 8px 0 rgba(58, 63, 70, .1); }
}
.terv :is(.combo-link, .post-card, .gep-kartya):active { transform: scale(.985); transition: transform .12s var(--t-ease); }
.terv .combo-icon { border-radius: 3px; }
.terv .blog-filter a, .terv .kalk-chip span { border-radius: 4px; border-color: rgba(58, 63, 70, .45); color: var(--t-tinta); }
.terv .blog-filter a[aria-current] { border-color: var(--c, var(--t-kek)); background: var(--c-tint, #EAF1FD); color: var(--c, var(--t-kek)); }
.terv .kalk-chip input:checked + span { border-color: var(--c, var(--t-kek)); background: var(--c, var(--t-kek)); color: var(--white); }
.terv .kalk-chip:hover span, .terv .blog-filter a:hover { border-color: rgba(58, 63, 70, .45); }
@media (hover: hover) and (pointer: fine) { .terv .kalk-chip:hover span, .terv .blog-filter a:hover { border-color: var(--c, var(--t-kek)); } }
.terv .kalk-chip input:checked:hover + span { border-color: var(--c, var(--t-kek)); }
.terv .kalk-chip:active span, .terv .blog-filter a:active { transform: scale(.96); }
.terv .kalk-chip span, .terv .blog-filter a { transition: transform .12s var(--t-ease), background-color .2s ease, border-color .2s ease, color .2s ease; }
.terv .field :is(input, select, textarea) { border-radius: 4px; }
.terv :is(.kalk, .fp-panel, .tr) .field :is(input, select, textarea), .terv .fp-panel select { border-color: rgba(58, 63, 70, .5); }
.terv .field :is(input, select, textarea):focus-visible { outline-color: var(--t-kek); }
.terv :is(.photo-grid a, .gallery-grid a, .post-figure a) { border-radius: 0; padding: 5px 5px 7px; background: var(--white); box-shadow: 0 1px 2px rgba(26, 33, 80, .14), 0 8px 16px -12px rgba(26, 33, 80, .5); }
.terv :is(.photo-grid a, .gallery-grid a, .post-figure a) img { border-radius: 0; }
.terv .fp-szinpad { border-radius: 4px; border-color: rgba(58, 63, 70, .45); background: var(--white); }
.terv .fp-valodi { border-radius: 3px; }
.terv .tr-lap { border: 1.5px solid var(--t-grafit); border-radius: 4px; }
.terv .tr-bal.is-teljes { background: var(--t-papir); }
.terv .tr-vaszon:focus-visible { border-radius: 4px; }
.terv :is(.tr-eszkoz, .tr-ikon-gomb, .tr-szint-ful, .tr-nezet, .tr-oldal-valaszt select, .tr-nev, .tr-torol) { border-radius: 4px; }
.terv .tr-nezet button { border-radius: 3px; }
.terv .tr-ures-lista { border-radius: 4px; }
.terv .tr-allapot-sor { border-radius: 4px; }
.terv :is(.tr-eszkoz, .tr-ikon-gomb, .tr-szint-ful):active { transform: scale(.95); }
.terv .hely-lista li { border: 1px solid rgba(58, 63, 70, .35); border-radius: 4px; background: var(--t-papir); }
.terv .hely-lista .is-home { border-color: var(--t-kek); box-shadow: inset 3px 0 0 var(--t-kek); }
.terv .hely-nev a { color: var(--t-kek); }
.terv .munka { border: 1.5px solid var(--t-grafit); border-radius: 4px; background: var(--t-papir); box-shadow: 4px 4px 0 rgba(58, 63, 70, .08); }
.terv .szin-gomb { border-radius: 4px; border-color: rgba(58, 63, 70, .45); }
@media (hover: hover) and (pointer: fine) { .terv .szin-gomb:hover { border-color: var(--t-kek); } }
.terv .szin-gomb:has(input:checked) { border-color: var(--c, var(--t-kek)); box-shadow: inset 0 0 0 1px var(--c, var(--t-kek)); }
.terv .process { background: transparent; border-top: 1px solid rgba(58, 63, 70, .3); }
.terv .steps::before { height: 1.5px; background: var(--t-grafit); opacity: .45; }
.terv .step-no { border: 1.6px solid var(--t-kek); background: var(--t-papir); color: var(--t-kek); box-shadow: none; }
.terv .fp input[type="range"] {
--fogo: 22px;
-webkit-appearance: none;
appearance: none;
display: block;
width: 100%;
height: 2.75rem;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
cursor: pointer;
}
.terv .fp input[type="range"]::-webkit-slider-runnable-track {
height: 12px;
background:
linear-gradient(var(--t-tinta-2), var(--t-tinta-2)) 0 50% / 100% 2px no-repeat,
linear-gradient(90deg, transparent calc(100% - 1.5px), rgba(72, 82, 143, .5) 0) calc(var(--fogo) / 2) 50% / calc(100% - var(--fogo) + 1.5px) 8px no-repeat,
repeating-linear-gradient(90deg, rgba(72, 82, 143, .5) 0 1.5px, transparent 1.5px 10%) calc(var(--fogo) / 2) 50% / calc(100% - var(--fogo)) 8px no-repeat;
}
.terv .fp input[type="range"]::-moz-range-track {
height: 12px;
background:
linear-gradient(var(--t-tinta-2), var(--t-tinta-2)) 0 50% / 100% 2px no-repeat,
linear-gradient(90deg, transparent calc(100% - 1.5px), rgba(72, 82, 143, .5) 0) calc(var(--fogo) / 2) 50% / calc(100% - var(--fogo) + 1.5px) 8px no-repeat,
repeating-linear-gradient(90deg, rgba(72, 82, 143, .5) 0 1.5px, transparent 1.5px 10%) calc(var(--fogo) / 2) 50% / calc(100% - var(--fogo)) 8px no-repeat;
}
.terv .fp input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
width: var(--fogo);
height: var(--fogo);
margin-top: calc((12px - var(--fogo)) / 2);
border: 2px solid var(--t-tinta);
border-radius: 50%;
background: var(--t-papir);
box-shadow: 2px 2px 0 rgba(58, 63, 70, .28);
transition: transform .12s var(--t-ease);
}
.terv .fp input[type="range"]::-moz-range-thumb {
box-sizing: border-box;
width: var(--fogo);
height: var(--fogo);
border: 2px solid var(--t-tinta);
border-radius: 50%;
background: var(--t-papir);
box-shadow: 2px 2px 0 rgba(58, 63, 70, .28);
transition: transform .12s var(--t-ease);
}
.terv .fp input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.terv .fp input[type="range"]:active::-moz-range-thumb { transform: scale(1.12); }
.terv .fp input[type="range"]:focus-visible { outline: none; box-shadow: none; }
.terv .fp input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--t-papir), 0 0 0 5px var(--t-kek); }
.terv .fp input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--t-papir), 0 0 0 5px var(--t-kek); }
.terv .fp input[type="range"]:disabled { cursor: default; opacity: .4; }
.hk { padding-block: clamp(2rem, 4vw, 3rem) var(--space); }
.hk-racs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; gap: clamp(1.75rem, 4vw, 3.5rem); }
.hk-urlap { display: grid; gap: 1.5rem; }
.hk-kod-sor { display: flex; flex-wrap: wrap; gap: .6rem; }
.hk-kod-sor input { width: 9.5rem; font-size: 1.55rem; font-stretch: 112%; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }
.hk-kod-sor input::placeholder { font-weight: 500; letter-spacing: .02em; text-transform: none; }
.hk-eredmeny { display: grid; gap: 1.25rem; min-width: 0; }
.hk-ures { margin: 0; padding: 1.1rem 1.3rem; border: 1.5px dashed rgba(58, 63, 70, .45); color: var(--t-tinta-2); line-height: 1.55; }
.hk-kijelzo {
display: inline-grid;
place-items: center;
min-width: 4.4rem;
padding: .45rem .75rem;
border-radius: 8px;
background: color-mix(in srgb, var(--t-tinta) 72%, #000);
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .07), inset 0 -8px 14px rgba(0, 0, 0, .35);
color: #EAF4FF;
font-size: 1.6rem;
font-stretch: 112%;
font-weight: 750;
font-variant-numeric: tabular-nums;
letter-spacing: .08em;
line-height: 1;
text-shadow: 0 0 10px rgba(140, 195, 255, .6);
}
.hk-kijelzo-kicsi { min-width: 2.9rem; padding: .3rem .45rem; border-radius: 6px; font-size: 1rem; }
.hk-kartya { padding: 1.2rem 1.35rem 1.35rem; border: 1.5px solid var(--t-grafit); background: var(--t-papir); scroll-margin-top: 6rem; }
.hk-kartya:target { outline: 3px solid var(--t-kek); outline-offset: 3px; }
.hk-kartya-fej { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem 1rem; }
.terv .hk-kartya-cim { margin: 0; font-size: 1.12rem; font-stretch: 100%; font-weight: 700; line-height: 1.32; letter-spacing: 0; color: var(--t-tinta); }
.hk-marka { display: block; margin-bottom: .15rem; font-size: .84rem; font-weight: 650; color: var(--t-tinta-2); }
.hk-jel { padding: .2rem .55rem; font-size: .78rem; white-space: nowrap; }
.hk-kartya.is-szerelo .hk-jel { border-color: var(--t-kek); background: var(--t-kek); color: var(--white); }
.hk-sorok { display: grid; gap: .65rem; margin: 1.1rem 0 0; }
.hk-sorok > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .75rem; }
.hk-sorok dt { font-weight: 650; color: var(--t-tinta); }
.hk-sorok dd { margin: 0; line-height: 1.5; color: var(--t-tinta-2); }
.hk-cta { display: grid; gap: .85rem; padding: 1.1rem 1.3rem 1.25rem; background: #ECEEF8; }
.hk-cta p { margin: 0; color: var(--t-tinta); }
.hk-cta-gombok { display: flex; flex-wrap: wrap; gap: .6rem; }
.hk-lista { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.hk-lista a { display: flex; align-items: center; gap: .8rem; padding: .55rem .75rem; border: 1px solid rgba(58, 63, 70, .35); background: var(--t-papir); color: var(--t-tinta); text-decoration: none; }
.hk-tobb { margin: .7rem 0 0; color: var(--t-tinta-2); line-height: 1.5; }
@media (hover: hover) and (pointer: fine) { .hk-lista a:hover { border-color: var(--t-kek); } }
.hk-tudni { padding-block: var(--space); border-top: 1px solid rgba(58, 63, 70, .25); }
.hk-tudni-racs { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); }
.hk-tudni h2 { margin-bottom: 1.1rem; font-size: clamp(1.35rem, 2.3vw, 1.75rem); font-stretch: 112%; font-weight: 720; }
.hk-lepesek { display: grid; gap: .7rem; margin: 0 0 1.25rem; padding-left: 1.4rem; font-size: 1.05rem; line-height: 1.55; color: var(--t-tinta); }
.hk-megj { font-size: .93rem; line-height: 1.55; color: var(--t-tinta-2); }
.hk-markak { display: grid; gap: .6rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.hk-markak a { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border: 1.5px solid var(--t-grafit); background: var(--t-papir); color: var(--t-tinta); text-decoration: none; }
.hk-markak span { margin-left: auto; font-size: .9rem; color: var(--t-tinta-2); }
.hk-markak .icon { flex: none; width: 1.1rem; height: 1.1rem; transition: transform .25s var(--t-ease); }
@media (hover: hover) and (pointer: fine) {
.hk-markak a:hover { border-color: var(--t-kek); }
.hk-markak a:hover .icon { transform: translateX(3px); }
}
.hk-kijelzes { margin-bottom: 2.25rem; padding: 1.1rem 1.3rem; border-left: 3px solid var(--t-kek); background: var(--t-papir); }
.hk-kijelzes h2 { margin-bottom: .5rem; }
.hk-kijelzes p { margin: 0; line-height: 1.6; color: var(--t-tinta); }
.hk-teljes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1.25rem; margin: 1.25rem 0 2.25rem; }
@media (max-width: 760px) {
.hk-racs, .hk-tudni-racs, .hk-teljes { grid-template-columns: minmax(0, 1fr); }
.hk-kartya-fej { grid-template-columns: auto minmax(0, 1fr); }
.hk-jel { grid-column: 1 / -1; justify-self: start; }
.hk-sorok > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
.hk-cta-gombok .btn { flex: 1 1 100%; }
}
.t-hibakod-link { justify-self: start; display: inline-flex; align-items: center; gap: .6rem; margin-top: -.35rem; font-weight: 600; color: var(--t-tinta); text-decoration: none; }
.t-hibakod-link svg { flex: none; width: 1.6rem; height: 1.6rem; overflow: visible; fill: none; stroke: var(--t-kek); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.t-hibakod-link > span { text-decoration: underline; text-decoration-color: rgba(26, 33, 80, .3); text-underline-offset: .2em; text-wrap: balance; }
@media (hover: hover) and (pointer: fine) { .t-hibakod-link:hover > span { text-decoration-color: var(--t-kek); } }
.t-hibakod-sav { padding-block: 0 var(--space); }
.t-hibakod-sav-belso {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem);
align-items: center;
padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3.5vw, 2.5rem);
border: 1.5px solid var(--t-grafit);
border-radius: 4px;
background: var(--white);
box-shadow: 4px 4px 0 rgba(58, 63, 70, .08);
}
.t-hibakod-sav-fej { display: flex; align-items: flex-start; gap: 1rem; }
.t-hibakod-sav-ikon { flex: none; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 4px; background: var(--t-kek-halvany); }
.t-hibakod-sav-ikon svg { width: 2rem; height: 2rem; overflow: visible; fill: none; stroke: var(--t-kek); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.t-hibakod-sav h2 { margin: 0; font-size: clamp(1.45rem, 2.4vw, 2rem); }
.t-hibakod-sav-fej p { margin: .45rem 0 0; color: var(--t-tinta-2); }
.t-hibakod-sav .hk-urlap { gap: 1rem; }
.t-hibakod-sav .hk-kod-sor input { width: 8.5rem; font-size: 1.35rem; }
@media (max-width: 860px) {
.t-hibakod-sav-belso { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
.t-hibakod-sav-fej { flex-direction: column; gap: .75rem; }
.t-hibakod-sav .hk-kod-sor { flex-wrap: nowrap; }
.t-hibakod-sav .hk-kod-sor input { flex: 1 1 6rem; width: 6rem; min-width: 0; }
}
.terv-tartalek [data-tuz] :is(.t-ragasztott, .t-cetli, .t-logo) { opacity: 1 !important; translate: none !important; scale: none !important; rotate: var(--r, 0deg) !important; }
.t-csak-ujj { display: none; }
@media (hover: none), (pointer: coarse) { .t-csak-eger { display: none; } .t-csak-ujj { display: inline; } }
.lb-img { -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }
.t-rontgen-rajz .x-cimke { paint-order: stroke; stroke: var(--t-tervrajz); stroke-width: 12px; stroke-linejoin: round; }
.t-uj > span:last-child { text-wrap: balance; }
@media (pointer: coarse) {
.quote .link-btn { padding: .7rem .25rem; }
.map-card-close { top: .25rem; right: .25rem; width: 2.75rem; height: 2.75rem; }
.terv a.tag { padding-block: .35rem; }
.kalk-chip span, .szin-gomb, .blog-filter a { min-height: 2.75rem; }
.kalk-chip span, .blog-filter a { display: inline-flex; align-items: center; }
}
@media (max-width: 520px) { .map-label { font-size: 12.5px; } .map-label.is-home { font-size: 15px; } }
@media (min-width: 761px) and (max-width: 900px) { .terv { --gutter: max(3rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); } }
.terv .eszkoz-uj { background: var(--t-kek); color: var(--white); }
.hk-kod-sor input { border: 1.5px solid rgba(58, 63, 70, .5); }
.hk-jel { border-color: var(--t-kek); color: var(--t-kek); }
.gep-szint > h2::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .4em; vertical-align: .1em; border-radius: 2px; background: var(--szint-szin, var(--t-kek)); }
#belepo.gep-szint { --szint-szin: #8C96A3; }
#kozep.gep-szint { --szint-szin: var(--t-kek); }
#premium.gep-szint { --szint-szin: linear-gradient(135deg, #DDB95F, #A97F2F); }
:is(#belepo, #alap).gep-szint { --szint-szin: linear-gradient(135deg, #8DC2B0, #3F7F6E); }
#kozep.gep-szint { --szint-szin: linear-gradient(135deg, #D49BEF, #8A4FD0); }
.hsz-kartya .gep-kartya-rajz { overflow: hidden; }
.hsz-tabla thead small { font-size: .82rem; }
.fp-fajl-gomb:has(input:focus-visible), .fp-masik:has(input:focus-visible) { outline: 3px solid var(--t-kek); outline-offset: 3px; }
.fp-gep::after { content: ""; position: absolute; inset: -12px; }
.fp-pont::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
@media (pointer: coarse) { .fp-csak-billentyu { display: none; } }
.fp-bal.is-tapad { position: sticky; top: 4rem; z-index: 3; padding-bottom: .5rem; background: var(--t-papir); }
.fp-meres .fp-hiba { margin: 0; }
@media (min-width: 761px) and (max-width: 1100px) { .gep-kartyak { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) {
.eszkozok:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.eszkozok:has(> li:nth-child(5):last-child) > li { grid-column: span 2; }
.eszkozok:has(> li:nth-child(5):last-child) > li:nth-child(n + 4) { grid-column: span 3; }
}
@media (min-width: 600px) and (max-width: 899px) {
.eszkozok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eszkozok > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.terv .gep-valogatas { border-color: rgba(58, 63, 70, .45); border-radius: 4px; }
@media (pointer: coarse) {
.terv :is(.szalag-szintek a, .gep-valogatas .link-btn, .tr-lap-alatt .link-btn, .kalk-eredmeny .kalk-gepek) { position: relative; }
.terv :is(.szalag-szintek a, .gep-valogatas .link-btn, .tr-lap-alatt .link-btn, .kalk-eredmeny .kalk-gepek)::after { content: ""; position: absolute; inset: -9px -4px; }
}
.terv .google-ert { display: inline-flex; align-items: center; gap: .75rem; padding: .55rem .8rem .55rem .9rem; border: 1.5px solid var(--t-grafit); border-radius: 4px; background: var(--t-papir); box-shadow: 3px 3px 0 rgba(58, 63, 70, .12); color: var(--t-tinta); line-height: 1.2; text-decoration: none; }
.terv .google-ert .ge-atlag { font-size: 1.75rem; font-stretch: 112%; font-weight: 780; letter-spacing: -.01em; }
.terv .google-ert .ge-jobb { display: grid; gap: .2rem; }
.terv .google-ert .ge-csillagok { display: inline-flex; gap: 2px; }
.terv .google-ert svg:not(.ge-nyil) { width: 1rem; height: 1rem; fill: var(--t-csillag); }
.terv .google-ert svg.ures { fill: none; stroke: var(--t-csillag); stroke-width: 1.6; }
.terv .google-ert .ge-db { font-size: .86rem; font-weight: 600; color: var(--t-tinta-2); }
.terv .google-ert .ge-nyil { width: 1.15rem; height: 1.15rem; margin-left: auto; padding-left: .15rem; color: var(--t-kek); }
@media (min-width: 761px) { .terv .google-ert { width: fit-content; max-width: 100%; } }
@media (max-width: 760px) { .terv .google-ert { display: flex; } }
.terv .google-ert:focus-visible { outline: 3px solid var(--t-kek); outline-offset: 3px; }
.terv .t-kek .google-ert:focus-visible { outline-color: var(--t-fenykek); }
@media (prefers-reduced-motion: no-preference) { .terv .google-ert { transition: border-color .2s ease, box-shadow .2s ease; } }
@media (hover: hover) and (pointer: fine) { .terv .google-ert:hover { border-color: var(--t-kek); box-shadow: 5px 5px 0 rgba(58, 63, 70, .12); } }
.terv .quote-google { margin-top: 1.5rem; }
.terv .td-bizalom + .google-ert { margin-top: 1rem; }
@media (hover: none) and (pointer: coarse) {
.terv .site-header { background: rgba(250, 246, 238, .97); -webkit-backdrop-filter: none; backdrop-filter: none; }
.terv .mobile-bar { background: rgba(250, 246, 238, .98); -webkit-backdrop-filter: none; backdrop-filter: none; }
.t-rontgen-gomb { -webkit-backdrop-filter: none; backdrop-filter: none; }
.terv .szalag-elem[data-szint] .szalag-gep {
background: linear-gradient(140deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .38) 55%, rgba(255, 255, 255, .5));
-webkit-backdrop-filter: none; backdrop-filter: none; transform: none;
}
.terv .szalag-elem[data-szint] .szalag-gep::after { mix-blend-mode: normal; opacity: .55; }
.terv .szalag-vege-kartya { background: linear-gradient(140deg, rgba(255, 255, 255, .85), rgba(232, 238, 255, .7)); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
html[data-tervezet="d"] {
--td-kartya: #FFFDF8;
--td-indigo: #263BAA;
--td-tinta: #172366;
--td-tinta-2: #48528F;
--td-halvany: #ECEEF8;
--td-fenykek: #B4BEFF;
--td-vonal: rgba(61, 58, 53, .16);
--td-gyors: cubic-bezier(.2, .8, .2, 1);
}
html[data-tervezet="d"] .main-nav :is(.nav-hutes, .nav-futes, .nav-epuletgepeszet) { display: none; }
html[data-tervezet="d"] .nav-szolg { --c: var(--navy); position: relative; }
html[data-tervezet="d"] .nav-szolgaltatasok {
display: inline-flex; align-items: center; gap: .3rem; margin: 0; padding: .35rem 0;
border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none;
font: inherit; color: var(--t-tinta); cursor: pointer;
}
html[data-tervezet="d"] .nav-szolgaltatasok[data-aktiv] { border-bottom-color: var(--c); }
html[data-tervezet="d"] .nav-szolg-nyil { flex: none; width: .7rem; height: .7rem; transition: rotate .2s var(--td-gyors); }
html[data-tervezet="d"] .nav-szolgaltatasok[aria-expanded="true"] .nav-szolg-nyil { rotate: 180deg; }
html[data-tervezet="d"] .nav-szolg-panel { display: none; }
html[data-tervezet="d"] .nav-szolgaltatasok[aria-expanded="true"] + .nav-szolg-panel { display: grid; }
html[data-tervezet="d"] .nav-szolg-panel ul { display: grid; margin: 0; padding: 0; list-style: none; }
html[data-tervezet="d"] .nav-szolg-cim { margin: 0 0 .35rem; font-size: .8rem; font-weight: 650; letter-spacing: .01em; color: var(--td-tinta-2); }
html[data-tervezet="d"] .main-nav .nav-szolg-panel a { display: block; border: 0; color: var(--td-tinta); text-decoration: none; }
html[data-tervezet="d"] .main-nav .nav-szolg-panel a[aria-current="page"] { color: var(--td-indigo); font-weight: 700; }
html[data-tervezet="d"] .nav-szolg-teruletek strong { display: block; font-weight: 700; }
@media (min-width: 1100px) {
@media (hover: hover) and (pointer: fine) {
html[data-tervezet="d"] .nav-szolgaltatasok:hover { border-bottom-color: var(--t-narancs); }
}
html[data-tervezet="d"] .nav-szolg-panel {
position: absolute; top: calc(100% + 1.15rem); left: -1.1rem; z-index: 30;
width: min(37rem, calc(100vw - 2rem)); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.25rem 1.75rem;
padding: 1.15rem 1.25rem 1.25rem; background: var(--td-kartya);
border: 1px solid var(--td-vonal); border-radius: 14px; box-shadow: 0 26px 50px -26px rgba(23, 35, 102, .5);
opacity: 1; translate: none; transition: opacity .14s ease, translate .18s var(--td-gyors), display .18s allow-discrete;
}
html[data-tervezet="d"] .nav-szolg-panel::before { content: ""; position: absolute; inset: -1.25rem 0 100%; }
@starting-style { html[data-tervezet="d"] .nav-szolgaltatasok[aria-expanded="true"] + .nav-szolg-panel { opacity: 0; translate: 0 -.35rem; } }
html[data-tervezet="d"] .nav-szolg-teruletek { gap: .15rem; }
html[data-tervezet="d"] .main-nav .nav-szolg-panel a { margin-inline: -.6rem; padding: .5rem .6rem; border-radius: 8px; line-height: 1.3; }
html[data-tervezet="d"] .nav-szolg-teruletek span { display: block; margin-top: .1rem; font-size: .86rem; font-weight: 450; color: var(--td-tinta-2); }
@media (hover: hover) and (pointer: fine) {
html[data-tervezet="d"] .main-nav .nav-szolg-panel a:hover { background: var(--td-halvany); color: var(--td-tinta); }
}
html[data-tervezet="d"] .main-nav .nav-szolg-panel a:focus-visible { outline: 2px solid var(--td-indigo); outline-offset: 0; }
}
@media (max-width: 1099px) {
html[data-tervezet="d"] .main-nav { max-height: calc(100dvh - 4rem); overflow-y: auto; overscroll-behavior: contain; }
html[data-tervezet="d"] .nav-szolgaltatasok {
justify-content: space-between; width: 100%; padding: .85rem 0; border-bottom: 1px solid var(--line); text-align: left;
}
html[data-tervezet="d"] .nav-szolgaltatasok[data-aktiv] { color: var(--c); border-bottom-color: var(--line); }
html[data-tervezet="d"] .nav-szolg-nyil { width: .85rem; height: .85rem; }
html[data-tervezet="d"] .nav-szolg-panel { gap: .9rem; padding: .8rem 0 .9rem .9rem; border-bottom: 1px solid var(--line); }
html[data-tervezet="d"] .main-nav .nav-szolg-panel a { padding: .5rem 0; font-weight: 550; }
html[data-tervezet="d"] .nav-szolg-teruletek span { display: none; }
html[data-tervezet="d"] .nav-szolg-teruletek strong { font-weight: inherit; }
}
@media (prefers-reduced-motion: reduce) {
html[data-tervezet="d"] :is(.nav-szolg-nyil, .nav-szolg-panel) { transition: none; }
}
html[data-tervezet="d"] .td-bizalom { display: grid; gap: .45rem; justify-items: start; margin: .35rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--td-vonal); list-style: none; }
html[data-tervezet="d"] .td-bizalom li { display: inline-flex; align-items: center; gap: .45rem; font-size: 1rem; color: var(--td-tinta); }
html[data-tervezet="d"] .td-bizalom strong { font-weight: 760; }
html[data-tervezet="d"] .td-bizalom .icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--td-indigo); stroke-width: 2.4; }
@media (max-width: 400px) {
html[data-tervezet="d"] .td-bizalom li { font-size: .95rem; }
}
html[data-tervezet="d"] .td-folytat {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
gap: .75rem;
max-width: 34rem;
min-height: 3.6rem;
margin: 1rem 0 0;
padding: .7rem .8rem .7rem .7rem;
border: 1.5px solid var(--t-grafit);
border-radius: 4px;
background: var(--td-kartya);
color: var(--td-tinta);
text-decoration: none;
box-shadow: 4px 4px 0 rgba(58, 63, 70, .08);
}
html[data-tervezet="d"] .td-folytat[hidden] { display: none; }
html[data-tervezet="d"] .td-folytat-ikon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 4px; background: var(--td-halvany); color: var(--td-indigo); }
html[data-tervezet="d"] .td-folytat-ikon svg { width: 1.65rem; height: 1.65rem; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html[data-tervezet="d"] .td-folytat-szoveg { display: grid; gap: .1rem; min-width: 0; }
html[data-tervezet="d"] .td-folytat-szoveg strong { font-size: 1rem; font-weight: 760; line-height: 1.25; }
html[data-tervezet="d"] .td-folytat-szoveg span { font-size: .86rem; line-height: 1.3; color: var(--td-tinta-2); }
html[data-tervezet="d"] .td-folytat-jel { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: conic-gradient(var(--td-indigo) 0 50%, var(--td-halvany) 50% 100%); box-shadow: 0 0 0 2px var(--td-kartya), 0 0 0 3.5px var(--td-fenykek); }
html[data-tervezet="d"] .td-nyil { width: 1.3rem; height: 1.3rem; fill: none; stroke: var(--td-tinta-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s var(--td-gyors); }
@media (hover: hover) and (pointer: fine) { html[data-tervezet="d"] .td-folytat:hover .td-nyil { transform: translateX(3px); } }
html[data-tervezet="d"] .td-folytat:focus-visible { outline: 3px solid var(--td-indigo); outline-offset: 3px; }
html[data-tervezet="d"] .td-folytat.is-be { animation: td-be .2s var(--td-gyors) backwards; }
@keyframes td-be { from { opacity: 0; transform: translateY(-6px); } }
html[data-tervezet="d"] .t-gomb-fo .t-keret { display: none; }
html[data-tervezet="d"] :is(.t-gomb-fo, .btn-primary):not(.nav-call) {
--td-feny: 0 0 0 1px rgba(255, 170, 105, .5), 0 0 16px 1px rgba(255, 122, 26, .42), 0 10px 26px -10px rgba(255, 122, 26, .8);
--td-feny-eros: 0 0 0 1px rgba(255, 180, 120, .65), 0 0 28px 5px rgba(255, 122, 26, .55), 0 14px 32px -12px rgba(255, 122, 26, .9);
box-shadow: var(--td-feny);
}
html[data-tervezet="d"] .t-gomb-fo { transition: transform .18s var(--t-ease), background-color .2s ease, color .2s ease, box-shadow .25s ease; }
html[data-tervezet="d"] :is(.t-gomb-fo, .btn-primary):not(.nav-call):focus-visible { box-shadow: var(--td-feny-eros); }
@media (hover: hover) and (pointer: fine) {
html[data-tervezet="d"] :is(.t-gomb-fo, .btn-primary):not(.nav-call):hover { box-shadow: var(--td-feny-eros); }
}
html[data-tervezet="d"] :is(.t-gomb-fo, .btn-primary):not(.nav-call):active { box-shadow: 0 0 0 1px rgba(255, 170, 105, .45), 0 0 8px 0 rgba(255, 122, 26, .35); }
@keyframes td-felfenylik { 45% { box-shadow: var(--td-feny-eros); } }
@media (prefers-reduced-motion: no-preference) {
html[data-tervezet="d"] .t-gomb-fo.is-keretes { animation: td-felfenylik 1.2s ease-in-out 1; }
}
html[data-tervezet="d"] .td-haladas { display: grid; gap: .5rem; margin: .25rem 0 1rem; }
html[data-tervezet="d"] .td-haladas-sor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; font-size: .95rem; font-weight: 650; color: #EEF0FB; }
html[data-tervezet="d"] .td-haladas-szam { display: inline-flex; align-items: center; gap: .35rem; font-variant-numeric: tabular-nums; }
html[data-tervezet="d"] .td-haladas-szam .icon { width: 1.15rem; height: 1.15rem; stroke-width: 2.6; }
html[data-tervezet="d"] .td-haladas-sav { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .2); }
html[data-tervezet="d"] .td-haladas-sav > span { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--td-kartya); transform: scaleX(var(--td-kesz, 0)); transform-origin: 0 50%; transition: transform .22s var(--td-gyors); }
html[data-tervezet="d"] .td-haladas.is-kesz .td-haladas-sav > span { background: #FFFFFF; }
html[data-tervezet="d"] .td-tabsav { display: none; }
@media (max-width: 760px) {
html[data-tervezet="d"] .mobile-bar { visibility: hidden; }
html[data-tervezet="d"] .main-nav { max-height: calc(100dvh - 4rem - 4.2rem - env(safe-area-inset-bottom, 0px)); }
html[data-tervezet="d"] .td-tabsav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 31;
display: block;
padding: .25rem max(.35rem, env(safe-area-inset-right, 0px)) calc(.25rem + env(safe-area-inset-bottom, 0px)) max(.35rem, env(safe-area-inset-left, 0px));
border-top: 1px solid rgba(23, 35, 102, .13);
background: rgba(255, 253, 248, .95);
-webkit-backdrop-filter: saturate(1.2) blur(12px);
backdrop-filter: saturate(1.2) blur(12px);
box-shadow: 0 -10px 30px -24px rgba(23, 35, 102, .6);
transition: translate .2s var(--td-gyors), visibility 0s linear 0s;
}
html[data-tervezet="d"] .td-tabsav ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 34rem; margin: 0 auto; padding: 0; list-style: none; }
html[data-tervezet="d"] .td-tab {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .12rem;
min-height: 3.55rem;
padding: .2rem .1rem;
border-radius: 12px;
color: var(--td-tinta-2);
font-size: .72rem;
font-weight: 650;
line-height: 1.1;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
-webkit-user-select: none;
user-select: none;
}
html[data-tervezet="d"] .td-tab-ikon { display: grid; place-items: center; width: 3.2rem; height: 1.95rem; border-radius: 999px; transition: background-color .18s ease, transform .12s var(--td-gyors); }
html[data-tervezet="d"] .td-tab-ikon svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-tervezet="d"] .td-tab[aria-current="page"],
html[data-tervezet="d"] .td-tab.is-aktiv { color: var(--td-tinta); }
html[data-tervezet="d"] .td-tab[aria-current="page"] .td-tab-ikon,
html[data-tervezet="d"] .td-tab.is-aktiv .td-tab-ikon { background: var(--td-halvany); }
html[data-tervezet="d"] .td-tab.td-nem-aktiv { color: var(--td-tinta-2); }
html[data-tervezet="d"] .td-tab.td-nem-aktiv .td-tab-ikon { background: transparent; }
html[data-tervezet="d"] .td-tab:active .td-tab-ikon { transform: scale(.9); }
html[data-tervezet="d"] .td-tab:focus-visible { outline: 3px solid var(--td-indigo); outline-offset: -2px; }
html[data-tervezet="d"] .td-tab-hivas { color: var(--td-tinta); font-weight: 750; }
html[data-tervezet="d"] .td-tab-hivas .td-tab-ikon {
width: 3.3rem;
height: 3.3rem;
margin-top: -1.45rem;
border-radius: 50%;
background: var(--td-indigo);
color: #FFFFFF;
box-shadow: 0 0 0 4px rgba(255, 253, 248, .98), 0 10px 18px -8px rgba(38, 59, 170, .75);
}
html[data-tervezet="d"] .td-tab-hivas .td-tab-ikon svg { width: 1.5rem; height: 1.5rem; stroke-width: 1.9; }
html[data-tervezet="d"] .td-tab-hivas:active .td-tab-ikon { background: var(--td-tinta); }
html[data-tervezet="d"] .td-tab-allas { position: absolute; top: .1rem; left: calc(50% + .55rem); min-width: 1.9rem; padding: .05rem .3rem; border-radius: 999px; background: var(--td-indigo); color: #FFFFFF; font-size: .66rem; font-weight: 750; line-height: 1.35; text-align: center; font-variant-numeric: tabular-nums; }
html[data-tervezet="d"] .td-tab-allas[hidden] { display: none; }
html[data-tervezet="d"] .suti { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
html[data-tervezet="d"].tr-teljes .td-tabsav,
html[data-tervezet="d"].lb-open .td-tabsav { visibility: hidden; }
}
@media (pointer: coarse) and (max-width: 760px) {
html[data-tervezet="d"]:has(:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"]), textarea, select):focus) .td-tabsav {
translate: 0 110%;
visibility: hidden;
transition: translate .2s var(--td-gyors), visibility 0s linear .2s;
}
}
@media (prefers-reduced-motion: reduce) {
html[data-tervezet="d"] .td-folytat.is-be { animation: none; }
html[data-tervezet="d"] .td-haladas-sav > span,
html[data-tervezet="d"] .td-tab-ikon,
html[data-tervezet="d"] .td-nyil,
html[data-tervezet="d"] .td-tabsav { transition: none !important; }
}
@media (hover: none) and (pointer: coarse) {
html[data-tervezet="d"] .td-tabsav { background: rgba(255, 253, 248, .98); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
html[data-valtozat="e"] .t-hos :is(.t-uj, .t-hibakod-link) { display: none; }
@media (max-width: 760px) {
html[data-valtozat="e"] .t-tabla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem .9rem; }
html[data-valtozat="e"] .t-tabla-elem .t-ragasztott { padding: 5px 5px 7px; }
html[data-valtozat="e"] .t-tabla .t-felirat { font-size: 1rem; }
html[data-valtozat="e"] .t-tabla .t-felirat-mit { font-size: .85rem; line-height: 1.35; }
html[data-valtozat="e"] .t-fotoszam { right: 10px; bottom: 12px; padding: .15rem .4rem; font-size: .75rem; }
html[data-valtozat="e"] .t-album-kartya-szoveg strong { font-size: 1.05rem; }
html[data-valtozat="e"] .t-album-kartya-szoveg span { font-size: .8rem; }
html[data-valtozat="e"] .t-tabla .t-cetli { padding: .9rem .8rem 1rem; }
html[data-valtozat="e"] .t-tabla .t-cetli h3 { font-size: 1.1rem; }
html[data-valtozat="e"] .t-tabla .t-cetli p { font-size: .85rem; line-height: 1.4; }
html[data-valtozat="e"] .t-tabla .t-cetli-tel { font-size: 1.05rem; font-stretch: 100%; white-space: nowrap; }
html[data-valtozat="e"] .t-tabla .t-cetli .t-gomb { width: 100%; min-height: 2.75rem; padding-inline: .5rem; font-size: .9rem; }
}