/* Perfekt Alarm Biztonságtechnika — perfektalarm.hu
   v3 — tipográfia-vezérelt. Piros CSAK vékony kiemelés, kitöltött piros doboz NINCS.
   PERFEKT #1A1A1D · ALARM #E30613 */

:root{
  --piros:#E30613;
  --piros-melyt:#B8040E;      /* 6,86:1 fehéren — szöveg és link */
  --tinta:#1A1A1D;      /* cimsorok, logo */
  --torzs:#585858;      /* a dsc.hu torzsszurkeje — 7,11:1 feheren */
  --halk:#626262;       /* a dsc.hu masodlagos szurkeje — 6,10:1 */
  --hajszal:#E4E4E1;
  --papir:#FBFBFA;
  --feher:#fff;
  --zold:#12833F; --zold-sotet:#0D6B32;
  --max:1000px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:18px;line-height:1.68;color:var(--torzs);background:var(--feher);
  font-weight:420;padding-bottom:78px;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
a{color:var(--piros-melyt);text-decoration:none;font-weight:600}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
main img,main figure,main table,main pre{max-width:100%}

/* ---- fejléc ---- */
.fej{background:var(--feher);position:sticky;top:0;z-index:50;
     border-bottom:1px solid var(--hajszal)}
.fej .wrap{display:flex;align-items:center;justify-content:space-between;
           min-height:64px;gap:12px}
.logo{display:flex;flex-direction:column;gap:1px;line-height:1;color:var(--tinta)}
.logo:hover{text-decoration:none}
.logo .szo{font-size:21px;font-weight:800;letter-spacing:-.4px}
.logo .szo .p{color:var(--piros)}
.logo .alcimke{display:flex;justify-content:space-between;
               font-size:10.5px;font-weight:600;color:var(--halk);
               width:100%}
.logo .alcimke span[aria-hidden]{display:block}
@media(max-width:359px){.logo .szo{font-size:19px}.logo .alcimke{font-size:10px}}
.menugomb{background:none;border:1px solid var(--hajszal);color:var(--tinta);
  font-size:22px;line-height:1;cursor:pointer;padding:9px 12px;border-radius:9px;
  min-height:44px}
@media(min-width:900px){.menugomb{display:none}}

#fomenu ul{list-style:none;display:flex;gap:14px;flex-wrap:wrap}
#fomenu a{color:var(--halk);font-size:14.2px;font-weight:600;padding:7px 0;display:block;
          white-space:nowrap;
          border-bottom:2px solid transparent}
#fomenu a:hover{color:var(--tinta);text-decoration:none;border-bottom-color:var(--hajszal)}
#fomenu a[aria-current="page"]{color:var(--tinta);border-bottom-color:var(--piros)}
/* 900-1080 px: itt van a legkevesebb hely ugy, hogy meg az asztali menu el */
@media(min-width:900px) and (max-width:1080px){
  #fomenu ul{gap:9px} #fomenu a{font-size:12.9px;letter-spacing:-.1px}
}
@media(max-width:899px){
  #fomenu{display:none;position:absolute;top:64px;left:0;right:0;background:var(--feher);
      padding:8px 20px 18px;border-bottom:1px solid var(--hajszal);
      box-shadow:0 12px 24px rgba(0,0,0,.08);
      max-height:calc(100vh - 64px);overflow-y:auto}
  body.menu-nyit #fomenu{display:block}
  #fomenu ul{flex-direction:column;gap:0}
  #fomenu li+li a{border-top:1px solid var(--hajszal)}
  #fomenu a{padding:17px 2px;min-height:56px;display:flex;align-items:center;
            font-size:17px;color:var(--tinta);border-bottom:0}
}

/* ---- morzsa ---- */
.morzsa{font-size:14.5px;color:var(--halk);padding-top:16px}
.morzsa a{text-decoration:underline;text-underline-offset:.16em;
          text-decoration-thickness:.075em;padding:9px 2px;display:inline-block}

