#start-section{ }


section section:not(#fej-section, #fej-text-section) {
	max-width:1200px;
	margin:0 auto;
	padding:50px;
	margin-top:100px;
}

section section {
    background: var(--bgsec);
    backdrop-filter: blur(8px) grayscale(0.5);
}

.gb-container {
	display:block;
}

.section-heading-text {
    font-size: 32px;
    margin-bottom: 20px;
    text-align: left;
    color: #af0203;
}

section section:not(#maps-section, #references-section) img {
    box-shadow: 7px 9px 11px 0px #00000021;
    border: 1px solid #d9d9d9;
    padding: 5px;
}

#fej-section {
	width: 100% !important;
}

#fej-text-section {
    text-align: left;
	margin-top: -150px !important;
	padding:0px !important;
}

#fej-text-section .hero-headline{
	text-align:right;
	font-weight:800;
	font-size:clamp(28px, 6.5vw, 30px);
	line-height:1.8;
	letter-spacing:-0.02em;
	margin:0 0 1rem;
	text-wrap:balance;
	animation:hero-fade-up .7s ease-out both;
    padding: 20px;
	color:black;
}

#fej-text-section .hero-headline .sub{
	display:block;
	font-weight:700;
	font-size:clamp(18px, 2.6vw, 28px);
	opacity:.95;
}

#fej-text-section .hero-headline .accent{
	background: linear-gradient(90deg, #930505, #ff0000);
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
	position:relative;
	white-space:nowrap;
}

#fej-text-section .hero-headline .accent::after{
	content:"";
	position:absolute;
	left:0;
	bottom:-0.14em;
	height:0.12em;
	width:100%;
	background:linear-gradient(90deg, #ff4d3a, #d32525);
	border-radius:1px;
	transform-origin:left center;
	transform:scaleX(0);
	animation:hero-underline 2s 1s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes hero-fade-up{
	from{opacity:0; transform:translateY(12px);}
	to{opacity:1; transform:none;}
}

@keyframes hero-underline{
	to{transform:scaleX(1);}
}

@media (max-width: 900px){
	#fej-text-section .hero-headline{
		text-align:center;
		font-size:clamp(24px, 8vw, 20px);
		margin-top: -180px;
		margin-left:-5px;
	}

	#fej-text-section .hero-headline .accent{
		white-space:normal;
	}

	section section:not(#fej-text-section) {
		padding:5px;
	}
}

@media (max-width: 600px){
	#fej-text-section .hero-headline{
		text-align:center;
		font-size:clamp(24px, 8vw, 20px);
		margin-top: -260px;
		margin-left:-5px;
	}

	#fej-text-section .hero-headline .accent{
		white-space:normal;
	}
}

@media (prefers-reduced-motion: reduce){
	#fej-text-section .hero-headline,
	#fej-text-section .hero-headline .accent::after{
		animation:none;
	}
}

#footer-section {
    background-color: #000;
    color: #c7c7c7;
	margin-top:20px;
	font-size:16px
}

.fej-title {
	margin-bottom: 20px;
	position: relative;
	z-index: 1;
	padding-top: 30px;
	text-transform:uppercase
}

.fej-title::before {
    position: absolute;
    top: -20px;
    font-size: 4.4rem;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.05);
    z-index: -1;
    white-space: nowrap;
    transform: translateX(+10px);
	text-align:center
}

.fej-image-container {
    width: 100%;
    height: 600px;
    margin-top: 60px;
}

.fej-image {
    width: 100%;
    height: 110%;
    object-fit: cover;
	object-position: center 30%;
}

.text-container {
    margin: 0 auto;
}

.section-heading-h1 p {
    margin: 0px;
    margin-top: 100px;
    text-transform: uppercase;
    text-align: right;
	color:white !important
}

.index .section-heading-h1 {
	position: absolute;
    margin: 68px auto;
    left: calc(50%);
    transform: translateX(-50%);
    color: #1e75c1;
    text-shadow: 1px 2px 3px #d3d3d3;
	display:none
}

.section-text {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 20px;
}


.property-section{
	max-width:1200px;
}

.property-content{
	display:block;
	line-height:1.6;
	text-align: justify;
	hyphens: auto;
}

.property-image{
	float:left;
	width:min(40%, 420px);
	height:auto;
	margin:0 24px 16px 0;
	shape-outside: inset(0 round 8px);
	shape-margin: 8px;
}

.property-content::after{
	content:"";
	display:block;
	clear:both;
}

@media (max-width:768px){
	.property-image{
		float:none;
		width:100%;
		margin:0 0 16px 0;
	}

	.fej-image {
		object-position: 30%;
	}
}

.references-container{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:20px;
	max-width:1300px;
	margin:0 auto;
	align-items:stretch;
}

