:root{
      --ink:#172b38;
      --muted:#60717b;
      --paper:#f4f5f2;
      --line:#dbe1df;
      --accent:#f6c453;
      --dark:#102733}
      *{
      box-sizing:border-box}
      html{
      scroll-behavior:smooth;
      scroll-padding-top:120px}
      body{
      margin:0;
      background:var(--paper);
      color:var(--ink);
      font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
      line-height:1.7}
      a{
      color:inherit}
      button{
      font:inherit}
      img{
      display:block;
      width:100%;
      object-fit:cover}
      [hidden]{
      display:none!important}
      a:focus-visible,button:focus-visible{
      outline:3px solid #c58b00;
      outline-offset:5px}
      .wrap{
      width:min(1220px,calc(100% - 64px));
      margin:auto}
      .skip{
      position:absolute;
      left:20px;
      top:-100px;
      z-index:100;
      background:white;
      padding:12px}
      .skip:focus{
      top:10px}
      header{
      position:sticky;
      top:0;
      z-index:20;
      background:#f4f5f2ed;
      backdrop-filter:blur(18px);
      border-bottom:1px solid #172b3810}
      .header-row{
      min-height:98px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px}
      .brand{
      display:flex;
      align-items:center;
      gap:13px;
      text-decoration:none}
      .brand-icon{
      display:grid;
      place-items:center;
      width:46px;
      height:46px;
      border-radius:50%;
      background:var(--dark);
      color:var(--accent);
      font-size:27px;
      font-weight:800}
      .brand-name{
      font-size:25px;
      line-height:1.15;
      font-weight:900;
      letter-spacing:-1px}
      .brand small{
      display:block;
      margin-top:5px;
      font-size:9px;
      letter-spacing:1.8px;
      font-weight:650;
      color:var(--muted)}
      nav{
      display:flex;
      align-items:center;
      gap:5px;
      padding:6px;
      background:#e8ece8;
      border:1px solid #dce2de;
      border-radius:100px}
      nav a{
      text-decoration:none;
      border-radius:100px;
      padding:11px 20px;
      font-size:13px;
      font-weight:700;
      color:#526570;
      transition:background .2s,color .2s}
      nav a:hover{
      background:#ffffffa0;
      color:var(--dark)}
      nav a.active{
      background:var(--dark);
      color:white;
      box-shadow:0 3px 8px #10273320}
      .menu-toggle{
      display:none}
      .button{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:16px;
      border:0;
      border-radius:100px;
      padding:15px 25px;
      background:var(--dark);
      color:white;
      font-weight:750;
      font-size:14px;
      text-decoration:none;
      cursor:pointer;
      transition:transform .2s,background .2s}
      .button:hover{
      background:#284755;
      transform:translateY(-2px)}
      .button.light{
      background:var(--accent);
      color:var(--dark)}
      .button.outline{
      background:transparent;
      color:var(--ink);
      border:1px solid #b9c6c9}
      .hero{
      margin-top:32px;
      padding:0}
      .hero-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      background:var(--dark);
      border-radius:28px;
      overflow:hidden;
      min-height:560px;
      position:relative}
      .hero-copy{
      padding:62px 52px;
      color:white;
      position:relative;
      z-index:1}
      .eyebrow{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:2px;
      font-weight:800;
      color:#526d77;
      margin:0 0 20px}
      .hero .eyebrow{
      color:var(--accent);
      display:flex;
      align-items:center;
      gap:10px}
      .hero .eyebrow:before{
      content:"";
      width:23px;
      height:2px;
      background:var(--accent)}
      h1{
      font-size:clamp(44px,5.2vw,74px);
      font-weight:850;
      line-height:1.05;
      letter-spacing:-3px;
      margin:0 0 28px}
      h1 span{
      color:var(--accent)}
      .lead{
      font-size:17px;
      color:#bdcbd0;
      max-width:410px}
      .actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:30px}
      .hero .button{
      background:var(--accent);
      color:var(--dark)}
      .hero .button.outline{
      background:transparent;
      color:white;
      border-color:#ffffff45}
      .hero-photo{
      position:relative;
      min-width:0;
      background:#203b48}
      .slide-stage{
      height:100%;
      min-height:560px;
      position:relative;
      background:#203b48}
      .slide-stage img{
      width:100%;
      height:100%;
      position:absolute;
      inset:0;
      object-fit:contain;
      background:#203b48}
      .slide-placeholder{
      height:100%;
      min-height:560px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      padding:36px;
      text-align:center;
      color:#d9e3e7;
      background:radial-gradient(ellipse at 80% 15%,#406572,transparent 65%),repeating-linear-gradient(135deg,transparent 0 45px,#ffffff03 46px 47px),#203b48}
      .slide-placeholder span{
      display:grid;
      place-items:center;
      width:96px;
      height:96px;
      border:1px solid #ffffff30;
      border-radius:50%;
      font-size:45px;
      color:var(--accent);
      margin-bottom:24px}
      .slide-placeholder strong{
      font-size:21px;
      font-weight:650}
      .slide-placeholder p{
      font-size:13px;
      color:#adc1c8;
      margin-top:10px}
      .slide-controls{
      position:absolute;
      bottom:20px;
      left:50%;
      transform:translateX(-50%);
      display:flex;
      align-items:center;
      gap:12px;
      padding:7px 10px;
      background:#102733df;
      color:white;
      border:1px solid #ffffff25;
      border-radius:100px;
      backdrop-filter:blur(12px);
      white-space:nowrap}
      .slide-controls button{
      border:0;
      background:transparent;
      color:white;
      min-height:35px;
      min-width:35px;
      border-radius:100px;
      cursor:pointer}
      .slide-controls button:hover{
      background:#ffffff20}
      #slide-pause{
      padding:0 9px;
      font-size:12px}
      #slide-counter{
      font-size:12px;
      min-width:44px;
      text-align:center}
      .hero-photo noscript{
      position:absolute;
      bottom:15px;
      left:20px;
      color:white;
      font-size:12px}
      .facts{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      margin:0;
      padding:30px 24px;
      border-bottom:1px solid var(--line)}
      .facts div{
      display:flex;
      gap:14px;
      align-items:center;
      justify-content:center;
      border-right:1px solid var(--line)}
      .facts div:last-child{
      border:0}
      .facts strong{
      font-size:21px;
      letter-spacing:-.7px}
      .facts span{
      max-width:110px;
      font-size:12px;
      color:var(--muted);
      line-height:1.45}
      section{
      padding:88px 0}
      h2{
      font-size:clamp(32px,3.5vw,48px);
      line-height:1.14;
      letter-spacing:-1.8px;
      margin:0 0 24px}
      h3{
      font-size:23px;
      line-height:1.3;
      letter-spacing:-.5px;
      margin:0 0 15px}
      p{
      margin:0 0 20px}
      .about{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:90px}
      .about p{
      color:var(--muted);
      font-size:16px}
      .about .button{
      margin-top:8px}
      .section-head{
      display:flex;
      justify-content:space-between;
      align-items:end;
      gap:40px;
      margin-bottom:38px}
      .section-head h2{
      margin-bottom:0}
      .section-head p{
      max-width:400px;
      color:var(--muted);
      font-size:15px;
      margin:0}
      .cards{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:26px}
      .card{
      position:relative;
      background:white;
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 7px 28px #172b3807;
      border:1px solid #e4e8e4;
      display:flex;
      flex-direction:column;
      transition:transform .25s,box-shadow .25s}
      .card:hover{
      transform:translateY(-6px);
      box-shadow:0 15px 35px #172b3812}
      .card img{
      height:245px}
      .card-body{
      padding:28px;
      display:flex;
      flex-direction:column;
      flex:1}
      .tag{
      font-size:10px;
      font-weight:800;
      letter-spacing:1.5px;
      color:#5a7481;
      margin-bottom:14px}
      .card p{
      color:var(--muted);
      font-size:14px}
      .card a{
      margin-top:auto;
      padding-top:18px;
      border-top:1px solid var(--line);
      font-size:13px;
      font-weight:750;
      text-decoration:none}
      .card a:hover{
      text-decoration:underline;
      text-underline-offset:4px}
      #features1-2{
      background:#e9eeeb;
      border-top:1px solid #e1e6e2;
      border-bottom:1px solid #e1e6e2}
      .support{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:28px;
      background:var(--accent);
      border-radius:20px;
      margin-top:32px;
      padding:30px 34px}
      .support h3{
      font-size:20px;
      margin-bottom:7px}
      .support p{
      font-size:13px;
      margin:0}
      .support strong{
      font-size:21px;
      letter-spacing:-.5px;
      white-space:nowrap}
      .support .button{
      background:var(--dark);
      color:white;
      font-size:12px;
      padding:13px 20px}
      .contact{
      display:grid;
      grid-template-columns:.8fr 1.2fr;
      gap:80px}
      .contact-panel{
      border-top:2px solid var(--ink)}
      .contact-panel dl{
      margin:0}
      .contact-panel dt{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:1.3px;
      color:var(--muted);
      margin:20px 0 5px}
      .contact-panel dd{
      font-size:clamp(17px,2vw,24px);
      font-weight:650;
      margin:0;
      padding-bottom:20px;
      border-bottom:1px solid var(--line);
      overflow-wrap:anywhere}
      .contact-panel a{
      text-decoration:none}
      .contact-panel a:hover{
      text-decoration:underline;
      text-underline-offset:5px}
      .share{
      margin-top:32px}
      .notice{
      font-size:12px;
      color:var(--muted);
      margin-top:12px}
      footer{
      background:var(--dark);
      color:#c1d0d6;
      padding:42px 0}
      .footer-row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:24px;
      font-size:12px}
      .footer-row strong{
      font-size:20px;
      color:white}
      .footer-links{
      display:flex;
      gap:24px}
      .footer-links a{
      text-decoration:none}
      .footer-links a:hover{
      color:var(--accent)}
      @media(max-width:1000px){
      .wrap{
      width:calc(100% - 40px)}
      nav a{
      padding:10px 14px}
      .hero-copy{
      padding:48px 32px}
      .hero-grid,.slide-stage,.slide-placeholder{
      min-height:520px}
      .facts div{
      gap:10px}
      .facts strong{
      font-size:18px}
      .about{
      gap:40px}
      .cards{
      gap:18px}
      .card-body{
      padding:22px}
      .support{
      flex-wrap:wrap}
      .contact{
      gap:40px}
      }
      @media(max-width:760px){
      html{
      scroll-padding-top:92px}
      .wrap{
      width:calc(100% - 32px)}
      .header-row{
      min-height:80px;
      position:relative}
      .brand-icon{
      width:38px;
      height:38px}
      .brand-name{
      font-size:22px}
      .brand small{
      font-size:8px}
      .menu-toggle{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:center;
      padding:10px 14px;
      background:white;
      color:var(--ink);
      border:1px solid var(--line);
      border-radius:100px;
      font-size:12px;
      font-weight:700;
      cursor:pointer}
      .menu-icon{
      display:grid;
      gap:4px}
      .menu-icon i{
      display:block;
      width:16px;
      height:2px;
      background:currentColor}
      nav{
      display:none;
      position:absolute;
      top:73px;
      right:0;
      left:0;
      flex-direction:column;
      align-items:stretch;
      border-radius:18px;
      background:#f4f5f2;
      padding:10px;
      box-shadow:0 20px 50px #10273320;
      gap:3px}
      nav.open{
      display:flex}
      nav a{
      padding:14px 18px;
      border-radius:10px;
      font-size:14px}
      .hero{
      margin-top:18px}
      .hero-grid{
      grid-template-columns:1fr;
      border-radius:20px;
      min-height:0}
      .hero-copy{
      padding:35px 26px 40px}
      h1{
      font-size:clamp(42px,10vw,64px);
      letter-spacing:-2px}
      .hero .eyebrow{
      font-size:9px;
      letter-spacing:1.4px}
      .lead{
      font-size:15px}
      .actions{
      gap:10px}
      .button{
      padding:13px 20px;
      font-size:12px}
      .slide-stage,.slide-placeholder{
      height:340px;
      min-height:340px}
      .facts{
      padding:24px 0;
      gap:6px}
      .facts div{
      flex-direction:column;
      text-align:center;
      gap:5px}
      .facts strong{
      font-size:17px}
      .facts span{
      font-size:11px}
      section{
      padding:56px 0}
      .about,.contact{
      grid-template-columns:1fr;
      gap:28px}
      h2{
      letter-spacing:-1.2px}
      .section-head{
      display:block}
      .section-head p{
      margin-top:18px}
      .cards{
      grid-template-columns:1fr;
      gap:22px}
      .card img{
      height:260px}
      .card-body{
      padding:25px}
      .support{
      padding:26px;
      gap:20px}
      .support strong{
      font-size:21px}
      .support .button{
      width:100%}
      .footer-row{
      align-items:flex-start;
      flex-direction:column;
      gap:25px}
      .slide-controls{
      gap:8px}
      .contact-panel dd{
      font-size:19px}
      }
      @media(prefers-reduced-motion:reduce){
      html{
      scroll-behavior:auto}
      *{
      transition:none!important}
      .button:hover,.card:hover{
      transform:none}
      }
      .sr-only{
      position:absolute;
      width:1px;
      height:1px;
      padding:0;
      margin:-1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      white-space:nowrap;
      border:0}
      .archive-hero{
      margin-top:32px;
      display:grid;
      grid-template-columns:1.1fr .9fr;
      border-radius:24px;
      overflow:hidden;
      background:var(--dark);
      color:white}
      .archive-copy{
      padding:48px}
      .archive-copy .eyebrow{
      color:var(--accent)}
      .archive-copy h1{
      font-size:clamp(40px,5vw,66px)}
      .archive-copy p{
      color:#bdcbd0;
      max-width:480px}
      .archive-hero img{
      height:100%;
      min-height:370px;
      object-fit:cover}
      .breadcrumb{
      font-size:12px;
      margin-bottom:24px;
      color:#bdcbd0}
      .breadcrumb a{
      text-decoration:none}
      .breadcrumb a:hover{
      text-decoration:underline}
      .archive-section{
      padding:54px 0 76px}
      .filters{
      display:flex;
      gap:16px;
      align-items:end;
      flex-wrap:wrap;
      margin-bottom:24px}
      .filter-field{
      display:flex;
      flex-direction:column;
      gap:8px;
      flex:1;
      min-width:200px}
      .filter-field label{
      font-size:12px;
      font-weight:750}
      .filter-field input,.filter-field select{
      font:inherit;
      color:var(--ink);
      padding:13px 16px;
      border:1px solid #bbc8cd;
      border-radius:12px;
      background:white;
      width:100%}
      .filter-field input:focus-visible,.filter-field select:focus-visible{
      outline:3px solid #c58b00;
      outline-offset:3px}
      .filter-field:last-child{
      max-width:240px}
      .archive-meta{
      display:flex;
      justify-content:space-between;
      gap:20px;
      font-size:13px;
      color:var(--muted);
      margin:0 0 22px}
      .tour-list{
      list-style:none;
      margin:0;
      padding:0;
      border-top:2px solid var(--ink)}
      .tour{
      display:flex;
      gap:24px;
      align-items:center;
      padding:18px 8px;
      border-bottom:1px solid var(--line)}
      .tour-year{
      font-size:13px;
      font-weight:850;
      background:#e6ece7;
      padding:5px 11px;
      border-radius:100px;
      flex:none}
      .tour a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:25px;
      flex:1;
      text-decoration:none;
      font-size:15px;
      font-weight:650}
      .tour a:hover{
      color:#7c5900}
      .album-arrow{
      width:32px;
      height:32px;
      display:grid;
      place-items:center;
      background:white;
      border:1px solid var(--line);
      border-radius:50%;
      flex:none}
      .no-results{
      padding:35px;
      border:1px dashed var(--line);
      border-radius:12px}
      .archive-contact{
      margin-top:40px;
      padding:28px;
      border-radius:18px;
      background:#e9eeeb;
      font-size:14px}
      .archive-contact p{
      margin-bottom:8px}
      .archive-contact p:last-child{
      margin:0}
      @media(max-width:760px){
      .archive-hero{
      grid-template-columns:1fr;
      margin-top:18px}
      .archive-copy{
      padding:30px 26px}
      .archive-hero img{
      height:240px;
      min-height:240px}
      .archive-section{
      padding-top:35px}
      .filter-field:last-child{
      max-width:none}
      .archive-meta{
      flex-direction:column;
      gap:5px}
      .tour{
      gap:12px;
      align-items:start;
      padding:18px 0}
      .tour a{
      font-size:13px;
      gap:12px}
      .tour-year{
      font-size:11px;
      padding:4px 8px}
      .archive-contact{
      padding:22px;
      overflow-wrap:anywhere}
      }
          /* Kör alakú egyesületi logó. */
      .brand-icon {
        overflow: hidden;
        flex-shrink: 0;
        background: white;
      }
      .brand-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 50%;
      }
          /* A színes logó az előző méret 1,5-szerese. */
      .brand-icon {
        width: 69px;
        height: 69px;
        background: transparent;
      }
      @media (max-width: 760px) {
        .brand-icon {
          width: 57px;
          height: 57px;
        }
      }