/* ---- szakaszok: hajszálvonal, nem doboz ---- */
.szakasz{padding-top:38px;padding-bottom:38px;border-top:1px solid var(--hajszal)}
.szakasz:first-of-type{border-top:0}
@media(min-width:700px){.szakasz{padding-top:48px;padding-bottom:48px}}
.szakasz>:first-child{margin-top:0}
h1{font-size:clamp(30px,7vw,46px);font-weight:800;line-height:1.1;
   letter-spacing:-1.1px;margin:0 0 16px;color:var(--tinta)}
h2{font-size:clamp(22px,4.4vw,30px);font-weight:800;line-height:1.22;
   letter-spacing:-.6px;margin:0 0 16px;color:var(--tinta)}
h3{font-size:19px;font-weight:700;margin:26px 0 8px;letter-spacing:-.2px;color:var(--tinta)}
p{margin:0 0 14px;max-width:66ch}
p:last-child{margin-bottom:0}
.szakasz p a,.szakasz li a{text-decoration:underline;text-underline-offset:.16em;
                           text-decoration-thickness:.07em}

/* eyebrow — a szakasz fölött, apró, piros */
.cimke{display:block;font-size:12.5px;font-weight:700;letter-spacing:1.6px;
       text-transform:uppercase;color:var(--piros-melyt);margin:0 0 10px}

/* ---- nyitó ---- */
.nyito{padding:44px 0 34px}
.nyito .bevezeto{font-size:clamp(19px,3.6vw,22px);line-height:1.5;color:var(--halk);
                 max-width:60ch;margin-bottom:26px;font-weight:420}
.nyito .bevezeto strong{color:var(--tinta);font-weight:700}