.reference-card{
	overflow:hidden;
	flex:1 1 calc(25% - 20px);
	max-width:calc(25% - 20px);
	display:flex;
	flex-direction:column;
    background-size: cover;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 330px;
    box-sizing: border-box;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
}

.reference-actions{
	margin-top:auto;
}

.reference-card button{
	width:100%;
	text-align:center;
	background-color:#af0203;
	color:#fff;
	transition:background-color .3s ease;
}

.reference-card button:hover {
    background-color: #910922;
	cursor:pointer
}

.fade-image {
	position: relative;
	display: inline-block;
}

.fade-image::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	background: var(--kiscard_img);
}

.reference-image{
	display:block;
	width: calc(100% - 0px);
	height:250px;
	object-fit:cover;
	border:none !important;
	-webkit-mask-image:linear-gradient(to bottom, #000 70%, transparent 100%);
	mask-image:linear-gradient(to bottom, #000 70%, transparent 100%);
}

.reference-content{
	padding:10px;
	display:flex;
	flex-direction:column;
	flex:1;
	margin-top:0px;
}

.reference-text{
	font-size:14px;
	margin-bottom:10px;
}

.reference-author{
	display:block;
	font-size:18px;
	font-weight:bold;
	text-align:center;
	margin:10px 0 0px;
	line-height:1.25;
	min-height: calc(1.25em * 2);
	overflow:hidden;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}

.reference-author .last-word {
	color: #d32525;
}

@media (max-width:600px){
	.reference-author{
		font-size:18px;
		line-height:1.3;
		min-height: calc(1.3em * 2);
		margin: 10px 0 -27px;
	}
}

@media (max-width: 992px){
	.reference-card{
		flex:1 1 calc(50% - 20px);
		max-width:calc(50% - 20px);
	}

	.reference-image {
		height:350px;
	}
}

@media (max-width: 600px){
	.reference-card{
		flex:1 1 calc(90% - 20px);
		max-width:100%;
	}
}

table {
	width:100%
}

table td {
	border:1px dotted var(--tdborder);
	padding:6px 8px;
	vertical-align:top;
}

li {
	line-height:1.6
}

.container li {
	text-align: justify;
	hyphens:auto;
}

.form-card{border:1px solid var(--border);border-radius:16px;padding:1.25rem;margin-top:.5rem}
.form-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:720px){.form-grid{grid-template-columns:1fr 1fr}}
.form-field label{display:block;font-weight:600;margin-bottom:.35rem}
.form-field input,.form-field textarea{width:100%;border:1px solid #22262f;border-radius:10px;padding:.75rem .9rem;color:var(--text);outline:none}
.form-field textarea{min-height:110px;resize:vertical}
.form-field small{color:var(--muted)}
.recipient{border:1px dashed #2a2f3a;border-radius:12px;padding:1rem}
.recipient h3{margin:.2rem 0 .6rem;font-size:1rem;color:var(--accent)}
.print-note{font-size:.9rem;color:var(--muted);margin-top:.5rem}

.work-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1300px;
    margin: 0 auto;
}

.work-card {
    background-color: white;
    overflow: hidden;
    margin-bottom: 20px;
    flex: 1 1 calc(50% - 20px);
    max-width: calc(50% - 20px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.full-width-card {
    flex: 1 1 100% !important;
    max-width: 100% !important;
}

.work-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
	margin-top:15px;
}

.work-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.work-title {
    font-size: 25px;
	margin-bottom:0px;
}

.work-description, .work-content p {
    font-size: 16px;
    color: #555;
	margin-top:0px;
}

.work-button {
    background-color: #af0203;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 14px;
    display: inline-block;
    align-self: flex-end;
    margin-top: auto;
}

.jobs-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
}

.jobs-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    border-bottom: 1px solid #eeeeee;
}

.jobs-image {
    width: 444px;
    object-fit: cover;
}

.jobs-content {
    display: flex;
    flex-direction: column;
}

.jobs-title {
    font-size: 25px;
    margin-bottom: 10px;
	margin-top: 0;
}

.jobs-description {
    font-size: 16px;
    color: #555;
	text-align:left
}

.pay-heading {
    font-size: 2em;
    margin-bottom: 20px;
    text-align: left;
	text-transform:uppercase
}

@media (max-width: 768px) {
    .jobs-item {
        flex-direction: column;
        align-items: center;
    }

    .jobs-image {
        width: 100%;
        height: auto;
        margin-bottom: 15px;
    }

    .jobs-content {
        text-align: left;
    }
}

#maps-section h1 {
    font-size: 2em;
    margin-bottom: 20px;
    text-align: left;
	text-transform:uppercase
}

#map {
    width: 100%;
    height: 500px;
    border: 1px solid #eeeeee;
}

