@layer components{
.vizsgal-igen,.vizsgal-nem{display:inline-flex;align-items:center;justify-content:center;
width:1.6em;height:1.6em;border-radius:50%;
font-weight:600;line-height:1;}
.vizsgal-igen{background:var(--primary-soft);color:var(--primary)}
.vizsgal-nem{background:var(--surface-muted);color:var(--text-tertiary)}
.valtozas-racs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--space-24);margin:0;padding:0;list-style:none;}
.valtozas{display:flex;flex-direction:column;gap:var(--space-16);
background:var(--card-bg);border:1px solid var(--card-border);
border-radius:var(--card-radius);padding:var(--space-24);
box-shadow:var(--card-shadow);}
.valtozas-jel{align-self:start;margin:0;
padding:var(--space-4) var(--space-8);border-radius:var(--r-md);
background:var(--badge-bg);color:var(--badge-text);}
.valtozas-jel-uj{background:var(--primary);color:var(--on-primary)}
.valtozas-cim{margin:0;color:var(--text-primary)}
.valtozas-sor{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--space-16)}
.valtozas-sor dt{color:var(--text-tertiary);white-space:nowrap;
font-family:var(--font-mono);font-size:var(--type-ui-caption-size);
letter-spacing:.06em;text-transform:uppercase;padding-top:var(--space-4);}
.valtozas-sor dd{margin:0;color:var(--text-secondary)}
.valtozas-sor .valtozas-ma{color:var(--text-primary)}
.valtozas-kovetkezmeny{margin:0;padding-top:var(--space-16);
border-top:1px solid var(--border);color:var(--text-secondary);}
.ttd-keplet{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;
gap:var(--space-16);margin-block:var(--space-24);}
.ttd-keplet-tag{display:grid;gap:var(--space-4);align-content:start;
padding:var(--space-16) var(--space-24);
background:var(--surface);border:1px solid var(--card-border);border-radius:var(--r-lg);}
.ttd-keplet-betu{color:var(--secondary)}
.ttd-keplet-ertek{color:var(--text-primary);margin:0}
.ttd-keplet-tag .type-ui-caption{color:var(--text-secondary)}
.ttd-keplet-jel{align-self:center;font-family:var(--font-heading);font-size:var(--space-32);
color:var(--secondary);line-height:1;}
.ttd-chipek{display:flex;flex-wrap:wrap;gap:var(--space-8);list-style:none;margin:var(--space-16) 0;padding:0}
.ttd-chip{display:inline-flex;align-items:baseline;gap:var(--space-8);
padding:var(--space-8) var(--space-16);border-radius:var(--r-lg);
background:var(--primary-soft);color:var(--text-primary);}
.ttd-chip .type-data-value{color:var(--secondary)}
.ttd-kalk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-32);
margin-block:var(--space-24);padding:var(--space-32);
border:1px solid var(--card-border);border-radius:var(--r-xl);background:var(--surface);}
.ttd-kalk-mezok{display:grid;gap:var(--space-16);align-content:start}
.ttd-egyseg,.ttd-sugo{color:var(--text-tertiary)}
.ttd-kalk-eredmeny{display:grid;gap:var(--space-16);align-content:start;
padding:var(--space-24);border-radius:var(--r-lg);background:var(--panel-bg);}
.ttd-kalk-sor{display:grid;gap:var(--space-4)}
.ttd-kalk-sor .type-ui-caption{color:var(--text-secondary)}
.ttd-kalk-sor strong{color:var(--text-primary);margin:0;font-variant-numeric:tabular-nums}
.ttd-kalk-fo{color:var(--secondary)}
.ttd-kalk-megjegyzes{color:var(--text-secondary)}
.ttd-kalk-megjegyzes:empty{display:none}
.ttd-kalk-lab{grid-column:1 / -1;margin:0;color:var(--text-tertiary);max-width:72ch}
.ttd-sav{display:block;width:100%;height:var(--space-16);border-radius:var(--r-md);overflow:hidden}
.ttd-sav rect{transition:width var(--dur-ui) var(--ease-out),x var(--dur-ui) var(--ease-out)}
.ttd-sav-alap{fill:var(--ttd-alap);background:var(--ttd-alap)}
.ttd-sav-elszallitott{fill:var(--ttd-elszallitott);background:var(--ttd-elszallitott)}
.ttd-sav-locsolas{fill:var(--ttd-locsolas);background:var(--ttd-locsolas)}
.ttd-jelmagyarazat{display:flex;flex-wrap:wrap;gap:var(--space-8) var(--space-16);color:var(--text-secondary)}
.ttd-jelmagyarazat > span{display:inline-flex;align-items:center;gap:var(--space-4)}
.ttd-jel{display:inline-block;width:var(--space-16);height:var(--space-16);border-radius:var(--space-4)}
.ttd-gorgo:focus-visible{outline:3px solid var(--border-focus);outline-offset:2px;border-radius:var(--r-lg)}
.ttd-abra .ttd-racs{stroke:var(--border);stroke-width:1}
.ttd-abra .ttd-tengely{stroke:var(--abra-keret);stroke-width:1.5}
.ttd-oszlop-1{fill:var(--ttd-oszlop-halvany)}
.ttd-oszlop-2{fill:var(--ttd-oszlop-kozep)}
.ttd-oszlop-3{fill:var(--ttd-alap)}
.ttd-gorbe{fill:none;stroke-width:3;stroke-linecap:round}
.ttd-gorbe-1{stroke:var(--ttd-alap)}
.ttd-gorbe-2{stroke:var(--primary)}
.ttd-abra .ttd-gorbe-cimke-1{fill:var(--ttd-alap)}
.ttd-pont{stroke:var(--surface);stroke-width:2}
.ttd-pont-1{fill:var(--ttd-alap)}
.ttd-pont-2{fill:var(--primary)}
.ttd-jelolo{stroke:var(--abra-keret);stroke-width:1;stroke-dasharray:4 4}
.ttd-talaj{fill:var(--ttd-talaj)}
.ttd-talajviz{fill:var(--abra-viz)}
.ttd-terep{stroke:var(--primary);stroke-width:3}
.ttd-haz{fill:var(--surface);stroke:var(--abra-keret);stroke-width:2;stroke-linejoin:round}
.ttd-ablak{fill:var(--abra-viz);stroke:var(--abra-keret);stroke-width:1.5}
.ttd-cso{fill:none;stroke:var(--abra-keret);stroke-width:6;stroke-linecap:round}
.ttd-folyas{fill:none;stroke:var(--ttd-viz-vonal);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:6 8}
.ttd-tartaly{fill:var(--abra-badge);stroke:var(--secondary);stroke-width:2.5}
.ttd-szikkaszto{fill:var(--abra-iszap);stroke:var(--abra-keret);stroke-width:1.5;stroke-dasharray:5 4}
.ttd-szivargas{fill:none;stroke:var(--ttd-viz-vonal);stroke-width:2;stroke-dasharray:3 7;stroke-linecap:round}
.ttd-kut{fill:var(--surface);stroke:var(--text-primary);stroke-width:2}
.ttd-kut-szuro{stroke:var(--text-primary);stroke-width:1.5}
.ttd-cimkedoboz{fill:var(--surface);stroke:var(--secondary);stroke-width:1.5}
}
@layer responsive{
@media (max-width:760px){
.ttd-keplet{grid-template-columns:minmax(0,1fr)}
.ttd-keplet-jel{justify-self:center}
.ttd-kalk{grid-template-columns:minmax(0,1fr);padding:var(--space-16);gap:var(--space-24)}
.ttd-gorgo{overflow-x:auto;overscroll-behavior-x:contain}
.ttd-gorgo .abra-svg{min-width:34rem}
}
}
@layer motion{
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline: view()){
.ttd-oszlop{transform-box:fill-box;transform-origin:50% 100%;
animation:ttd-no linear both;animation-timeline:view();
animation-range:entry 10% cover 40%;}
.ttd-gorbe{stroke-dasharray:100;
animation:ttd-rajzol linear both;animation-timeline:view();
animation-range:entry 10% cover 45%;}
}
}
}
@layer motion{
@media (prefers-reduced-motion:no-preference){
.ttd-folyas{animation:ttd-folyik 1.6s linear infinite}
.ttd-szivargas{animation:ttd-folyik 2.4s linear infinite}
}
}
@layer motion{
@media (prefers-reduced-motion:reduce){
.ttd-sav rect{transition:none}
}
}
@layer components{
.dontes{display:grid;gap:var(--space-24);margin-block:var(--space-24);
padding:var(--space-24);border:1px solid var(--card-border);border-radius:var(--r-xl);
background:var(--surface);}
.dontes[hidden]{display:none}
.dontes-cim{color:var(--secondary);margin:0}
.dontes-kerdes{border:0;margin:0;padding:0;min-inline-size:0}
.dontes-kerdes[hidden]{display:none}
.dontes-kerdes legend{padding:0;color:var(--text-primary)}
.dontes-szam{color:var(--secondary);margin-inline-end:var(--space-4)}
.dontes-valasz{padding:var(--space-16) var(--space-24);border-radius:var(--r-lg);
background:var(--panel-bg);border-left:4px solid var(--primary);}
.dontes-valasz[hidden]{display:none}
.dontes-valasz p{margin:0}
.dontes-valasz p + p{margin-top:var(--space-8);color:var(--text-secondary)}
.dontes-ujra{margin:0}
.dontes-ujra[hidden]{display:none}
.levelminta{margin-block:var(--space-24);padding:var(--space-24);
border:1px solid var(--card-border);border-radius:var(--r-xl);background:var(--surface);
display:grid;gap:var(--space-16);}
.levelminta-fej{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-16)}
.levelminta-gomb[hidden]{display:none}
.levelminta-targy{margin:0;color:var(--text-secondary)}
.levelminta-szoveg{margin:0;padding:var(--space-16);border-radius:var(--r-lg);background:var(--panel-bg);
color:var(--text-primary);white-space:pre-wrap;overflow-wrap:anywhere;
font-family:var(--font-body);}
.levelminta-szoveg:focus-visible{outline:3px solid var(--border-focus);outline-offset:2px}
.levelminta-allapot{margin:0;color:var(--secondary)}
.levelminta-allapot:empty{display:none}
.levelminta-megj{margin:0;color:var(--text-tertiary)}
.ellenorzo{border:0;margin:var(--space-24) 0;padding:0;min-inline-size:0}
.ellenorzo legend{padding:0;margin-bottom:var(--space-16);color:var(--text-primary)}
.ellenorzo-lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-8)}
.ellenorzo-tetel label{display:flex;gap:var(--space-16);align-items:flex-start;cursor:pointer;
min-block-size:44px;padding:var(--space-8) var(--space-16);
border:1px solid var(--card-border);border-radius:var(--r-lg);background:var(--surface);
color:var(--text-secondary);}
.ellenorzo-tetel input{margin-top:.3em;inline-size:1.1rem;block-size:1.1rem;accent-color:var(--primary);flex:none}
.ellenorzo-tetel strong{color:var(--text-primary)}
.ellenorzo-tetel label:has(input:checked){background:var(--panel-bg);border-color:var(--primary)}
.ellenorzo-tetel label:has(input:focus-visible){outline:2px solid var(--border-focus);outline-offset:2px}
}
@layer responsive{
@media (max-width:760px){
.dontes,.levelminta{padding:var(--space-16)}
}
}
@layer components{
.eng-doboz{fill:var(--surface);stroke:var(--abra-keret);stroke-width:1.5}
.eng-cel{fill:var(--eng-cel-bg);stroke:var(--primary);stroke-width:2}
.eng-ce{fill:var(--surface);stroke:var(--secondary);stroke-width:1.5;stroke-dasharray:6 4}
.eng-ut{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.eng-ut-igen{stroke:var(--primary)}
.eng-ut-nem{stroke:var(--abra-keret);stroke-dasharray:6 5}
.eng-zona{fill:none;stroke-width:2;stroke-dasharray:8 6}
.eng-zona-1{stroke:var(--eng-zona-berendezes)}
.eng-zona-2{stroke:var(--eng-zona-viz)}
.eng-zona-3{stroke:var(--eng-zona-hely)}
.eng-jel{fill:var(--secondary)}
.abra-svg .eng-jel-szam{font-family:var(--font-heading);font-size:13px;font-weight:600;fill:var(--on-secondary);}
.eng-sav{fill:var(--panel-bg);stroke:var(--card-border);stroke-width:1}
.eng-sav-tolt{fill:var(--primary)}
.eng-osztas{stroke:var(--abra-keret);stroke-width:1.5}
.eng-idovonal{stroke:var(--border-strong);stroke-width:2}
.eng-pont-mult{fill:var(--primary);stroke:var(--surface);stroke-width:2}
.eng-pont-jovo{fill:var(--surface);stroke:var(--primary);stroke-width:2.5}
.eng-agg{stroke:var(--card-border);stroke-width:1}
.eng-agg-1{fill:var(--eng-agg-1)}
.eng-agg-2{fill:var(--eng-agg-2)}
.eng-agg-3{fill:var(--eng-agg-3)}
.eng-agg-4{fill:var(--eng-agg-4)}
.abra-svg .eng-agg-cimke{font-family:var(--font-heading);font-size:13.5px;font-weight:600;fill:var(--text-primary);}
}
@layer motion{
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline: view()){
.eng-ut-igen{stroke-dasharray:100;
animation:eng-rajzol linear both;animation-timeline:view();
animation-range:entry 10% cover 40%;}
.eng-sav-tolt{transform-box:fill-box;transform-origin:0 50%;
animation:eng-telik linear both;animation-timeline:view();
animation-range:entry 15% cover 45%;}
.eng-agg{transform-box:fill-box;transform-origin:0 50%;
animation:eng-telik linear both;animation-timeline:view();
animation-range:entry 10% cover 40%;}
}
}
}
@layer components{
.lepes-jelzo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8) var(--space-16);
margin:0 0 var(--space-16);color:var(--text-secondary);}
.lepes-jelzo-sav{display:inline-flex;gap:var(--space-4)}
.lepes-jelzo-darab{inline-size:var(--space-24);block-size:var(--space-8);border-radius:var(--space-4);
background:var(--border);}
.lepes-jelzo-darab.is-kesz{background:var(--primary)}
.lepes-jelzo-felt{color:var(--text-tertiary)}
.lepes-tovabb{margin:var(--space-32) 0 0}
.lepes-tovabb-link{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
gap:var(--space-4) var(--space-16);min-block-size:44px;
padding:var(--space-16) var(--space-24);
border:1px solid var(--card-border);border-left:4px solid var(--primary);
border-radius:var(--r-lg);background:var(--surface);
color:var(--text-primary);text-decoration:none;
transition:border-color var(--dur-ui) var(--ease-out),background var(--dur-ui) var(--ease-out);}
.lepes-tovabb-cimke{grid-column:1;color:var(--secondary);margin:0}
.lepes-tovabb-cim{grid-column:1;color:var(--text-primary)}
.lepes-tovabb-nyil{grid-column:2;grid-row:1 / span 2;
inline-size:var(--space-48);block-size:var(--space-48);border-radius:50%;
display:grid;place-items:center;background:var(--primary-soft);color:var(--text-primary);
font-size:var(--type-ui-body-size);
transition:transform var(--dur-ui) var(--ease-out);}
.lepes-tovabb-link:hover{border-color:var(--primary);background:var(--panel-bg)}
.lepes-tovabb-link:hover .lepes-tovabb-nyil{transform:translateY(3px)}
.lepes-tovabb-link:focus-visible{outline:3px solid var(--border-focus);outline-offset:3px}
.eng-ut-palya{fill:none;stroke:var(--border);stroke-width:10;stroke-linecap:round}
.eng-ut-vastag{stroke-width:4}
.eng-csomo-kor{fill:var(--primary);stroke:var(--surface);stroke-width:4}
.eng-csomo-felt .eng-csomo-kor{fill:var(--surface);stroke:var(--primary);stroke-width:3;stroke-dasharray:5 4}
.abra-svg .eng-csomo-szam{font-family:var(--font-heading);font-size:17px;font-weight:600;fill:var(--on-primary);}
.abra-svg .eng-csomo-szam-kicsi{font-size:14px}
.abra-svg .eng-csomo-felt .eng-csomo-szam{fill:var(--text-primary)}
.eng-ki{fill:var(--panel-bg);stroke:var(--card-border);stroke-width:1}
.abra-svg .eng-ki-szoveg{fill:var(--text-secondary)}
.eng-szunet{fill:var(--eng-szunet-bg);stroke:var(--warning-border);stroke-width:1.5;stroke-dasharray:4 3}
.eng-hiba{fill:var(--eng-hiba-bg);stroke:var(--danger-border);stroke-width:1.5}
.eng-folyamatos{fill:var(--panel-bg);stroke:var(--card-border);stroke-width:1}
.eng-oszlop-felt{fill:none;stroke:var(--border-strong);stroke-width:1;stroke-dasharray:5 4}
.eng-sav-vonal{stroke:var(--border);stroke-width:1}
.eng-szerep{stroke-width:1.5}
.eng-szerep-1{fill:var(--eng-szerep-1-bg);stroke:var(--primary)}
.eng-szerep-2{fill:var(--eng-szerep-2-bg);stroke:var(--secondary)}
.eng-szerep-3{fill:var(--eng-szerep-3-bg);stroke:var(--eng-szerep-3-keret)}
.eng-szerep-4{fill:var(--eng-szerep-4-bg);stroke:var(--border-strong);stroke-dasharray:4 3}
.abra-svg .eng-szerep-szoveg{fill:var(--text-primary);font-weight:500;font-size:11px}
}
@layer responsive{
@media (max-width:640px){
.lepes-tovabb-link{padding:var(--space-16)}
.lepes-tovabb-nyil{inline-size:var(--space-32);block-size:var(--space-32)}
}
}
@layer motion{
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline: view()){
.eng-csomo,.eng-feladat{transform-box:fill-box;transform-origin:50% 50%;
animation:eng-gyul linear both;animation-timeline:view();}
.eng-csomo-1,.eng-feladat-1{animation-range:entry 15% cover 28%}
.eng-csomo-2,.eng-feladat-2{animation-range:entry 20% cover 32%}
.eng-csomo-3,.eng-feladat-3{animation-range:entry 25% cover 36%}
.eng-csomo-4,.eng-feladat-4{animation-range:entry 30% cover 40%}
.eng-csomo-5,.eng-feladat-5{animation-range:entry 35% cover 44%}
.eng-csomo-6,.eng-feladat-6{animation-range:entry 40% cover 48%}
}
}
}
@layer motion{
@media (prefers-reduced-motion:reduce){
.lepes-tovabb-link,.lepes-tovabb-nyil{transition:none}
}
}
@layer components{
.szereplo{margin:var(--space-32) 0;display:grid;gap:var(--space-16)}
.szereplo-gorgo,
.eng-abra .ttd-gorgo{overflow-x:auto;overscroll-behavior-x:contain;
background:
linear-gradient(to right,var(--surface) 30%,transparent) left center / var(--space-48) 100% no-repeat local,
linear-gradient(to left,var(--surface) 30%,transparent) right center / var(--space-48) 100% no-repeat local,
radial-gradient(farthest-side at 0 50%,var(--szr-arnyek),transparent) left center / var(--space-16) 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%,var(--szr-arnyek),transparent) right center / var(--space-16) 100% no-repeat scroll;
border-radius:var(--r-xl);}
.szereplo-gorgo{border:1px solid var(--card-border);background-color:var(--surface)}
.eng-abra .ttd-gorgo{border:1px solid var(--card-border);background-color:var(--surface)}
.eng-abra .abra-svg{background:transparent;border:0}
.szereplo-gorgo:focus-visible{outline:3px solid var(--border-focus);outline-offset:2px}
.szereplo-tabla{width:100%;min-width:46rem;border-collapse:separate;border-spacing:0}
.szereplo-tabla th,.szereplo-tabla td{padding:var(--space-16) var(--space-8);vertical-align:middle}
.szereplo-tabla thead th{text-align:center;vertical-align:top;border-bottom:1px solid var(--border);
padding-top:var(--space-24);}
.szereplo-tabla .szr-sarok{text-align:left;padding-left:var(--space-24);color:var(--text-tertiary)}
.szr-szam{display:grid;place-items:center;margin:0 auto var(--space-8);
inline-size:var(--space-32);block-size:var(--space-32);border-radius:50%;
background:var(--primary);color:var(--on-primary);font-weight:600;}
.szr-lepes-nev{display:block;font-family:var(--font-heading);font-weight:600;
font-size:var(--type-ui-body-size);color:var(--text-primary);}
.szr-hakell{display:block;color:var(--text-tertiary)}
.szr-felt{background:var(--szr-felt-bg)}
.szereplo-tabla thead .szr-felt{border-radius:var(--r-lg) var(--r-lg) 0 0}
.szereplo-tabla tbody tr:last-child .szr-felt{border-radius:0 0 var(--r-lg) var(--r-lg)}
.szereplo-tabla tbody th{position:sticky;left:0;z-index:1;text-align:left;
padding-left:var(--space-24);min-width:11.5rem;
background:var(--surface);}
.szereplo-tabla tbody tr + tr > *{border-top:1px solid var(--border)}
.szr-szereplo{display:flex;align-items:center;gap:var(--space-16)}
.szr-ikon{flex:none;display:grid;place-items:center;
inline-size:var(--space-48);block-size:var(--space-48);border-radius:50%;
background:var(--szr-bg);color:var(--text-primary);}
.szr-ikon .icon{width:var(--space-24);height:var(--space-24)}
.szr-nev-blokk{display:grid}
.szr-nev{font-family:var(--font-heading);font-weight:600;color:var(--text-primary)}
.szr-al{color:var(--text-secondary)}
.szereplo-tabla td{text-align:center}
.szr-feladat{display:inline-flex;align-items:center;justify-content:center;
min-block-size:var(--space-32);padding:var(--space-4) var(--space-16);
border-radius:var(--r-md);border:1.5px solid var(--szr-szin);background:var(--szr-bg);
color:var(--text-primary);font-size:var(--type-ui-caption-size);font-weight:600;
white-space:nowrap;}
.szr-sor-1{--szr-szin:var(--primary);--szr-bg:var(--eng-szerep-1-bg)}
.szr-sor-2{--szr-szin:var(--secondary);--szr-bg:var(--eng-szerep-2-bg)}
.szr-sor-3{--szr-szin:var(--eng-szerep-3-keret);--szr-bg:var(--eng-szerep-3-bg)}
.szr-sor-4{--szr-szin:var(--border-strong);--szr-bg:var(--eng-szerep-4-bg)}
.szr-sor-4 .szr-feladat{border-style:dashed}
.eng-abra .abra-svg .abra-cimke-eros{font-size:14.5px}
.eng-abra .abra-svg .abra-cimke{font-size:13px;fill:var(--text-secondary)}
.eng-abra .abra-svg .abra-jegyzet{font-size:12.5px;fill:var(--text-secondary)}
.eng-abra .abra-felirat{max-width:72ch}
.szereplo .abra-felirat{max-width:72ch}
.gorgo-sugo{display:none;margin:0;color:var(--text-tertiary)}
}
@layer responsive{
@media (max-width:760px){
.eng-abra .ttd-gorgo .abra-svg{min-width:42rem}
.gorgo-sugo{display:block}
.szereplo-tabla tbody th{min-width:8.5rem;padding-left:var(--space-16)}
.szr-szereplo{flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.szr-nev{white-space:nowrap}
.szr-ikon{inline-size:var(--space-32);block-size:var(--space-32)}
.szr-ikon .icon{width:var(--space-16);height:var(--space-16)}
}
}
@layer motion{
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline: view()){
.szr-feladat{animation:eng-gyul linear both;animation-timeline:view();animation-range:entry 10% cover 30%}
.szereplo-tabla td:nth-child(3) .szr-feladat{animation-range:entry 14% cover 33%}
.szereplo-tabla td:nth-child(4) .szr-feladat{animation-range:entry 18% cover 36%}
.szereplo-tabla td:nth-child(5) .szr-feladat{animation-range:entry 22% cover 39%}
.szereplo-tabla td:nth-child(6) .szr-feladat{animation-range:entry 26% cover 42%}
.szereplo-tabla td:nth-child(7) .szr-feladat{animation-range:entry 30% cover 45%}
}
}
}
@layer components{
.eng-folyo-meder{fill:none;stroke:var(--eng-viz-meder);stroke-width:20;stroke-linecap:round}
.eng-ut.eng-folyo{stroke:var(--eng-viz);stroke-width:9}
.eng-folyo-fodor{fill:none;stroke:var(--eng-viz-fodor);stroke-width:1.6;stroke-linecap:round;
stroke-dasharray:7 9 2 14 11 13;}
.eng-folyo-fodor-2{stroke-width:1.2;stroke-dasharray:3 17 14 22;opacity:.65}
.eng-csomo-halo{fill:var(--eng-csomo-halo)}
.eng-csomo-kor{stroke-width:3}
.eng-csomo-feny{fill:none;stroke:var(--eng-csomo-feny);stroke-width:1.5}
.eng-csomo-felt .eng-csomo-halo{fill:none}
.eng-csomo-felt .eng-csomo-feny{display:none}
.abra-svg .eng-csomo-szam{font-family:var(--font-body);font-size:18px;font-weight:600;
font-variant-numeric:lining-nums tabular-nums;}
.eng-abra .abra-svg text{font-variant-numeric:lining-nums}
}
@layer motion{
@media (prefers-reduced-motion:no-preference){
.eng-folyo-fodor{animation:eng-sodor 3.4s linear infinite}
.eng-folyo-fodor-2{animation-duration:5.8s}
}
}
@layer motion{
@media (prefers-reduced-motion:reduce){
.eng-folyo-fodor{display:none}
}
}
@layer components{
.hub-bevezeto{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
gap:var(--space-48);align-items:start;}
.hub-bevezeto-szoveg{display:grid;gap:var(--space-16);max-width:62ch}
.hub-bevezeto-szoveg > p{margin:0;color:var(--text-secondary)}
.hub-bevezeto-szoveg > .type-ui-body-strong{color:var(--text-primary)}
.hub-lenyeg{display:grid;gap:var(--space-16);
background:var(--hub-lenyeg-bg);
border:1px solid var(--card-border);border-left:4px solid var(--hub-lenyeg-jel);
border-radius:var(--card-radius);padding:var(--card-padding);
box-shadow:var(--card-shadow);}
.hub-lenyeg-cim{margin:0;color:var(--text-primary)}
.hub-lenyeg > p{margin:0;color:var(--text-secondary)}
.hub-kulcsadatok{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--space-16);margin:0;}
.hub-kulcsadat{display:flex;flex-direction:column-reverse;gap:var(--space-4);
padding:var(--space-16);border-radius:var(--r-md);background:var(--surface-muted);}
.hub-kulcsadat dt{color:var(--text-secondary)}
.hub-kulcsadat dd{margin:0;color:var(--text-primary)}
.hub-lenyeg-jegyzet{margin:0;color:var(--text-tertiary)}
.hub-lenyeg-jegyzet a{text-decoration:underline;text-underline-offset:2px}
.hub-tartalom{margin-top:var(--space-8);padding-top:var(--space-16);
border-top:1px solid var(--border);}
.hub-tartalom-cim{margin:0 0 var(--space-8);color:var(--text-tertiary)}
.hub-tartalom-lista{display:flex;flex-wrap:wrap;gap:var(--space-8);
margin:0;padding:0;list-style:none;}
.hub-tartalom-link{display:inline-flex;align-items:center;min-height:44px;
padding:0 var(--space-16);border-radius:var(--chip-radius);
background:var(--chip-bg);color:var(--chip-text);
font-family:var(--font-body);font-size:var(--type-ui-caption-size);font-weight:600;
text-decoration:none;
transition:background var(--dur-fast) var(--ease-out);}
.hub-tartalom-link:hover{background:var(--canvas);color:var(--text-primary)}
.hub-tartalom-link:focus-visible{outline:3px solid var(--border-focus);outline-offset:2px}
.hub-folyamat{margin:0 0 var(--space-48);display:grid;gap:var(--space-24)}
.hub-folyamat-fej{display:grid;gap:var(--space-8)}
.hub-folyamat-cim{margin:0;color:var(--text-primary)}
.hub-lepesek{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:var(--space-24);margin:0;padding:0;list-style:none;
counter-reset:none;}
.hub-lepes{position:relative;display:flex;flex-direction:column;gap:var(--space-8);
background:var(--card-bg);border:1px solid var(--card-border);
border-radius:var(--card-radius);padding:var(--space-24);
box-shadow:var(--card-shadow);}
.hub-lepes + .hub-lepes::before{content:"";position:absolute;
left:calc(-1 * var(--space-24) + var(--space-4));top:var(--space-64);
width:calc(var(--space-24) - var(--space-8));height:2px;
background:var(--abra-kiemeles);}
.hub-lepes-rajz{display:block;width:100%;height:auto;aspect-ratio:120 / 84;
background:var(--surface-muted);border-radius:var(--r-md);
padding:var(--space-8);}
.hub-lepes-szam{margin:var(--space-8) 0 0;color:var(--text-secondary)}
.hub-lepes-cim{margin:0;color:var(--text-primary)}
.hub-irany{margin:var(--space-4) 0 0;align-self:start;
padding:var(--space-4) var(--space-8);
border-radius:var(--r-md);
background:var(--badge-bg);color:var(--badge-text);
text-wrap:balance;}
.hub-lepes-szoveg{margin:0;color:var(--text-secondary)}
.hub-folyamat-jegyzet{margin:0;color:var(--text-tertiary)}
.hub-lepesek-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hub-pipa{stroke-dasharray:34;stroke-dashoffset:0}
.hub-kerdesek{grid-template-columns:repeat(2,minmax(0,1fr))}
.hub-kerdes{gap:var(--space-8)}
.hub-kerdes-cim{margin:0;color:var(--text-primary)}
.hub-kerdes-link{margin:auto 0 0}
.hub-hullo{opacity:.9}
.hub-bub{opacity:.85}
.hub-foto{margin:0;display:grid;gap:var(--space-8)}
.hub-foto img{display:block;width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover;
border-radius:var(--card-radius);background:var(--surface-muted);}
.hub-foto-felirat{margin:0;color:var(--text-secondary);max-width:62ch}
.hub-foto-par,.hub-foto-sor{display:grid;gap:var(--space-24);margin-block:var(--space-32);}
.hub-foto-par{grid-template-columns:repeat(2,minmax(0,1fr))}
.hub-foto-sor{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
.hub-foto-szeles{margin-block:var(--space-32)}
.hub-foto-szeles img{aspect-ratio:16 / 7}
.hub-tovabb{display:flex;margin:var(--space-16) 0 0}
.hub-tovabb + .hub-tovabb{margin-top:0}
.folyoszoveg + .compare-scroll.hub-adat-keret{margin-top:var(--space-16)}
.hub-tabla th[scope="row"]{text-align:left;color:var(--text-primary)}
.hub-tabla td{text-align:left;color:var(--text-secondary)}
.hub-tabla thead th{text-align:left}
.hub-adat-tabla{max-width:36rem}
.hub-adat-tabla th,.hub-adat-tabla td{text-align:left}
.hub-adat-tabla .hub-ertek{text-align:right;color:var(--text-primary);white-space:nowrap}
.hub-adat-tabla thead th:last-child{text-align:right}
.hub-kerdes-panel{grid-template-columns:minmax(0,1fr);gap:var(--space-16);
margin-block:var(--space-32);max-width:72ch;
padding:var(--space-32);}
.section-alt .hub-kerdes-panel{background:var(--surface)}
.hub-kerdes-panel h3{margin:0;color:var(--text-primary)}
.hub-elv{margin-block:var(--space-32);max-width:72ch;
padding:var(--space-16) var(--space-24);
background:var(--surface);
border-left:4px solid var(--hub-lenyeg-jel);
border-radius:0 var(--r-md) var(--r-md) 0;}
.hub-elv p{margin:0;color:var(--text-primary)}
.hub-bizalom{margin-top:var(--space-32);gap:var(--space-24)}
.hub-bizalom .trust-item{padding:var(--space-24);
background:var(--card-bg);border:1px solid var(--card-border);
border-radius:var(--card-radius);box-shadow:var(--card-shadow);}
.hub-bizalom .trust-item + .trust-item{border-left:1px solid var(--card-border)}
.hub-bizalom:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.hub-feltetelek{margin-block:var(--space-24);padding:0;list-style:none}
.hub-cimkek{display:flex;flex-wrap:wrap;gap:var(--space-8);
margin:var(--space-16) 0 var(--space-24);padding:0;list-style:none;}
.hub-utem,.hub-koltseg{margin-block:var(--space-32);padding:var(--card-padding);
background:var(--card-bg);border:1px solid var(--card-border);
border-radius:var(--card-radius);box-shadow:var(--card-shadow);}
.hub-koltseg-cim{margin:0;color:var(--text-primary)}
.hub-utem figcaption,.hub-koltseg figcaption{display:grid;gap:var(--space-4)}
.hub-utem-sav{position:relative;overflow:hidden;
display:grid;grid-template-columns:7fr 3fr;
height:var(--space-40);border-radius:var(--r-md);
border:1px solid var(--card-border);}
.hub-utem-be{background:var(--hub-utem-be)}
.hub-utem-ki{background:repeating-linear-gradient(135deg,var(--hub-utem-ki) 0 8px,transparent 8px 16px),var(--surface);}
.hub-utem-skala{display:grid;grid-template-columns:7fr 3fr;gap:var(--space-8);
margin:var(--space-8) 0 0;padding:0;list-style:none;color:var(--text-secondary);}
.hub-utem-skala strong{color:var(--text-primary)}
.hub-utem-adatok{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-16);
margin:var(--space-24) 0 0;}
.hub-utem-adatok > div{display:flex;flex-direction:column-reverse;gap:var(--space-4);
padding:var(--space-16);border-radius:var(--r-md);background:var(--surface-muted);}
.hub-utem-adatok dt{color:var(--text-secondary)}
.hub-utem-adatok dd{margin:0;color:var(--text-primary)}
.hub-szamitas{margin-block:var(--space-32);max-width:48rem}
.hub-szamitas h3{margin:0 0 var(--space-16);color:var(--text-primary)}
.hub-tetelek{margin:0;display:grid}
.hub-tetel{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-16);
padding-block:var(--space-8);border-bottom:1px solid var(--border);}
.hub-tetel dt{color:var(--text-secondary)}
.hub-tetel dd{margin:0;color:var(--text-primary);text-align:right;white-space:nowrap}
.hub-koltseg-sorok{display:grid;gap:var(--space-24);margin:var(--space-24) 0 0;padding:0;list-style:none;}
.hub-koltseg-sor{display:grid;grid-template-columns:minmax(0,1fr) auto;
column-gap:var(--space-16);row-gap:var(--space-8);align-items:baseline;}
.hub-koltseg-nev{margin:0;color:var(--text-primary)}
.hub-koltseg-reszlet{color:var(--text-tertiary);font-weight:400}
.hub-koltseg-osszeg{margin:0;color:var(--text-primary);white-space:nowrap}
.hub-koltseg-egyseg{color:var(--text-tertiary)}
.hub-koltseg-sav{grid-column:1 / -1;display:block;width:100%;height:var(--space-24);
border-radius:var(--r-md);overflow:hidden;
background:var(--canvas);box-shadow:inset 0 0 0 1px var(--border);}
.hub-sav-aram{fill:var(--hub-sav-aram)}
.hub-sav-zsak{fill:var(--hub-sav-zsak)}
.hub-sav-membran{fill:var(--hub-sav-membran)}
.hub-jelek{display:flex;flex-wrap:wrap;gap:var(--space-8) var(--space-24);
margin:var(--space-24) 0 0;padding:0;list-style:none;}
.hub-jel{display:inline-flex;align-items:center;gap:var(--space-8);color:var(--text-secondary)}
.hub-jel-minta{display:inline-block;width:var(--space-16);height:var(--space-16);
border-radius:var(--r-md);}
.hub-jel-minta.hub-sav-aram{background:var(--hub-sav-aram)}
.hub-jel-minta.hub-sav-zsak{background:var(--hub-sav-zsak)}
.hub-jel-minta.hub-sav-membran{background:var(--hub-sav-membran)}
.hub-esetek{margin-top:var(--space-24)}
.hub-eset{display:flex;flex-direction:column}
.hub-eset-link{margin:auto 0 0;padding-top:var(--space-8)}
.hub-jogi{margin:0 0 var(--space-24);display:grid;gap:var(--space-16);max-width:72ch}
.hub-jogi-tetel{display:grid;gap:var(--space-4);
padding-left:var(--space-16);border-left:2px solid var(--border);}
.hub-jogi-tetel dt{color:var(--text-primary)}
.hub-jogi-tetel dd{margin:0;color:var(--text-secondary)}
.hub-szerzo{margin-top:var(--space-32);padding:var(--space-24);max-width:72ch;
border-radius:var(--card-radius);background:var(--surface-muted);
display:grid;gap:var(--space-8);}
.hub-szerzo p{margin:0;color:var(--text-secondary)}
.hub-szerzo-datum{color:var(--text-tertiary)}
}
@layer responsive{
@media (max-width:1024px){
.hub-bevezeto{grid-template-columns:minmax(0,1fr);gap:var(--space-32)}
.hub-lepes + .hub-lepes::before{display:none}
.hub-bizalom:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
}
}
@layer responsive{
@media (max-width:640px){
.hub-kulcsadatok{grid-template-columns:minmax(0,1fr)}
.hub-utem-adatok{grid-template-columns:minmax(0,1fr)}
.hub-bizalom,
.hub-bizalom:has(> :nth-child(3):last-child){grid-template-columns:minmax(0,1fr);row-gap:var(--space-16)}
.hub-foto-szeles img{aspect-ratio:3 / 2}
.hub-tetel{flex-direction:column;gap:0}
.hub-tetel dd{text-align:left}
.hub-koltseg-sor{grid-template-columns:minmax(0,1fr)}
}
}
@layer motion{
@media (prefers-reduced-motion:no-preference){
.hub-hullo{transform-box:fill-box;transform-origin:center;
animation:hub-hullo 2.8s ease-in infinite;
animation-delay:calc(var(--i,0) * 460ms);}
.hub-pipa{animation:hub-pipa 900ms var(--ease-out) both}
.hub-bub{transform-box:fill-box;transform-origin:center;
animation:hub-bub 2.6s ease-in infinite;
animation-delay:calc(var(--i,0) * 620ms);}
.hub-bub.hub-bub-magas{--ut:34px;animation-duration:3.4s}
.hub-pulzus{transform-box:fill-box;transform-origin:center;
animation:hub-pulzus 3.6s ease-in-out infinite;
animation-delay:calc(var(--i,0) * 450ms);}
.hub-utem-sav::after{content:"";position:absolute;inset:0;
background:linear-gradient(to right,var(--text-primary) 0 3px,transparent 3px);
transform:translateX(0);
animation:hub-utem 10s linear infinite;}
}
}
@layer motion{
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){
.hub-koltseg-sav{animation:hub-sav linear both;
animation-timeline:view();
animation-range:entry 10% cover 35%;}
}
}
}