/* ---- márkafal: ez a lap látványa ---- */
.markafal{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.markafal a{display:inline-block;font-size:16px;font-weight:600;color:var(--torzs);
  border:1px solid var(--hajszal);border-radius:999px;padding:8px 15px;
  background:var(--feher);line-height:1.35}
.markafal a:hover{text-decoration:none;border-color:var(--piros);color:var(--piros-melyt)}
.markafal a .kieg{color:var(--halk);font-weight:500;font-size:14px}
.markafal-lab{margin-top:14px;font-size:16px;color:var(--halk)}

/* ---- egyszerű felsorolás chipként ---- */
.chipek{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0;padding:0;list-style:none}
.chipek li{font-size:15.5px;color:var(--halk);background:var(--papir);
  border:1px solid var(--hajszal);border-radius:8px;padding:6px 12px}

/* ---- pipás lista, ha valóban lista ---- */
.pipak{list-style:none;padding:0;margin:14px 0;display:grid;
       grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:4px 22px}
.pipak>*{min-width:0}
.pipak li{padding-left:26px;position:relative;font-size:17px}
.pipak li::before{content:"";position:absolute;left:2px;top:.62em;
  width:10px;height:6px;border-left:2.5px solid var(--zold);
  border-bottom:2.5px solid var(--zold);transform:rotate(-45deg)}

/* ---- belépő linkek: hajszálvonalas sorok, nem dobozok ---- */
.utak{margin:18px 0 0;border-top:1px solid var(--hajszal)}
.utak a{display:flex;align-items:baseline;gap:12px;padding:17px 2px;
        border-bottom:1px solid var(--hajszal);color:var(--tinta);font-weight:650;
        font-size:18px;text-decoration:none}
.utak a:hover{text-decoration:none;color:var(--piros-melyt)}
.utak a .mit{color:var(--halk);font-weight:420;font-size:16px}
.utak a::after{content:"→";margin-left:auto;color:var(--piros);font-weight:700}

/* ---- adat-sor (2005, engedély, biztosítás) ---- */
.tenyek{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
        gap:2px 30px;margin:18px 0 0}
.tenyek>*{min-width:0;padding:14px 0;border-top:1px solid var(--hajszal)}
.tenyek dt{font-size:13px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
           color:var(--halk);margin-bottom:3px}
.tenyek dd{font-size:17.5px;font-weight:600;color:var(--torzs)}

/* ---- kiemelő doboz: halvány papír, vékony piros vonal ---- */
.kiemel{background:var(--papir);border-left:3px solid var(--piros);
        padding:16px 18px;margin:18px 0;font-size:17px;border-radius:0 8px 8px 0}
.kiemel>:first-child{margin-top:0}
.kiemel>:last-child{margin-bottom:0}

/* ---- gombok ---- */
.hivo{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
      gap:1px;background:var(--zold);color:#fff;font-weight:700;font-size:19px;
      border-radius:11px;padding:16px 30px;min-height:60px;
      text-decoration:none;text-align:center;margin:6px 0}
.hivo:hover,.hivo:focus-visible{background:var(--zold-sotet);text-decoration:none;color:#fff}
.hivo .kicsi{font-size:13px;font-weight:600;color:#fff}
.szakasz p a.hivo,.nyito p a.hivo{text-decoration:none;color:#fff}
@media(max-width:520px){.hivo{display:flex;width:100%}}

.hivosav{position:fixed;left:0;right:0;bottom:0;z-index:45;
         background:rgba(255,255,255,.97);border-top:1px solid var(--hajszal);
         padding:10px 20px;backdrop-filter:blur(6px)}
.hivosav .hivo{display:flex;width:100%;margin:0}
body.menu-nyit .hivosav{display:none}
@media(min-width:900px){.hivosav{display:none}body{padding-bottom:0}}

/* ---- GYIK ---- */
.gyik{margin:8px 0 0;border-top:1px solid var(--hajszal)}
.gyik details{border-bottom:1px solid var(--hajszal)}
.gyik summary{cursor:pointer;padding:17px 2px;font-weight:650;font-size:17.5px;color:var(--tinta);
              min-height:56px;display:flex;align-items:center;gap:12px;
              list-style:none}
.gyik summary::-webkit-details-marker{display:none}
.gyik summary::before{content:"+";color:var(--piros);font-weight:700;font-size:20px;
                      width:16px;flex:none}
.gyik details[open] summary::before{content:"–"}
.gyik .valasz{padding:0 2px 18px 30px;font-size:17px;color:var(--halk)}
.gyik .valasz>:first-child{margin-top:0}

/* ---- lábléc ---- */
.lab{background:var(--papir);border-top:1px solid var(--hajszal);
     margin-top:30px;padding:38px 0 26px;font-size:16px;color:var(--halk)}
.lab a{color:var(--tinta);font-weight:500}
.lab .lab-racs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
               gap:26px}
.lab .lab-racs>*{min-width:0}
.lab h2{font-size:12.5px;margin:0 0 10px;color:var(--tinta);letter-spacing:1.4px;
        text-transform:uppercase;font-weight:700}
.lab ul{list-style:none}
.lab li{margin:6px 0}
.lab .jog{border-top:1px solid var(--hajszal);margin-top:26px;padding-top:16px;
          font-size:14.5px}

/* ---- akadálymentesség ---- */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--piros-melyt);outline-offset:2px}
.vak{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.atugro{position:absolute;left:-9999px;background:var(--feher);color:var(--tinta);
        padding:12px 16px;z-index:100;border:1px solid var(--hajszal);border-radius:0 0 8px 0}
.atugro:focus{left:0;top:0}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;
  scroll-behavior:auto!important}}
/* --- szines belepo sorok --- */
.utak{margin:18px 0 0;border-top:0;display:grid;gap:10px}
.utak a{display:flex;align-items:center;gap:14px;padding:15px 16px;border:1px solid var(--hajszal);
        border-radius:14px;background:#fff;color:var(--tinta);text-decoration:none}
.utak a:hover{text-decoration:none;box-shadow:0 3px 14px rgba(0,0,0,.09)}
.utak a::after{content:"\2192";margin-left:auto;font-weight:700;flex:none}
.utak .ikon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;
            justify-content:center;flex:none}