#contact-form {
	width:90%;
	margin:0 auto
}

.form-container {
    max-width: 1300px;
    margin: 0 auto;
	padding-bottom: 30px;
}

.section-heading {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: left;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #eeeeee;
    box-sizing: border-box;
	background: inherit;
	color: var(--txt)
}

.form-group a {
	color:var(--footer-link);
	cursor:pointer
}

button[type="submit"] {
    padding: 10px 20px;
    border: none;
    background-color: #af0203;
    color: white;
    cursor: pointer;
	border-radius:unset
}

#ingatlan-nav-section {
    padding: 40px 20px;
    text-align: center;
}

#ingatlan-nav-section .nav-links {
    display: flex;
    justify-content: center;
    gap: 20px;
}

#ingatlan-nav-section .nav-item {
    background-color: #af0203;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

#ingatlan-nav-section .nav-item:hover {
    background-color: #910922;
}

@media (max-width: 768px) {
    #ingatlan-nav-section .nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    #ingatlan-nav-section .nav-item {
        width: 90%;
        text-align: center;
    }
}

.two-col{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:24px;
	align-items:start;
}

.two-col img, .property-content div>img{
    box-shadow: unset !important;
    border: 0px solid #d9d9d9 !important;
    padding: 5px;
	filter: var(--filter);
}

@media (max-width: 768px){
	.two-col{ grid-template-columns: 1fr; }

}

.checklist{ list-style:none; margin:0; padding:0; }
.checklist li{ position:relative; padding-left:28px; margin:0 0 8px; text-align:left }
.checklist li::before{
	content:"✓"; position:absolute; left:0; top:0.1em; font-weight:700; color:#13cd68;
}

section button, #htesztStartBtn, .btn {
	text-align:center;
	background-color:#af0203;
	color:#fff;
	transition:background-color .3s ease;
	border: none;
	font-size: 20px;
	position: relative;
	overflow: hidden;
}

section button:hover, .btn:hover {
    background-color: #850202;
	cursor:pointer
}

section button, .btn {
	position: relative;
	overflow: hidden;
}

section button::before,
.btn::before {
	content: "";
	position: absolute;
	top: 0;
	left: -75%;
	width: 50%;
	height: 100%;
	background: linear-gradient(
		120deg,
		rgba(231, 48, 49, 0) 0%,
		rgba(231, 48, 49, 0.6) 50%,
		rgba(231, 48, 49, 0) 100%
	);
	transform: skewX(-20deg);
}

section button:hover::before,
.btn:hover::before {
	animation: shine 1s forwards;
}

@keyframes shine {
	from { left: -75%; }
	to { left: 125%; }
}

/* ===== Hatékonyság teszt – kérdés/válasz kártyák ===== */
#hteszt-section{
	--ht-accent: #127cc4;
	--ht-border: #e5e7eb;
	--ht-card-bg: #ffffff;
	--ht-soft: 0 6px 24px rgba(0,0,0,.06);
	--ht-radius: 0px;
}

#hteszt-section .form-container {
	max-width:700px
}

/* Kérdés kártya */
#htesztQuestionWrap .ht-card{
	border: 1px solid var(--ht-border);
	border-radius: var(--ht-radius);
	box-shadow: var(--ht-soft);
	padding: 18px 20px;
}

/* Sorszám */
#htesztQuestionWrap .ht-qnum{
	font-weight: 600;
	color: #6b7280;
	margin-bottom: 4px;
	font-size:larger;
}

/* Kérdés szöveg (h2 vagy h4 esetén is) */
#htesztQuestionWrap .ht-qtext,
#htesztQuestionWrap h4.ht-qtext{
	font-size: 1.15rem;
	line-height: 1.4;
	margin: 0 0 12px 0;
}

/* Opciók rácsban */
#htesztQuestionWrap .ht-opts{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}

/* Egy opció (label). A radio input rejtve, a <span> a kártya. */
#htesztQuestionWrap .ht-opt{
	display: block;
	position: relative;
	cursor: pointer;
	user-select: none;
}

/* Rádió – vizuálisan rejtve, de elérhető */
#htesztQuestionWrap .ht-opt input{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}

/* A látható kártya */
#htesztQuestionWrap .ht-opt span{
	display: flex;
	align-items: center;
	gap: 10px;
	border: 2px solid #5f5f5f52;
	padding: 12px 14px;
	font-weight: 500;
	transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease, background .15s ease;
}

/* Kis "rádió pötty" az elején */
#htesztQuestionWrap .ht-opt span::before{
	content: "";
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid var(--ht-border);
	flex: 0 0 16px;
	transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* Hover effekt */
