/* =========================================================
   KÖZBESZERZÉSEK NÉMETORSZÁGBAN — kozbeszerzes.de
   Sötét / arany / piros prémium téma (a jóváhagyott főoldal alapján)
   ========================================================= */

:root{
  --navy:#0c1c31; --navy2:#0a1526; --ink:#0a0c10;
  --gold1:#f6e39a; --gold2:#d4af53; --gold3:#a9812f;
  --gold-grad:linear-gradient(135deg,#f9ecab 0%,#e2c368 42%,#b2842f 100%);
  --gold-h:linear-gradient(90deg,#f6e39a 0%,#e2c368 50%,#b2842f 100%);
  --red:#8c1c1c; --red2:#b02525;
  --text:#f5efe2; --muted:#b9c2cf; --line:#223247;
  --font:"Inter",system-ui,Arial,sans-serif; --disp:"Playfair Display",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--text);min-height:100vh;
  background:linear-gradient(180deg,#0a0f18,#0a0c10)}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 30px}

/* ===================== FEJLÉC ===================== */
.hdr{position:relative;height:150px;display:flex;flex-direction:column;background:#0d1220}

/* színátmenetes csík a menü fölött — széltől szélig */
.hdr-strip{height:14px;width:100%;
  background:linear-gradient(90deg,
    var(--navy) 0 30%, #e2c368 30% 32.5%, var(--red) 32.5% 60%,
    #e2c368 60% 62.5%, #c9a24b 62.5% 100%)}

/* menü — sötét sáv, felül-alul arany szegély, a plakett után balra rendezve */
.menu-area{flex:1;display:flex;align-items:center}
.menu{width:100%;height:100%;display:flex;align-items:center;justify-content:flex-start;gap:22px;
  padding-left:calc(46% - 10px);   /* a plakett ferde éle miatt itt már szabad a hely */
  border-width:4px 0;border-style:solid;
  border-image:linear-gradient(90deg,#f6e39a,#e2c368,#b2842f) 1}
.menu a{color:#efe7d4;font-weight:800;font-size:14.5px;letter-spacing:.01em;white-space:nowrap}
.menu a:hover,.menu a.active{color:var(--gold1)}

.lang-switch{display:flex;align-items:center;gap:5px;margin-left:4px}
.lang-switch button{font:inherit;font-weight:800;font-size:13px;color:#c9c2b1;background:none;
  border:0;cursor:pointer;padding:2px 3px;letter-spacing:.04em}
.lang-switch button:hover{color:var(--gold1)}
.lang-switch button.active{color:var(--gold1);text-decoration:underline;text-underline-offset:4px}
.lang-switch i{color:#6b6353;font-style:normal}

.menu a.btn-reg{margin-left:auto;margin-right:22px;
  background:linear-gradient(180deg,#a52222,#7c1618);color:#fdeecf;
  font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  padding:9px 16px;border-radius:6px;border:1px solid var(--gold2)}
.menu a.btn-reg:hover,.menu a.btn-reg.active{color:#fff;filter:brightness(1.12)}

/* logó-plakett — bal szélről, átlós jobb éllel, piros szegéllyel; rálóg a tartalomra */
.logo-box{position:absolute;left:0;top:0;z-index:6;
  width:46%;min-width:540px;height:210px;
  background:var(--red);
  clip-path:polygon(0 0, 100% 0, calc(100% - 150px) 100%, 0 100%);
  display:flex;align-items:center;justify-content:flex-end;
  padding-left:44px;padding-right:130px;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.45))}
.logo-box::before{content:"";position:absolute;inset:0 0 10px 0;
  clip-path:polygon(0 0, calc(100% - 16px) 0, calc(100% - 158px) 100%, 0 100%);
  background:var(--gold-grad)}
.logo-box .lb{position:relative;top:0;left:-50px;z-index:2;display:flex;flex-direction:column;
  align-items:stretch;gap:18px}
.logo-box img{height:115px;display:block}
.logo-box .slogan{display:none;justify-content:space-between;align-items:center;
  font-size:12.5px;font-weight:800;letter-spacing:.14em;color:#41300c;white-space:nowrap}
/* átfutó arany csillogás */
.logo-box::after{content:"";position:absolute;top:0;bottom:10px;left:-65%;width:45%;
  z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(255,252,235,.08) 30%,
    rgba(255,252,235,.55) 50%,rgba(255,252,235,.08) 70%,transparent 100%);
  transform:skewX(-18deg);animation:lbshine 4.2s ease-in-out infinite}
@keyframes lbshine{0%{left:-65%}55%{left:115%}100%{left:115%}}
@media (prefers-reduced-motion:reduce){.logo-box::after{animation:none;display:none}}

/* ===================== FŐOLDAL ===================== */
.banner{aspect-ratio:1584/672;height:auto;position:relative;container-type:inline-size;
  background:#0a0f18 url("../img/banner.jpg") center/cover no-repeat}
/* élő headline a banner sötét bal mezőjén */
.banner-copy{position:absolute;left:9%;top:50%;transform:translateY(-50%);width:33%;z-index:2}
.banner-copy h1{font-family:var(--disp);font-weight:900;font-size:3.15cqw;line-height:1.02;
  color:#f5efe2;letter-spacing:-.01em;text-transform:uppercase}
.banner-copy h1 .g{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.banner-copy .sub{margin-top:1.3cqw;font-size:1.15cqw;line-height:1.5;color:#d9d3c4;max-width:40ch}
.banner-copy .tag{margin-top:.7cqw;font-size:1.1cqw;font-weight:800;color:var(--gold1)}
.banner-copy .btn-red{margin-top:1.8cqw;font-size:1cqw;padding:1cqw 2.2cqw}
.gold-rule{height:5px;width:100%;background:var(--gold-h)}

.cards{position:relative;z-index:5;margin-top:-110px}
.cards .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{position:relative;height:220px;border:3px solid transparent;background:linear-gradient(180deg,var(--navy),var(--navy2)) padding-box,var(--gold-grad) border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  box-shadow:0 18px 40px rgba(0,0,0,.5);transition:transform .18s}
.card:hover{transform:translateY(-4px)}
.card .ic{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;
  border:1.5px solid var(--gold2);color:var(--gold1);font-size:25px;margin-bottom:14px}
.card h3{font-weight:800;font-size:19px;color:#f3ead3;letter-spacing:.02em}
.card .en{color:var(--gold2);font-weight:700;font-size:12.5px;letter-spacing:.09em;
  margin-top:5px;text-transform:uppercase}

/* ---- Arany keretek csillogása: csak a 3px-es keretcsíkon fut végig a fény ---- */
.card::after,.svc::after,.flow-card::after,.form-card::after{
  content:"";position:absolute;inset:-3px;border:3px solid transparent;pointer-events:none;z-index:3;
  background:linear-gradient(115deg,transparent 0 38%,rgba(255,252,235,.85) 50%,transparent 62% 100%) border-box;
  background-size:320% 100%;background-repeat:no-repeat;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:ringshine 5.6s ease-in-out infinite}
.svc::after{inset:-3px}
@keyframes ringshine{0%{background-position:160% 0}50%{background-position:-60% 0}100%{background-position:-60% 0}}
.cards .card:nth-child(2)::after,.svc-grid .svc:nth-child(2)::after,.flow-step.s2 .flow-card::after{animation-delay:1.4s}
.cards .card:nth-child(3)::after,.svc-grid .svc:nth-child(3)::after,.flow-step.s3 .flow-card::after{animation-delay:2.8s}
@media (prefers-reduced-motion:reduce){.card::after,.svc::after,.flow-card::after,.form-card::after{animation:none;display:none}}

/* ===================== ALOLDAL FEJ ===================== */
.page-hero{position:relative;padding:118px 0 44px;
  background:radial-gradient(900px 380px at 78% 30%,#16233a 0%,rgba(22,35,58,0) 60%),
    linear-gradient(180deg,#0c1424,#0a0f18)}
.eyebrow{display:inline-block;color:var(--gold1);font-weight:800;letter-spacing:.16em;
  font-size:12.5px;text-transform:uppercase;margin-bottom:12px}
.page-hero h1,.section-title{font-family:var(--disp);font-weight:900;
  font-size:clamp(30px,3.6vw,48px);line-height:1.05;color:#f5efe2}
.lead{color:var(--muted);font-size:18px;line-height:1.55;max-width:60ch;margin-top:14px}
.section{padding:56px 0}
.section.tight{padding-top:24px}

/* fotós fejléc-sáv — a plakett rálóg a bal felső sarkára, mint a főoldalon */
.photo-hero{position:relative;height:400px;background:#0a0f18 center/cover no-repeat;overflow:hidden;isolation:isolate}
.photo-hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,rgba(10,15,24,.72) 0%,rgba(10,15,24,.25) 45%,rgba(10,15,24,.45) 100%),
             linear-gradient(180deg,rgba(10,15,24,.15) 0%,rgba(10,15,24,0) 40%,rgba(10,15,24,.75) 100%)}
.photo-hero.ph-svc{background-image:url("../img/svc-banner.jpg")}
.photo-hero.ph-arak{background-image:url("../img/arak-banner.jpg");background-position:center 55%}
/* Kapcsolat: 4 kép váltakozik lassú fade-del (tiszta CSS) */
.photo-hero.ph-kapcs{background-image:none;background:#0a0f18}
.ph-slides{position:absolute;inset:0;z-index:0}
.ph-slides span{position:absolute;inset:0;background:center 55%/cover no-repeat;opacity:0;
  transform:scale(1);will-change:opacity,transform;
  animation:phfade 20s ease-in-out infinite, phzoom 20s linear infinite}
.ph-slides span:nth-child(1){background-image:url("../img/kapcs-1.jpg");animation-delay:0s}
.ph-slides span:nth-child(2){background-image:url("../img/kapcs-2.jpg");animation-delay:5s}
.ph-slides span:nth-child(3){background-image:url("../img/kapcs-3.jpg");animation-delay:10s}
.ph-slides span:nth-child(4){background-image:url("../img/kapcs-4.jpg");animation-delay:15s}
/* 4 kép × 5 s = 20 s ciklus; minden kép 1,5 s alatt úszik be, 5 s-ig látszik, aztán kiúszik */
@keyframes phfade{0%{opacity:0}7.5%{opacity:1}25%{opacity:1}32.5%{opacity:0}100%{opacity:0}}
/* enyhe, folyamatos kifelé zoom (közeliből távolodik) amíg a kép látszik, aztán visszaáll */
@keyframes phzoom{0%{transform:scale(1.08)}32.5%{transform:scale(1)}32.6%{transform:scale(1.08)}100%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.ph-slides span{animation:none;transform:none}.ph-slides span:nth-child(1){opacity:1}}

/* ===================== SZOLGÁLTATÁSOK ===================== */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.svc{position:relative;border:3px solid transparent;
  background:linear-gradient(180deg,var(--navy),var(--navy2)) padding-box,var(--gold-grad) border-box;
  padding:0;box-shadow:0 18px 40px rgba(0,0,0,.45);display:flex;flex-direction:column;overflow:hidden}
.svc-img{position:relative;height:190px;overflow:hidden}
.svc-img img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.9) contrast(1.05);transition:transform .5s}
.svc:hover .svc-img img{transform:scale(1.04)}
.svc-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,28,49,0) 55%,var(--navy) 100%)}
.svc-body{padding:0 30px 32px}
.svc-body .ic{margin-top:-29px;position:relative;z-index:2;background:linear-gradient(180deg,var(--navy),var(--navy2))}
.svc .ic{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;
  border:1.5px solid var(--gold2);color:var(--gold1);font-size:25px;margin-bottom:18px}
.svc h3{font-weight:800;font-size:20px;color:#f3ead3;margin-bottom:12px}
.svc p{color:var(--muted);font-size:14.5px;line-height:1.7;text-align:justify;hyphens:auto;-webkit-hyphens:auto;white-space:pre-line}

/* ===================== BEMUTATKOZÁS ===================== */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:start}
.about-media{padding:5px;background:var(--gold-grad);
  clip-path:polygon(10% 0,100% 0,100% 90%,90% 100%,0 100%,0 10%);
  box-shadow:0 20px 50px rgba(0,0,0,.5)}
.about-media img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  clip-path:polygon(10% 0,100% 0,100% 90%,90% 100%,0 100%,0 10%)}
.about p{color:var(--muted);font-size:15.5px;line-height:1.75;margin-bottom:16px;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.stats{display:flex;gap:40px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.stat .num{font-family:var(--disp);font-size:36px;font-weight:800;color:var(--gold1);line-height:1}
.stat .lbl{font-size:12.5px;color:var(--muted);margin-top:6px}

/* ===================== KAPCSOLAT / ŰRLAPOK ===================== */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start}
.contact-info .row{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.contact-info .row .ico{font-size:20px;width:28px}
.contact-info .row b{display:block;font-size:15px;color:#f3ead3}
.contact-info .row span{font-size:14.5px;color:var(--muted)}

.form-card{position:relative;border:3px solid transparent;background:linear-gradient(180deg,var(--navy),var(--navy2)) padding-box,var(--gold-grad) border-box;padding:30px;
  box-shadow:0 18px 40px rgba(0,0,0,.45)}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;
  color:var(--gold1);margin-bottom:6px;text-transform:uppercase}
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:15px;line-height:1.4;
  padding:11px 13px;border:1px solid #2c3d57;border-radius:6px;background:#0a1220;color:var(--text);
  transition:border-color .15s,box-shadow .15s}
.field input,.field select{height:46px}
.field select{-webkit-appearance:none;appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23d4af53' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px}
.field select option{background:#0a1220;color:var(--text)}
.field textarea{resize:none;min-height:92px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;
  border-color:var(--gold2);box-shadow:0 0 0 3px rgba(212,175,83,.18)}
.field input::placeholder,.field textarea::placeholder{color:#5e6b80}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-note{font-size:12.5px;color:var(--muted);margin-top:10px}

.btn-red{display:inline-block;background:linear-gradient(180deg,#a52222,#7c1618);color:#fdeecf;
  font:inherit;font-weight:800;letter-spacing:.05em;font-size:15px;text-transform:uppercase;
  padding:15px 34px;border:1px solid var(--gold2);border-radius:6px;cursor:pointer;
  transition:transform .15s,filter .15s}
.btn-red:hover{transform:translateY(-2px);filter:brightness(1.1)}
.btn-red.wide{width:100%}
.btn-gold{display:inline-block;background:var(--gold-grad);color:#241a05;
  font:inherit;font-weight:800;letter-spacing:.05em;font-size:15px;text-transform:uppercase;
  padding:15px 34px;border:0;border-radius:6px;cursor:pointer;transition:transform .15s,filter .15s}
.btn-gold:hover{transform:translateY(-2px);filter:brightness(1.06)}

/* ===================== ÁRAK — lépcsőzetes folyamat ===================== */
.flow{display:flex;align-items:flex-start;margin-top:18px}
.flow-step{flex:1;display:flex}
.flow-step.s1{margin-top:96px}.flow-step.s2{margin-top:48px}.flow-step.s3{margin-top:0}
.flow-card{flex:1;min-height:216px;border:3px solid transparent;background:linear-gradient(180deg,var(--navy),var(--navy2)) padding-box,var(--gold-grad) border-box;padding:28px 22px 22px;position:relative;
  display:flex;flex-direction:column;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.flow-card .step-no{position:absolute;top:-18px;left:22px;width:36px;height:36px;
  display:grid;place-items:center;border-radius:50%;background:var(--gold-grad);color:#241a05;
  font-weight:800;font-size:15px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.flow-card h3{font-size:18px;color:#f3ead3;margin:4px 0 2px}
.flow-card .amount{font-family:var(--disp);font-size:36px;font-weight:800;line-height:1.05;
  margin:10px 0 2px;color:var(--gold1)}
.flow-card .amount .unit{font-family:var(--font);font-size:14px;font-weight:600;color:var(--muted)}
.flow-card .sub{font-size:12.5px;color:var(--muted);font-weight:600}
.flow-card .desc{font-size:13.5px;color:var(--muted);margin-top:12px;line-height:1.6}
.flow-arrow{flex:0 0 44px;display:grid;place-items:center;color:var(--gold2);
  font-size:30px;font-weight:800;line-height:1}
.flow-arrow.a1{margin-top:150px}.flow-arrow.a2{margin-top:96px}
.price-note{margin-top:26px;display:inline-flex;align-items:center;gap:10px;
  background:rgba(212,175,83,.08);border-left:3px solid var(--gold2);
  padding:12px 16px;border-radius:6px;font-size:14px;font-weight:600;color:#f3ead3}

/* ===================== SZAKRENDSZER ===================== */
.newsletter{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.newsletter-media{padding:5px;background:var(--gold-grad);
  clip-path:polygon(10% 0,100% 0,100% 90%,90% 100%,0 100%,0 10%);
  box-shadow:0 20px 50px rgba(0,0,0,.5)}
.newsletter-media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  clip-path:polygon(10% 0,100% 0,100% 90%,90% 100%,0 100%,0 10%)}
.feats{list-style:none;display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--line)}
.feats li{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:#f3ead3}
.feats li .ico{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;
  background:rgba(212,175,83,.12);font-size:16px}

/* ===================== JOGI OLDALAK ===================== */
.legal{max-width:820px;margin:0 auto;padding:0 30px 60px}
.legal .updated{font-size:13px;color:var(--muted);margin-bottom:24px}
.legal h2{font-size:19px;font-weight:800;color:var(--gold1);margin:28px 0 8px;
  padding-top:18px;border-top:1px solid var(--line)}
.legal h2:first-of-type{border-top:0;padding-top:0}
.legal p,.legal li{font-size:15px;color:var(--muted);line-height:1.75}
.legal p{margin-bottom:12px}
.legal ul{margin:0 0 12px 22px;display:grid;gap:6px}
.legal strong{color:#f3ead3}
.legal a{color:var(--gold1);text-decoration:underline;text-underline-offset:3px}
.legal .note{background:rgba(140,28,28,.14);border-left:3px solid var(--red2);
  padding:14px 16px;border-radius:6px;font-size:13.5px;margin:20px 0;color:#f3ead3}

/* ===================== LÁBLÉC ===================== */
.foot{margin-top:56px;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;
  align-items:center;padding:30px 30px 34px}
.flogo img{height:75px}
.flogo .n{display:none}
.fcol{text-align:left}
.fcol b{display:block;color:var(--gold1);letter-spacing:.12em;font-size:18px;margin-bottom:8px}
.fcol span{color:var(--muted);font-size:15px;line-height:1.6}
.fmap{height:160px;display:flex;align-items:center;justify-content:center}
.fmap img{max-height:100%;width:auto;max-width:100%;display:block;filter:drop-shadow(0 6px 16px rgba(0,0,0,.5))}
.fstars{text-align:center;margin-right:0;margin-left:148px}
.fstars .s{color:var(--gold1);font-size:22px;letter-spacing:3px}
.fstars .q{color:var(--gold1);font-family:var(--disp);font-weight:800;font-size:19px;margin-top:4px}
.fbottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:16px 30px 40px;border-top:1px solid #16223a;font-size:13px;color:var(--muted)}
.flinks{display:flex;gap:18px}
.flinks a:hover{color:var(--gold1)}

/* ===================== RESZPONZÍV ===================== */
@media(max-width:1300px){
  .menu{gap:16px;padding-left:calc(46% - 20px)}
  .menu a{font-size:13.5px}
  .menu a.btn-reg{margin-right:14px;padding:8px 12px;font-size:11.5px}
  .lang-switch button{font-size:12px}
}
@media(max-width:820px){
  .hdr{height:auto}
  .logo-box{position:static;width:100%;min-width:0;height:auto;padding:16px 34px;
    clip-path:none;order:-1;justify-content:center}
  .logo-box::before{clip-path:none;inset:0 0 10px 0}
  .logo-box img{height:64px}
  .menu{height:auto;flex-wrap:wrap;gap:14px 18px;padding:12px 20px}
  .menu a.btn-reg{margin-left:0;margin-right:0}
  .banner{aspect-ratio:auto;height:auto;min-height:0;background-position:70% center}
  .banner::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,15,24,.55),rgba(10,15,24,.85))}
  .banner-copy{position:relative;left:auto;top:auto;transform:none;width:auto;padding:26px 22px 28px}
  .banner-copy h1{font-size:30px}.banner-copy .sub{font-size:15px;max-width:none}
  .banner-copy .tag{font-size:14px}.banner-copy .btn-red{font-size:14px;padding:13px 26px}
  .cards{margin-top:0;padding-top:20px}
  .cards .wrap{grid-template-columns:1fr}
  .card{height:auto;padding:26px}
  .page-hero{padding:40px 0 30px}
  .photo-hero{height:240px}
  .svc-grid,.about,.contact-grid,.newsletter,.form-row{grid-template-columns:1fr}
  .flow{flex-direction:column;align-items:stretch}
  .flow-step{margin-top:0 !important}
  .flow-arrow{flex:0 0 42px;width:100%;margin-top:0 !important;transform:rotate(135deg)}
  .fgrid{grid-template-columns:1fr}
  .fstars{margin-left:0}
  .stats{flex-wrap:wrap;gap:24px}
}