.utak .ikon svg{width:23px;height:23px}
.utak .szoveg{display:flex;flex-direction:column;min-width:0}
.utak .cim{font-weight:700;font-size:17.5px;color:var(--tinta);line-height:1.3}
.utak .mit{font-size:15.5px;color:var(--halk);line-height:1.35}
.ut-sur   .ikon{background:#FDF0E3;color:#9A4A00}  .ut-sur:hover{border-color:#9A4A00}
.ut-sur::after{color:#9A4A00}
.ut-kek   .ikon{background:#E8F1F9;color:#1B5E9C}  .ut-kek:hover{border-color:#1B5E9C}
.ut-kek::after{color:#1B5E9C}
.ut-teal  .ikon{background:#E3F3F0;color:#0B6B5C}  .ut-teal:hover{border-color:#0B6B5C}
.ut-teal::after{color:#0B6B5C}
.ut-piros .ikon{background:#FDECEE;color:#C4050F}  .ut-piros:hover{border-color:#C4050F}
.ut-piros::after{color:#C4050F}
.ut-lila  .ikon{background:#F0EAF8;color:#6D28A8}  .ut-lila:hover{border-color:#6D28A8}
.ut-lila::after{color:#6D28A8}

/* rovatcimke szinei szakaszonkent */
.szakasz:nth-of-type(2) .cimke{color:#1B5E9C}
.szakasz:nth-of-type(3) .cimke{color:#0B6B5C}
.szakasz:nth-of-type(4) .cimke{color:#9A4A00}
.szakasz:nth-of-type(5) .cimke{color:#6D28A8}

/* tenyek: szines felso vonal */
.tenyek>*{border-top:3px solid #1B5E9C}
.tenyek>*:nth-child(2){border-top-color:#0B6B5C}
.tenyek>*:nth-child(3){border-top-color:#9A4A00}
.tenyek>*:nth-child(4){border-top-color:#6D28A8}

/* D: ZOLD NINCS. A hivas szine a marka pirosa. */
.hivo{background:#C4050F}
.hivo:hover,.hivo:focus-visible{background:#96040C}
.pipak li::before{border-left-color:#1B5E9C;border-bottom-color:#1B5E9C}
.hivosav{background:rgba(255,255,255,.97)}

/* --- kerek lebego hivogomb --- */
.hivosav{display:none!important}
body{padding-bottom:0}
.fab{position:fixed;right:16px;bottom:16px;z-index:60;
     width:62px;height:62px;border-radius:50%;
     background:#12833F;color:#fff;
     display:flex;align-items:center;justify-content:center;
     box-shadow:0 6px 20px rgba(0,0,0,.26);
     right:max(16px,env(safe-area-inset-right));
     bottom:max(16px,env(safe-area-inset-bottom))}
.fab svg{width:27px;height:27px}
.fab:hover,.fab:focus-visible{background:#0D6B32;text-decoration:none;color:#fff}
body.menu-nyit .fab{display:none}

/* zaro szakasz: nagy szoveges telefonszam */
.telsor{margin:10px 0 0}
.telsor a{font-size:clamp(28px,7vw,38px);font-weight:800;letter-spacing:-1px;
          color:#C4050F;text-decoration:none;line-height:1.2;display:inline-block}
.telsor a:hover{text-decoration:underline}
.szakasz p.telsor a{text-decoration:none}

/* G: halvany kek nyito-sav */
.nyito{background:linear-gradient(180deg,#EAF1FA 0%,#F5F8FC 62%,#FFFFFF 100%);
       padding:44px max(20px,calc((100% - 960px)/2)) 38px;
       border-bottom:1px solid #E1E8F1;max-width:none}

.markafal a{background:#fff}
.markafal a:hover{border-color:#1B5E9C;color:#15537F}
.nyito .cimke{color:#1B5E9C}

/* --- markacsempek a sajat oldalakra --- */
.markak{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
        gap:11px;margin:18px 0 6px}
.markak>*{min-width:0}
.markak.ketto{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.markak a{display:block;background:#fff;border:1px solid var(--hajszal);
          border-top:4px solid var(--cs,var(--piros));border-radius:13px;
          padding:14px 13px 13px;text-decoration:none;color:var(--tinta);
          overflow-wrap:anywhere}
.markak a:hover{text-decoration:none;border-color:var(--cs,var(--piros));
                box-shadow:0 4px 14px rgba(0,0,0,.10)}
.markak .mnev{display:block;font-weight:800;font-size:17.5px;line-height:1.2;
              color:var(--cs,var(--tinta))}
.markak .mmit{display:block;font-size:14.8px;color:var(--halk);line-height:1.35;
              margin-top:3px;font-weight:450}
.markak .mdom{display:block;font-size:12.8px;color:var(--halk);margin-top:6px;
              font-weight:450;overflow-wrap:normal;word-break:normal;
              hyphens:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
p.bolt{margin-top:16px;font-size:16.5px}

/* ================= VONALAS TAGOLAS =================
   A csempek 4px-es szines felso vonala mint az egesz lap tagolo eszkoze. */

/* 1. Szakaszfej: rovid szines vonal a rovatcimke folott */
.cimke{position:relative;padding-top:15px}
.cimke::before{content:"";position:absolute;top:0;left:0;
               width:52px;height:4px;border-radius:2px;
               background:currentColor}

/* 2. Kepsor-kartyak: szines felso vonal, a marka sajat szinevel */
.kepsor{border-top:4px solid var(--cs,var(--piros))}
.kepsor:first-of-type{--cs:#D2232A}   /* DSC */
.kepsor.fordit{--cs:#0056B3}          /* Paradox */

/* 3. Belepo sorok: szines bal vonal az ikon szinevel */
.utak a{border-left:4px solid transparent}
.ut-sur{border-left-color:#9A4A00}
.ut-kek{border-left-color:#1B5E9C}
.ut-teal{border-left-color:#0B6B5C}
.ut-piros{border-left-color:#C4050F}
.ut-lila{border-left-color:#6D28A8}

/* 4. GYIK: piros felso vonal a blokkon, es a nyitott kerdesen bal vonal */
.gyik{border-top:4px solid var(--piros);padding-top:4px}
.gyik details{border-left:4px solid transparent;padding-left:0}
.gyik details[open]{border-left-color:var(--piros);padding-left:12px;
                    background:#FDF7F7}

/* 5. Tenyek: a szines felso vonal vastagabb es kerekitett */
.tenyek>*{border-top-width:4px;border-radius:3px 3px 0 0}

/* --- markanev-lista: rendezett, vonalakkal tagolt (nem pirula-halom) --- */
.markafal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(148px,100%),1fr));
          gap:0 22px;margin:22px 0 0;border-top:1px solid var(--hajszal)}
.markafal>*{min-width:0}
.markafal a{display:flex;align-items:center;gap:9px;
            border:0;border-radius:0;border-bottom:1px solid var(--hajszal);
            background:none;padding:13px 2px;min-height:48px;
            font-size:16.5px;font-weight:600;color:var(--tinta);
            text-decoration:none}
.markafal a::before{content:"";width:3px;height:15px;border-radius:2px;
                    background:var(--piros);flex:none;opacity:.75}
.markafal a:hover{text-decoration:none;color:var(--piros-melyt)}
.markafal a:hover::before{opacity:1}
.markafal a .kieg{color:var(--halk);font-weight:450;font-size:14px}

/* --- markanev-lista csoportfejlecei --- */
h2.fal-fej{font-size:17px;font-weight:800;margin:26px 0 4px;letter-spacing:-.2px;
           padding-top:13px;position:relative}
h2.fal-fej::before{content:"";position:absolute;top:0;left:0;width:40px;height:3px;
                   border-radius:2px;background:var(--piros)}
h2.fal-fej:first-of-type{margin-top:24px}
p.fal-mit{font-size:15.5px;color:var(--halk);margin:0 0 2px;max-width:58ch}
.markafal{margin-top:10px}

/* --- markanev-csempek (a nyitoban) --- */
.markak.markanevek{grid-template-columns:repeat(auto-fit,minmax(min(146px,100%),1fr));
                   gap:10px;margin:12px 0 0;border-top:0}
.markak.markanevek a{padding:13px 12px 12px}
.markak.markanevek .mnev{font-size:16.5px}
.markak.markanevek .mmit{font-size:13.8px;margin-top:2px}

/* ================= LEIRASOK LAP ================= */
.kereso{margin:18px 0 4px}
.kereso input{width:100%;max-width:460px;font:450 17.5px/1.5 inherit;color:var(--tinta);
  padding:14px 15px;border:1px solid var(--hajszal);border-radius:12px;background:#fff;
  min-height:52px}
.kereso input:focus{outline:3px solid var(--piros-melyt);outline-offset:2px;
  border-color:var(--piros-melyt)}
.talalat{font-size:15.5px;color:var(--halk);margin:8px 0 0;min-height:1.4em}

.szuro{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.szuro button{font:600 15px/1.3 inherit;color:var(--torzs);background:#fff;cursor:pointer;
  border:1px solid var(--hajszal);border-radius:999px;padding:9px 15px;min-height:44px}
.szuro button:hover{border-color:var(--piros);color:var(--piros-melyt)}
.szuro button.aktiv{background:var(--piros-melyt);border-color:var(--piros-melyt);color:#fff}

.nincs{background:#FDF7F7;border-left:4px solid var(--piros);border-radius:0 10px 10px 0;
  padding:16px 18px;margin:18px 0 0;font-size:16.8px}
.nincs>:first-child{margin-top:0}

.dokok{padding-top:8px}
h2.dok-fej{font-size:19px;font-weight:800;margin:30px 0 0;padding-top:13px;
  position:relative;letter-spacing:-.2px}
h2.dok-fej:first-of-type{margin-top:6px}
h2.dok-fej::before{content:"";position:absolute;top:0;left:0;width:44px;height:4px;
  border-radius:2px;background:var(--cs,var(--piros))}
h2.dok-fej span{font-size:14.5px;font-weight:500;color:var(--halk);
  display:block;letter-spacing:0}

.dok-racs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:11px;margin:14px 0 0}
.dok-racs>*{min-width:0}
.dok{display:flex;gap:13px;align-items:flex-start;background:#fff;
  border:1px solid var(--hajszal);border-top:4px solid var(--cs,var(--piros));
  border-radius:13px;padding:14px 14px 13px;text-decoration:none;color:var(--tinta)}
.dok:hover{text-decoration:none;border-color:var(--cs,var(--piros));
  box-shadow:0 4px 14px rgba(0,0,0,.10)}
.dok-jel{flex:none;width:42px;height:42px;border-radius:9px;background:var(--cs,var(--piros));
  color:#fff;font:800 12.5px/42px inherit;text-align:center;letter-spacing:.5px}
.dok-szo{min-width:0}
.dok-nev{display:block;font-weight:700;font-size:16.8px;line-height:1.3}
.dok-tip{display:block;font-size:14.5px;color:var(--halk);line-height:1.35;margin-top:2px}
.dok-meta{display:block;font-size:13.8px;color:var(--halk);margin-top:5px;font-weight:600}
.dok-megj{display:block;font-size:13.5px;color:var(--piros-melyt);margin-top:4px}

/* atvezeto a marka sajat aloldalara */
.dok-tovabb{margin:12px 0 0;font-size:16.3px;padding-left:2px}
.dok-tovabb a{text-decoration:underline;text-underline-offset:.16em;
              text-decoration-thickness:.07em}

/* atvezeto a marka sajat aloldalara */
p.dok-tovabb{margin:12px 0 0;font-size:16.3px}
p.dok-tovabb a{text-decoration:underline;text-underline-offset:.16em;
               text-decoration-thickness:.07em;font-weight:600}

/* --- markanevek nyomtatott betuvel, vekony konturral --- */
.markak .mnev{text-transform:uppercase;letter-spacing:.9px;font-size:15.5px}
.markak.markanevek .mnev{font-size:15px;letter-spacing:1px}
.markak a{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cs,var(--piros)) 26%,transparent)}
.markak a:hover{box-shadow:inset 0 0 0 1.5px var(--cs,var(--piros)),
                0 4px 14px rgba(0,0,0,.10)}

/* szuro-buborekok a leirasok lapon */
.szuro button{text-transform:uppercase;letter-spacing:.9px;font-size:13.5px;
              padding:10px 15px}
.szuro button:not(.aktiv){box-shadow:inset 0 0 0 1px rgba(196,5,15,.20)}

/* a dokumentum-fejlecek marka-neve is nyomtatott */
h2.dok-fej{text-transform:uppercase;letter-spacing:.8px;font-size:17.5px}
h2.dok-fej span{text-transform:none;letter-spacing:0}

/* ================= MÁRKALAP ================= */

/* márkalogó: kicsi, lekerekített kártyában */
/* a burkolo BLOKK marad, hogy a .nyito kozepre igazitasa hasson ra;
   a lekerekitett kartya a belso elem */
.markalogo{display:block;margin-bottom:15px}
.markalogo picture{display:inline-flex;align-items:center;justify-content:center;
  padding:9px 14px;background:#fff;border-radius:16px;
  box-shadow:0 1px 3px rgba(0,0,0,.07),inset 0 0 0 1px var(--hajszal)}
.markalogo img{height:26px;width:auto;max-width:150px;border-radius:4px;display:block}
@media(min-width:700px){.markalogo img{height:30px;max-width:170px}}

/* videók: kattintásra töltődő előnézet, nem beágyazott iframe */
.vid-racs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:16px;margin:18px 0 0}
.vid-racs>*{min-width:0}
.vid{min-width:0}
.vid-gomb,.vid iframe{display:block;width:100%;aspect-ratio:16/9;border:0;
  border-radius:12px;background:#1A1A1D}
.vid-gomb{cursor:pointer;position:relative;padding:0;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--hajszal)}
.vid-gomb img{width:100%;height:100%;object-fit:cover;display:block}
.vid-gomb::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.06) 0%,rgba(0,0,0,.28) 100%)}
.vid-jel{z-index:2}
.vid-gomb:hover .vid-jel{transform:translate(-50%,-50%) scale(1.08)}
.vid-jel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;background:var(--piros);
  transition:transform .15s}
.vid-jel::after{content:"";position:absolute;left:53%;top:50%;
  transform:translate(-50%,-50%);border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff}
.vid-cim{font-size:15.8px;color:var(--halk);margin:9px 0 0;line-height:1.4}

/* dokumentum-csoportok a márkalapon */
h3.dok-csoport{font-size:17.5px;font-weight:800;margin:24px 0 2px;padding-top:12px;
  position:relative;letter-spacing:-.2px}
h3.dok-csoport::before{content:"";position:absolute;top:0;left:0;width:38px;height:3px;
  border-radius:2px;background:var(--piros)}
h3.dok-csoport.halk::before{background:var(--hajszal)}
h3.dok-csoport.halk{color:var(--torzs)}
p.dok-alcim{font-size:15.5px;color:var(--halk);margin:4px 0 0}
.dok.kiemelt{box-shadow:inset 0 0 0 1.5px var(--cs,var(--piros))}
.dok.kiemelt .dok-nev{font-size:17.8px}

/* webáruház menüpont */
@media(min-width:900px){
  #fomenu a.menu-bolt{color:var(--piros-melyt);font-weight:700}
  #fomenu a.menu-bolt::after{content:" \2197";font-weight:600}
}
@media(max-width:899px){
  #fomenu a.menu-bolt{color:var(--piros-melyt);font-weight:700}
  #fomenu a.menu-bolt::after{content:" \2197";margin-left:auto}
}

/* ---- márkalap: szöveges márkajel a logó helyén (12 márkánál nincs logónk) ---- */
.markajel{display:inline-block;margin-bottom:15px;padding:8px 16px;background:#fff;
  border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.07),inset 0 0 0 1px var(--hajszal);
  font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cs,var(--torzs))}
@media(min-width:700px){.markajel{font-size:16.5px}}

/* ---- számozott hibalista (Pyronix hibaszámok) ---- */
.hibalista{margin:16px 0 18px;padding-left:1.35em}
.hibalista li{margin:0 0 9px;font-size:17px;line-height:1.6}
.hibalista li::marker{color:var(--halk);font-weight:700}

/* ---- info-kártyák (Ajax áttekintés) ---- */
.info-racs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:14px;margin:18px 0 0}
.info-racs>*{min-width:0}
.info{min-width:0;padding:16px 18px;background:#fff;border:1px solid var(--hajszal);
  border-radius:14px}
.info h3{margin-bottom:6px;font-size:17.5px;color:var(--tinta)}
.info p{margin:0;font-size:16.6px;color:var(--halk)}

/* ---- figyelemfelhívó doboz (nem teli szín, csak bal oldali vonal) ---- */
.figyelem{margin:18px 0 0;padding:14px 16px;background:var(--papir);
  border:1px solid var(--hajszal);border-left:4px solid #9A4A00;border-radius:0 12px 12px 0}
.figyelem p{margin:0;font-size:16.8px}

/* ---- halkabb kiegészítő sor ---- */
.halkabb{margin-top:10px;font-size:16.4px;color:var(--halk)}

/* ---- cégadatok ---- */
.adatok{margin:16px 0 0;display:grid;grid-template-columns:1fr;gap:0}
.adatok>*{min-width:0}
.adatok dt{padding-top:13px;font-size:13.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--halk)}
.adatok dd{padding:2px 0 13px;border-bottom:1px solid var(--hajszal);font-size:17.5px;
  color:var(--tinta);overflow-wrap:anywhere}
@media(min-width:640px){
  .adatok{grid-template-columns:200px minmax(0,1fr)}
  .adatok dt{border-bottom:1px solid var(--hajszal);padding:13px 0}
  .adatok dd{padding:13px 0}
}

/* ---- referencialista ---- */
.reflista{list-style:none;padding:0;margin:16px 0 0;border-top:1px solid var(--hajszal)}
.reflista li{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline;
  padding:12px 2px;border-bottom:1px solid var(--hajszal)}
.reflista .ref-nev{font-weight:650;color:var(--tinta);font-size:17px}
.reflista .ref-hely{font-size:16px;color:var(--halk)}

/* ---- kerületlista ---- */
.kerlista{list-style:none;padding:0;margin:16px 0 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:0 24px}
.kerlista>*{min-width:0}
.kerlista li{padding:10px 2px;border-bottom:1px solid var(--hajszal);font-size:16.8px}
.kerlista .ker{display:inline-block;min-width:2.9em;font-weight:700;color:var(--tinta)}

/* ---- településfelsorolás ---- */
.telepulesek{margin-top:14px;font-size:16.6px;line-height:1.9;color:var(--halk);
  overflow-wrap:anywhere}

/* hosszú összetett szavak ne feszítsék szét a lapot keskeny telefonon */
h1,h2,h3,h4{overflow-wrap:break-word}

/* --- kepsor: kep + mellette szoveg, mobilon egymas ala --- */
.kepsor{display:grid;grid-template-columns:1fr;gap:14px;align-items:center;
        margin:22px 0;padding:16px;background:#fff;border:1px solid var(--hajszal);
        border-top:4px solid var(--cs,#C4050F);border-radius:16px}
.kepsor.dsc{--cs:#D2232A}
.kepsor.par{--cs:#0056B3}
.kepsor>*{min-width:0}
@media(min-width:640px){
  .kepsor{grid-template-columns:210px 1fr;gap:24px;padding:20px 22px}
  .kepsor.fordit{grid-template-columns:1fr 210px}
  .kepsor.fordit .kepdoboz{order:2}
  .kepsor.fordit .kepszoveg{order:1}
}
.kepdoboz{display:block;border-radius:10px;overflow:hidden}
.kepsor img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#fff}
.kepszoveg h3{margin:0 0 6px;font-size:20px}
.kepszoveg p{margin:0 0 9px;font-size:16.8px}
.kepszoveg p:last-child{margin-bottom:0}