#htesztQuestionWrap .ht-opt:hover span{
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* Fókusz (billentyűzet) – a label kap keretet */
#htesztQuestionWrap .ht-opt:focus-within span{
	outline: 3px solid color-mix(in srgb, var(--ht-accent) 35%, transparent);
	outline-offset: 2px;
}

/* Kiválasztott állapot */
#htesztQuestionWrap .ht-opt input:checked + span{
	border-color: var(--ht-accent);
	background: color-mix(in srgb, var(--ht-accent) 6%, #ffffff00);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--ht-accent) 15%, transparent);
}

#htesztQuestionWrap .ht-opt input:checked + span::before{
	background: var(--ht-accent);
	border-color: var(--ht-accent);
	box-shadow: inset 0 0 0 3px #fff;
}

/* Letiltott (ha valaha használnád) */
#htesztQuestionWrap .ht-opt input:disabled + span{
	opacity: .6;
	cursor: not-allowed;
}

/* Navigációs gombok távolság */
#hteszt-section .hteszt-nav{ margin-top: 18px; }

/* Mobil finomhangolás */
@media (max-width: 520px){
	#htesztQuestionWrap .ht-card{ padding: 14px; }
	#htesztQuestionWrap .ht-opts{ grid-template-columns: 1fr; }
	#htesztQuestionWrap .ht-qtext,
	#htesztQuestionWrap h4.ht-qtext{ font-size: 1.05rem; }
}

/* Progress sáv animáció */
#hteszt-section .hteszt-progress-bar{
	transition: width .9s cubic-bezier(.22,.61,.36,1);
}

#hteszt-section .hteszt-progress{
	position: sticky;
	top: 8px;
	z-index: 5;
	padding: 6px 0;
}

@keyframes ht-shake{
	0%,100%{transform:translateX(0)}
	25%{transform:translateX(-4px)}
	75%{transform:translateX(4px)}
}

/*#hteszt-section input.ht-shake{ animation: ht-shake .25s ease; }*/


/* Kérdéskártya átmenet */
#htesztQuestionWrap .ht-anim{
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .45s ease, transform .45s ease;
}

#htesztQuestionWrap .ht-anim.ht-visible{
	opacity: 1;
	transform: translateY(0);
}

/* Hibaszínek a már használt pirosodra hangolva */
#hteszt-section input.ht-invalid{
	border-color: #c41212 !important;
	box-shadow: 0 0 0 3px rgba(196,18,18,.12);
}

#hteszt-section label.ht-invalid{
	color: #c41212;
}

/* Hibaüzenet a mezők alatt */
#hteszt-section .ht-field-error{
	margin-top: 6px;
	font-size: .85rem;
	color: #c41212;
}

/* Start gomb alatti info */
#hteszt-section .ht-hint{
	margin-top: 8px;
	font-size: .9rem;
	color: #6b7280;
}

#hte
szt-section .ht-hint.ht-has-error{
	color: #c41212;
}

/* ===== Üzenet modál ===== */
#htMsgModal{
	position: fixed;
	inset: 0;
	display: none;
	z-index: 1000;
}
#htMsgModal.is-open{ display:block; }

#htMsgModal .ht-modal__backdrop{
	position:absolute; inset:0;
	background: rgba(0,0,0,.45);
}

#htMsgModal .ht-modal__dialog{
	position:relative;
	width:min(560px, 92vw);
	margin: 10vh auto 0;
	background:#fff;
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(0,0,0,.25);
	padding: 18px 18px 14px;
	outline: none;
	transform: translateY(10px) scale(.98);
	opacity: 0;
	transition: transform .18s ease, opacity .18s ease;
	border: 6px solid #c41212;
}

#htMsgModal.is-open .ht-modal__dialog{
	transform: translateY(0) scale(1);
	opacity: 1;
}

#htMsgModal .ht-modal__close{
	position:absolute; top:10px; right:10px;
	width:36px;
	height:36px;
	border-radius:8px;
	border:1px solid #eee;
	background:#fff;
	cursor:pointer;
	font-size:20px;
	line-height:1;
}

#htMsgModal h3{
	margin: 4px 0 8px;
	font-size:1.1rem;
}

#htMsgModal p{
	margin: 0 0 10px;
	line-height:1.5;
}

#htMsgModal .ht-modal__actions{
	text-align:right;
	margin-top:8px;
	display: none;
}

/* Típus színezések */
#htMsgModal.is-error  .ht-modal__dialog{ border-color:#c41212; }
#htMsgModal.is-info   .ht-modal__dialog{ border-color:#af0203; }
#htMsgModal.is-success .ht-modal__dialog{ border-color:#16a34a; }

@media (max-width:520px){
	#htMsgModal .ht-modal__dialog{
		margin-top: 12vh;
		padding:16px;
	}
}
