.lof{--burg:#881119;--gold:#BF9B30;--ink:#1A1A1A;--paper:#fff;max-width:1180px;margin:0 auto;padding:26px 18px 20px;box-sizing:border-box;color:var(--ink)}
.lof *{box-sizing:border-box}
.lof-head{text-align:center;max-width:780px;margin:0 auto 38px}
.lof-head h2{margin:0 0 12px;color:var(--burg);font-family:"Playfair Display",Georgia,serif;font-size:clamp(30px,4vw,46px);line-height:1.1;font-weight:600}
.lof-head p{margin:0;font-size:17px;line-height:1.65}
.lof-route{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;align-items:start;padding-top:5px}
.lof-line{position:absolute;z-index:0;left:9%;right:9%;top:21px;height:2px;background:linear-gradient(90deg,var(--burg),var(--gold),var(--burg));opacity:.72}
.lof-step{position:relative;z-index:1;text-align:center;min-width:0}
.lof-point{appearance:none;border:0;background:transparent;padding:0 5px;cursor:pointer;color:var(--ink);font:inherit;width:100%}
.lof-dot{display:block;width:34px;height:34px;margin:0 auto 11px;border-radius:50%;border:2px solid var(--gold);background:#fff;box-shadow:0 3px 10px rgba(26,26,26,.12),inset 0 0 0 6px #fff;position:relative;transition:.18s ease}
.lof-dot:after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--burg);transition:.18s ease}
.lof-label{display:block;font-weight:700;font-size:15px;line-height:1.25}
.lof-point:hover .lof-dot,.lof-point:focus-visible .lof-dot,.lof-point[aria-expanded="true"] .lof-dot{transform:translateY(-2px);box-shadow:0 6px 14px rgba(26,26,26,.16),0 0 0 3px rgba(191,155,48,.13)}
.lof-point[aria-expanded="true"] .lof-dot:after{background:var(--gold)}
.lof-point[aria-expanded="true"] .lof-label{color:var(--burg)}
.lof-point:focus-visible{outline:2px solid var(--burg);outline-offset:5px;border-radius:4px}
.lof-detail{margin:15px auto 0;padding:15px 14px;border-top:1px solid rgba(191,155,48,.75);max-width:220px;text-align:left;animation:lofIn .18s ease}
.lof-detail p{margin:0;font-size:14px;line-height:1.55}
.lof-footer{text-align:center;margin:32px auto 0;max-width:760px;font-weight:600;font-size:16px;line-height:1.5}
@keyframes lofIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(max-width:767px){
 .lof{padding:18px 16px 12px}
 .lof-head{margin-bottom:25px}
 .lof-head h2{font-size:31px}
 .lof-head p{font-size:16px}
 .lof-route{display:block;padding:0 0 0 10px}
 .lof-line{left:26px;right:auto;top:17px;bottom:17px;width:2px;height:auto;background:linear-gradient(180deg,var(--burg),var(--gold),var(--burg))}
 .lof-step{text-align:left;margin:0 0 18px;padding-left:50px;min-height:42px}
 .lof-step:last-child{margin-bottom:0}
 .lof-point{display:flex;align-items:center;gap:13px;text-align:left;padding:0;width:auto;min-height:36px}
 .lof-dot{position:absolute;left:0;top:0;width:34px;height:34px;margin:0;background:#fff}
 .lof-label{font-size:16px}
 .lof-detail{max-width:none;margin:10px 0 0;padding:11px 0 2px;border-top:1px solid rgba(191,155,48,.6)}
 .lof-detail p{font-size:15px}
 .lof-footer{text-align:left;margin:24px 0 0;padding-left:60px;font-size:15px}
}
@media(prefers-reduced-motion:reduce){.lof-dot,.lof-detail{animation:none!important;transition:none!important}}


/* 1.1.0 – finom 3D kártyák + jól olvasható aktív állapot */
.lof-point{
  position:relative;
  min-height:66px;
  padding:16px 10px 10px;
  border:1px solid rgba(136,17,25,.38);
  border-radius:10px;
  background:linear-gradient(145deg,#ffffff 0%,#fffdf8 55%,#f3e3ae 100%);
  box-shadow:
    0 8px 16px rgba(26,26,26,.13),
    0 2px 4px rgba(26,26,26,.10),
    inset 0 1px 0 rgba(255,255,255,.95);
  transform:translateY(0);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
.lof-point:hover,.lof-point:focus-visible{
  transform:translateY(-3px);
  border-color:var(--gold);
  box-shadow:
    0 12px 22px rgba(26,26,26,.17),
    0 3px 6px rgba(136,17,25,.10),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.lof-point[aria-expanded="true"]{
  background:linear-gradient(145deg,#98141d 0%,#761017 58%,#4c090e 100%);
  border-color:var(--gold);
  box-shadow:
    0 12px 24px rgba(80,7,12,.24),
    0 3px 7px rgba(26,26,26,.16),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.lof-point[aria-expanded="true"] .lof-label{color:#fff !important;text-shadow:0 1px 1px rgba(0,0,0,.28)}
.lof-point[aria-expanded="true"] .lof-dot{background:#fff;border-color:var(--gold)}
.lof-point[aria-expanded="true"] .lof-dot:after{background:var(--gold)}
.lof-dot{margin-top:-34px;background:#fff}
.lof-detail{
  background:linear-gradient(180deg,#fff 0%,#fffdf8 100%);
  border:1px solid rgba(191,155,48,.55);
  border-radius:10px;
  padding:14px 15px;
  box-shadow:0 7px 16px rgba(26,26,26,.09);
  color:var(--ink);
}
.lof-detail p{color:var(--ink)!important}
@media(max-width:767px){
 .lof-point{min-height:54px;padding:10px 14px 10px 50px;width:100%}
 .lof-dot{left:8px;top:10px;margin:0}
 .lof-detail{margin-top:8px;padding:13px 14px}
 .lof-line{left:34px}
 .lof-step{padding-left:0}
 .lof-footer{padding-left:0}
}


/* 1.2.0 – világos kártya hover/aktív állapot, bordó felirattal */
.lof-point:hover,
.lof-point:focus-visible,
.lof-point[aria-expanded="true"]{
  background:linear-gradient(145deg,#ffffff 0%,#fffdf8 52%,#f3e3ae 100%) !important;
  border-color:#881119 !important;
  box-shadow:
    0 12px 22px rgba(26,26,26,.16),
    0 3px 7px rgba(136,17,25,.12),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}
.lof-point:hover .lof-label,
.lof-point:focus-visible .lof-label,
.lof-point[aria-expanded="true"] .lof-label{
  color:#881119 !important;
  text-shadow:none !important;
}
.lof-point[aria-expanded="true"] .lof-dot{
  background:#fff !important;
  border-color:#BF9B30 !important;
}
.lof-point[aria-expanded="true"] .lof-dot:after{
  background:#BF9B30 !important;
}


/* 1.3.0 – egyértelműbb kattinthatóság, a meglévő design megtartásával */
.lof-label::after{
  content:"›";
  display:inline-block;
  margin-left:7px;
  color:var(--burg);
  font-size:19px;
  line-height:.8;
  font-weight:700;
  vertical-align:-1px;
  opacity:.58;
  transform:translateX(0);
  transition:transform .18s ease,opacity .18s ease,color .18s ease;
}
.lof-point:hover .lof-label::after,
.lof-point:focus-visible .lof-label::after{
  opacity:1;
  transform:translateX(3px);
  color:var(--gold);
}
.lof-point[aria-expanded="true"] .lof-label::after{
  content:"⌄";
  opacity:1;
  transform:none;
  color:var(--gold);
}
.lof-point:hover .lof-dot,
.lof-point:focus-visible .lof-dot{
  border-color:var(--burg);
  box-shadow:0 7px 16px rgba(26,26,26,.18),0 0 0 4px rgba(191,155,48,.14);
}
@media(max-width:767px){
  .lof-label::after{opacity:.85;margin-left:8px}
}