:root{
  --navy:#0F2438;--navy-soft:#4A5A68;--teal:#1E7A72;--teal-dark:#155C55;
  --gold:#D9A552;--cream:#FDF3E4;--border:#E7E3DA;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Plus Jakarta Sans',sans-serif;color:var(--navy);background:var(--cream);}
a{color:inherit;}

/* Hero */
.hub-hero{
  position:relative;overflow:hidden;min-height:640px;display:flex;flex-direction:column;
  padding:20px 20px 40px;color:#fff;
}
.hub-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 15%;z-index:0;}
.hub-hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(15,36,56,0.35) 0%, rgba(15,36,56,0.75) 55%, var(--navy) 100%);
}
.hub-nav{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;margin-bottom:auto;}
.hub-nav-logo{height:34px;filter:brightness(0) invert(1);}
.hub-nav-burger{
  background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);color:#fff;
  width:40px;height:40px;border-radius:10px;font-size:1.1rem;cursor:pointer;
}
.hub-hero-inner{position:relative;z-index:2;margin-top:32px;text-align:center;}
.hub-hero-eyebrow{
  display:inline-block;background:rgba(217,165,82,0.2);color:var(--gold);
  font-size:0.72rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;
  padding:6px 14px;border-radius:100px;margin-bottom:14px;
}
.hub-hero h1{font-size:1.6rem;line-height:1.25;font-weight:800;margin-bottom:12px;}
.hub-hero-sub{font-size:0.88rem;line-height:1.55;color:rgba(255,255,255,0.82);max-width:440px;margin:0 auto 22px;}

.hub-flag-strip-wrap{display:flex;align-items:center;gap:6px;margin-bottom:20px;}
.hub-flag-arrow{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.08);color:#fff;font-size:1.1rem;cursor:pointer;
}
.hub-flag-arrow:hover{border-color:var(--gold);color:var(--gold);}
.hub-flag-strip{
  display:flex;gap:10px;overflow-x:auto;padding:4px 4px 10px;margin-bottom:0;flex:1;
  scrollbar-width:none;justify-content:flex-start;scroll-behavior:smooth;
}
.hub-flag-strip::-webkit-scrollbar{display:none;}
.hub-flag{
  flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px;
  background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);
  border-radius:14px;padding:10px 14px;font-size:1.6rem;opacity:0.55;min-width:64px;
  cursor:pointer;font-family:inherit;transition:transform 0.15s ease, opacity 0.15s ease;
}
.hub-flag:hover{transform:translateY(-2px);opacity:0.8;}
.hub-flag span{font-size:0.62rem;font-weight:700;color:rgba(255,255,255,0.85);}
.hub-flag-live{opacity:1;background:rgba(217,165,82,0.22);border-color:var(--gold);}
.hub-flag-live:hover{opacity:1;}
.hub-flag-more{opacity:0.8;}

.hub-hero-cta{
  display:inline-block;background:var(--gold);color:var(--navy);font-weight:800;
  padding:13px 26px;border-radius:100px;text-decoration:none;font-size:0.92rem;
}

/* Sections */
.hub-main{max-width:1100px;margin:0 auto;}
.hub-section{padding:44px 20px;}
.hub-section-head{text-align:center;max-width:480px;margin:0 auto 28px;}
.hub-eyebrow{
  display:inline-block;font-size:0.72rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--teal-dark);background:rgba(30,122,114,0.1);padding:5px 14px;border-radius:100px;margin-bottom:10px;
}
.hub-section-head h2{font-size:1.4rem;color:var(--navy);margin-bottom:8px;}
.hub-section-head p{font-size:0.86rem;color:var(--navy-soft);line-height:1.5;}

/* 3D Karussell - echter Kreis */
.hub-section-carousel{
  padding:28px 20px;
}
.hub-section-carousel .hub-eyebrow{background:rgba(30,122,114,0.1);color:var(--teal-dark);}
.hub-section-carousel .hub-section-head h2{color:var(--navy);}
.hub-section-carousel .hub-section-head p{color:var(--navy-soft);}

.hub-carousel-wrap{
  position:relative;padding:10px 0 20px;display:flex;align-items:center;justify-content:center;gap:6px;
}
.hub-carousel-arrow{
  width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.2);background:rgba(255,255,255,0.06);
  font-size:1.1rem;color:#fff;cursor:pointer;flex-shrink:0;z-index:6;
}
.hub-carousel-arrow:hover{border-color:var(--gold);color:var(--gold);}
.hub-carousel-3d{
  position:relative;width:150px;height:210px;perspective:900px;flex-shrink:0;
  transform-style:preserve-3d;cursor:grab;user-select:none;
}
.hub-carousel-3d:active{cursor:grabbing;}
.hub-card{
  position:absolute;top:0;left:0;width:150px;height:210px;background:#181818;border-radius:14px;
  padding:0;text-align:center;box-shadow:0 10px 22px rgba(0,0,0,0.45);
  text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:transform 0.45s cubic-bezier(.22,.68,0,1.02), opacity 0.4s ease;
  color:#fff;border:1px solid rgba(255,255,255,0.08);overflow:hidden;
  -webkit-font-smoothing:antialiased;transform-style:preserve-3d;will-change:transform;
}
.hub-carousel-3d.is-dragging .hub-card{transition:opacity 0.4s ease;}
.hub-card-flag{font-size:1.7rem;margin-bottom:6px;}
.hub-card h3{font-size:0.8rem;color:#fff;margin-bottom:2px;padding:0 8px;}
.hub-card-partner{font-size:0.58rem;color:var(--gold);font-weight:700;margin-bottom:6px;}
.hub-card-desc{font-size:0.62rem;color:rgba(255,255,255,0.65);line-height:1.4;margin-bottom:8px;min-height:2.4em;padding:0 12px;}
.hub-card-btn{
  display:inline-block;background:var(--gold);color:var(--navy);font-size:0.6rem;font-weight:800;
  padding:5px 11px;border-radius:100px;
}
.hub-card-soon .hub-card-flag{filter:grayscale(1);opacity:0.6;}
.hub-card-btn-soon{background:rgba(255,255,255,0.15);color:#fff;}
.hub-card:not(.is-active){pointer-events:none;}

/* Modal für unbesetzte Länder */
.hub-modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(15,36,56,0.6);z-index:900;
  align-items:center;justify-content:center;padding:20px;
}
.hub-modal-overlay.open{display:flex;}
.hub-modal{
  background:#fff;border-radius:20px;padding:32px 26px;max-width:380px;width:100%;
  text-align:center;position:relative;
}
.hub-modal-close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;
  border:none;background:var(--cream);color:var(--navy);font-size:1rem;cursor:pointer;
}
.hub-modal-flag{font-size:3rem;margin-bottom:10px;}
.hub-modal h3{font-size:1.3rem;color:var(--navy);margin-bottom:14px;}
.hub-modal-text{font-size:0.88rem;color:var(--navy-soft);line-height:1.55;margin-bottom:10px;}
.hub-modal-text-strong{color:var(--navy);font-weight:700;}
.hub-modal-btn{
  display:block;background:var(--gold);color:var(--navy);font-weight:800;
  padding:13px;border-radius:100px;text-decoration:none;margin:18px 0 10px;font-size:0.9rem;
}
.hub-modal-secondary{
  background:none;border:none;color:var(--navy-soft);font-size:0.82rem;text-decoration:underline;cursor:pointer;
}

/* List */
.hub-section-alt{background:#fff;}
.hub-list{display:flex;flex-direction:column;gap:10px;max-width:560px;margin:0 auto;}
.hub-list-item{
  display:flex;align-items:center;gap:14px;padding:14px 16px;border:1.5px solid var(--border);
  border-radius:14px;text-decoration:none;color:var(--navy);
}
.hub-list-flag{font-size:1.6rem;flex-shrink:0;}
.hub-list-text{flex:1;display:flex;flex-direction:column;gap:2px;}
.hub-list-text strong{font-size:0.95rem;}
.hub-list-text small{font-size:0.78rem;color:var(--navy-soft);}
.hub-list-badge{font-size:0.72rem;font-weight:800;padding:5px 12px;border-radius:100px;flex-shrink:0;}
.hub-badge-live{background:rgba(30,122,114,0.12);color:var(--teal-dark);}
.hub-badge-soon{background:var(--cream);color:var(--navy-soft);}
.hub-badge-partner{background:var(--gold);color:var(--navy);}
.hub-list-partner{border-color:var(--gold);border-style:dashed;}
.hub-list-soon{opacity:0.75;}

/* Values */
.hub-section-dark{background:var(--navy);color:#fff;}
.hub-section-dark .hub-section-head p{color:rgba(255,255,255,0.7);}
.hub-section-dark .hub-eyebrow{background:rgba(217,165,82,0.15);color:var(--gold);}
.hub-values{display:flex;flex-direction:column;gap:12px;max-width:400px;margin:0 auto;}
.hub-value{
  display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);border-radius:14px;padding:16px 18px;font-size:0.92rem;font-weight:700;
}
.hub-value span{font-size:1.4rem;}

.hub-footer{text-align:center;padding:44px 24px 28px;font-size:0.78rem;color:var(--navy-soft);}
.footer-inner{max-width:640px;margin:0 auto;}
.footer-logo{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:1.15rem;color:var(--navy);margin-bottom:10px;text-decoration:none;}
.footer-desc{font-size:0.88rem;margin-bottom:18px;}
.footer-links{display:flex;justify-content:center;gap:20px;margin-bottom:16px;}
.footer-links a{font-size:0.85rem;color:var(--navy-soft);text-decoration:none;}
.footer-links a:hover{color:var(--teal-dark);}
.footer-counter{font-size:0.8rem;margin-bottom:6px;color:var(--navy-soft);}
.footer-copy{font-size:0.75rem;color:var(--navy-soft);opacity:.8;}

/* Legal-Modal - identisch zur Hauptseite (../impressum.php / ../datenschutz.php werden
   direkt von dort geladen, keine eigene Kopie der Rechtstexte hier). */
.legal-modal-overlay{
  display:none;position:fixed;inset:0;z-index:1050;
  background:rgba(8,24,39,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  align-items:center;justify-content:center;padding:28px;
}
.legal-modal-overlay.open{display:flex;}
.legal-modal{
  width:min(960px,100%);max-width:960px;max-height:min(88vh,900px);
  padding:0;overflow:hidden;border-radius:30px;background:#f7f6f1;
  box-shadow:0 34px 100px rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.55);
  position:relative;
}
.legal-modal-close{
  position:absolute;top:18px;right:18px;z-index:20;margin:0;width:44px;height:44px;
  display:grid;place-items:center;border-radius:50%;color:#fff;
  background:rgba(15,36,56,.78);border:1px solid rgba(255,255,255,.3);
  box-shadow:0 8px 24px rgba(0,0,0,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:1rem;cursor:pointer;
}
.legal-modal-close:hover{background:var(--teal);transform:scale(1.04);}
.legal-modal-body{
  padding:0;max-height:min(88vh,900px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--teal) transparent;
}
.legal-modal-body::-webkit-scrollbar{width:9px;}
.legal-modal-body::-webkit-scrollbar-thumb{background:var(--teal);border-radius:999px;border:3px solid #f7f6f1;}
.legal-modal-body .legal-page{max-width:none;margin:0;padding:0 34px 42px;background:transparent;box-shadow:none;border-radius:0;}
.legal-hero{
  margin:0 -34px 30px;padding:54px 70px 42px 42px;color:#fff;
  background:radial-gradient(circle at 88% 8%,rgba(255,255,255,.16),transparent 30%),
    linear-gradient(135deg,var(--navy) 0%,#173e54 58%,var(--teal-dark) 100%);
}
.legal-kicker{display:inline-block;margin-bottom:10px;font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8ee0d9;}
.legal-page .legal-hero h1{margin:0 0 10px;padding:0;border:0;color:#fff;font-size:clamp(2.15rem,5vw,3.5rem);line-height:1.05;letter-spacing:-.045em;}
.legal-hero p{max-width:670px;margin:0;color:rgba(255,255,255,.78);font-size:1rem;line-height:1.65;}
.legal-grid{display:grid;gap:18px;}
.legal-grid-two{grid-template-columns:1.25fr .75fr;}
.legal-section{
  display:flex;gap:16px;align-items:flex-start;min-width:0;padding:24px;border-radius:22px;
  background:#fff;border:1px solid rgba(15,36,56,.08);box-shadow:0 10px 28px rgba(15,36,56,.07);
}
.legal-section-featured{grid-row:span 2;background:linear-gradient(145deg,#fff,#f1fbf9);}
.legal-section-wide{margin-top:18px;}
.legal-icon{flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:#e7f7f5;color:var(--teal-dark);font-weight:800;font-size:1.05rem;}
.legal-page .legal-section h2{margin:1px 0 10px;padding:0;border:0;color:var(--navy);font-size:1.05rem;line-height:1.3;}
.legal-page .legal-section p{margin:0 0 9px;color:var(--navy-soft);font-size:.94rem;line-height:1.7;}
.legal-page .legal-section p:last-child{margin-bottom:0;}
.legal-address{font-size:1rem!important;}
.legal-note,.legal-muted{color:#6f7e89!important;font-size:.86rem!important;}
.legal-mail,.legal-external{font-weight:700;color:var(--teal-dark)!important;text-decoration:none!important;overflow-wrap:anywhere;}
.legal-external{display:inline-flex;align-items:center;gap:7px;margin-top:4px;}
.legal-dispute{background:#fffaf0;border-color:#f1dfb6;}
.legal-jump{display:flex;gap:8px;flex-wrap:wrap;margin:-6px 0 22px;}
.legal-jump a{padding:9px 13px;border-radius:999px;background:#fff;border:1px solid rgba(15,36,56,.1);color:var(--navy)!important;text-decoration:none!important;font-size:.8rem;font-weight:700;}
.legal-jump a:hover{border-color:var(--teal);color:var(--teal-dark)!important;}
.legal-stack{display:grid;gap:16px;}
.legal-stack .legal-section-wide{margin-top:0;}
.legal-highlight{background:linear-gradient(145deg,#effbf8,#fff);border-color:#cbece7;}
.legal-highlight .legal-icon{background:var(--teal);color:#fff;}
@media (max-width:700px){
  .legal-modal-overlay{padding:0;align-items:stretch;}
  .legal-modal{width:100%;height:100%;max-height:none;border-radius:0;}
  .legal-modal-body{max-height:100vh;}
  .legal-modal-close{position:fixed;top:12px;right:12px;width:42px;height:42px;}
  .legal-modal-body .legal-page{padding:0 16px 28px;}
  .legal-hero{margin:0 -16px 22px;padding:62px 58px 30px 20px;border-radius:0 0 26px 26px;}
  .legal-hero p{font-size:.91rem;line-height:1.55;}
  .legal-grid-two{grid-template-columns:1fr;}
  .legal-section-featured{grid-row:auto;}
  .legal-section{padding:18px;border-radius:18px;gap:13px;}
  .legal-icon{flex-basis:38px;width:38px;height:38px;border-radius:12px;}
  .legal-jump{gap:7px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none;}
  .legal-jump::-webkit-scrollbar{display:none;}
  .legal-jump a{flex:0 0 auto;}
}

/* Hamburger-Menü - Schublade von rechts, nicht mittig wie ein Popup */
.hub-menu-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(8,24,39,0);pointer-events:none;
  transition:background .3s ease;
}
.hub-menu-overlay.open{background:rgba(8,24,39,.55);pointer-events:auto;}
.hub-menu-panel{
  position:absolute;top:0;right:0;height:100%;width:min(340px,86vw);
  background:#fff;box-shadow:-24px 0 60px rgba(0,0,0,.25);
  transform:translateX(100%);transition:transform .34s cubic-bezier(.16,1,.3,1);
  padding:88px 26px 30px;overflow-y:auto;text-align:left;
}
.hub-menu-overlay.open .hub-menu-panel{transform:translateX(0);}
.hub-menu-close{
  position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;
  border:none;background:var(--cream);color:var(--navy);font-size:1.05rem;cursor:pointer;
}
.hub-menu-brand{font-weight:800;font-size:1.05rem;margin-bottom:18px;color:var(--navy);}
.hub-menu-links{display:grid;gap:4px;}
.hub-menu-links a{
  display:block;padding:12px 14px;border-radius:12px;font-weight:700;font-size:.94rem;
  color:var(--navy);text-decoration:none;
}
.hub-menu-links a:hover{background:var(--cream);color:var(--teal-dark);}
@media (max-width:520px){
  .hub-menu-panel{width:82vw;padding-top:80px;}
}

/* Desktop */
@media (min-width:900px){
  .hub-hero h1{font-size:2.6rem;}
  .hub-hero-sub{font-size:1rem;max-width:560px;}
  .hub-hero{min-height:600px;padding:24px 48px 56px;}
  .hub-hero-inner{margin-top:60px;}
  .hub-section{padding:64px 40px;}
  .hub-carousel-3d{width:180px;height:250px;}
  .hub-card{width:180px;height:250px;}
  .hub-values{flex-direction:row;max-width:800px;}
  .hub-value{flex:1;flex-direction:column;text-align:center;}
}

.hub-list-loading{text-align:center;color:var(--navy-soft);padding:20px;}

/* Echte Flaggen-Bilder (für Länder ohne Unicode-Emoji, z. B. Nordzypern) */
.hub-card-flag-img{width:44px;height:auto;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,0.3);}
.hub-list-flag-img{width:26px;height:auto;border-radius:3px;}
.hub-flag-icon-img{width:24px;height:auto;border-radius:3px;}
.hub-modal-flag-icon-img{width:56px;height:auto;border-radius:5px;margin:0 auto;}

/* 2026 Länderhub refresh: warmes, hochwertiges Länder-Karussell */
.hub-section-carousel{position:relative;overflow:hidden;background:linear-gradient(180deg,#FDF3E4 0%,#F8EAD4 100%);}
.hub-section-carousel .hub-section-head{margin-bottom:18px;}
.hub-carousel-stage{
  position:relative;max-width:860px;margin:0 auto;border:1px solid rgba(15,36,56,.08);
  border-radius:30px;padding:24px 10px 18px;overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(255,250,241,.5));
  box-shadow:0 24px 60px rgba(89,61,30,.10),inset 0 1px 0 rgba(255,255,255,.85);
}
.hub-carousel-stage:before{content:"";position:absolute;left:8%;right:8%;bottom:54px;height:36px;border-radius:50%;background:rgba(15,36,56,.09);filter:blur(18px);}
.hub-carousel-glow{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none;}
.hub-carousel-glow-one{width:240px;height:240px;left:-90px;top:-100px;background:radial-gradient(circle,rgba(217,165,82,.24),transparent 68%);}
.hub-carousel-glow-two{width:260px;height:260px;right:-100px;bottom:-120px;background:radial-gradient(circle,rgba(30,122,114,.16),transparent 68%);}
.hub-carousel-wrap{min-height:260px;padding:8px 0 6px;gap:16px;}
.hub-carousel-arrow{
  width:42px;height:42px;border:none;background:rgba(255,255,255,.82);color:var(--navy);
  box-shadow:0 6px 18px rgba(15,36,56,.12);backdrop-filter:blur(10px);font-size:1.35rem;
  transition:transform .18s ease,background .18s ease,color .18s ease;
}
.hub-carousel-arrow:hover{background:var(--navy);color:#fff;border-color:transparent;transform:scale(1.06);}
.hub-carousel-3d{width:168px;height:232px;perspective:1100px;}
.hub-card{
  width:168px;height:232px;border-radius:22px;padding:22px 14px 16px;justify-content:flex-end;
  background:linear-gradient(155deg,#FFFDF8 0%,#F5E6CE 100%);color:var(--navy);
  border:1px solid rgba(255,255,255,.8);box-shadow:0 18px 38px rgba(15,36,56,.18);
  overflow:hidden;isolation:isolate;
}
.hub-card:before{content:"";position:absolute;z-index:-2;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.72) 54%,rgba(255,255,255,.96) 100%);}
.hub-card:after{content:"";position:absolute;z-index:-3;left:-25%;right:-25%;top:-18%;height:58%;border-radius:0 0 50% 50%;background:linear-gradient(135deg,var(--gold),#F4D49A);opacity:.78;}
.hub-card[data-id="zypern"]:after{background:linear-gradient(135deg,#D9A552,#F3D49B);}
.hub-card[data-id="nordzypern"]:after{background:linear-gradient(135deg,#C95C54,#F0B1A8);}
.hub-card[data-id="malta"]:after{background:linear-gradient(135deg,#D96762,#F5C2A6);}
.hub-card[data-id="spanien"]:after{background:linear-gradient(135deg,#D7A43D,#F3C65D);}
.hub-card[data-id="portugal"]:after{background:linear-gradient(135deg,#2D8375,#E3B455);}
.hub-card[data-id="kroatien"]:after{background:linear-gradient(135deg,#4E78A6,#D55F5C);}
.hub-card[data-id="griechenland"]:after{background:linear-gradient(135deg,#4D86B8,#BFD9ED);}
.hub-card-flag{position:absolute;top:27px;left:50%;transform:translateX(-50%);font-size:3.35rem;margin:0;filter:drop-shadow(0 8px 10px rgba(15,36,56,.16));}
.hub-card-flag-img{width:68px!important;border-radius:7px!important;box-shadow:0 8px 16px rgba(15,36,56,.16)!important;}
.hub-card h3{font-size:.92rem;color:var(--navy);margin-bottom:4px;padding:0;font-weight:800;}
.hub-card-partner{font-size:.61rem;color:var(--teal-dark);margin-bottom:7px;}
.hub-card-desc{font-size:.62rem;color:var(--navy-soft);line-height:1.42;margin-bottom:10px;min-height:2.7em;padding:0 2px;}
.hub-card-btn{background:var(--navy);color:#fff;font-size:.61rem;padding:7px 12px;box-shadow:0 5px 12px rgba(15,36,56,.12);}
.hub-card-soon{filter:none;}
.hub-card-soon .hub-card-flag{filter:drop-shadow(0 8px 10px rgba(15,36,56,.14));opacity:.92;}
.hub-card-btn-soon{background:rgba(15,36,56,.08);color:var(--navy);box-shadow:none;}
.hub-card.is-active{box-shadow:0 24px 48px rgba(15,36,56,.24),0 0 0 2px rgba(217,165,82,.18);}
.hub-card:not(.is-active){filter:saturate(.82);}
.hub-carousel-meta{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:2px;}
.hub-carousel-hint{font-size:.68rem;color:var(--navy-soft);}
.hub-carousel-dots{display:flex;gap:7px;align-items:center;justify-content:center;}
.hub-carousel-dot{width:7px;height:7px;border:0;border-radius:50%;padding:0;background:rgba(15,36,56,.18);cursor:pointer;transition:width .2s ease,background .2s ease;}
.hub-carousel-dot.is-active{width:22px;border-radius:100px;background:var(--gold);}
@media (min-width:900px){
  .hub-carousel-stage{padding:28px 24px 20px;}
  .hub-carousel-wrap{min-height:310px;gap:34px;}
  .hub-carousel-3d{width:196px;height:270px;}
  .hub-card{width:196px;height:270px;padding:26px 17px 20px;}
  .hub-card-flag{top:32px;font-size:4rem;}
  .hub-card-flag-img{width:78px!important;}
  .hub-card h3{font-size:1.02rem;}.hub-card-desc{font-size:.68rem;}.hub-card-partner{font-size:.66rem;}
}

/* Normalize image flags (e.g. Nordzypern) to the same visual box as emoji flags */
.hub-flag-icon-img{
  width:32px!important;
  height:24px!important;
  object-fit:cover;
  display:block;
  border-radius:4px!important;
}
.hub-card-flag-img{
  width:72px!important;
  height:48px!important;
  object-fit:cover;
  display:block;
  border-radius:8px!important;
}
.hub-list-flag-img{
  width:32px!important;
  height:22px!important;
  object-fit:cover;
  display:block;
  border-radius:4px!important;
}
.hub-modal-flag-icon-img{
  width:72px!important;
  height:48px!important;
  object-fit:cover;
  display:block;
  border-radius:8px!important;
  margin:0 auto;
}

/* Mobile: ruhiges Center-Carousel statt 3D-Lamellen */
@media (max-width:699px){
  .hub-section-carousel{padding:26px 14px 32px;}
  .hub-section-carousel .hub-section-head{margin-bottom:16px;}
  .hub-carousel-stage{
    max-width:100%;
    border-radius:24px;
    padding:14px 0 16px;
    overflow:hidden;
  }
  .hub-carousel-stage:before{bottom:42px;left:18%;right:18%;height:26px;}
  .hub-carousel-wrap{
    min-height:320px;
    padding:4px 0;
    gap:0;
  }
  .hub-carousel-3d{
    width:100%;
    max-width:100%;
    height:302px;
    perspective:none;
    transform-style:flat;
    overflow:visible;
  }
  .hub-card{
    left:50%;
    top:4px;
    width:min(68vw,260px);
    height:292px;
    padding:24px 16px 18px;
    border-radius:22px;
    transform-origin:center center;
    backface-visibility:visible;
    -webkit-backface-visibility:visible;
    transition:transform .34s cubic-bezier(.2,.75,.25,1),opacity .3s ease,box-shadow .3s ease;
  }
  .hub-card.is-active{
    box-shadow:0 20px 44px rgba(15,36,56,.20),0 0 0 2px rgba(217,165,82,.18);
  }
  .hub-card-flag{top:34px;font-size:4rem;}
  .hub-card-flag-img{width:78px!important;height:52px!important;}
  .hub-card h3{font-size:1.04rem;margin-bottom:7px;}
  .hub-card-partner{font-size:.68rem;margin-bottom:8px;}
  .hub-card-desc{font-size:.69rem;line-height:1.5;margin-bottom:12px;}
  .hub-card-btn{font-size:.68rem;padding:8px 14px;}
  .hub-carousel-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:42px;height:42px;
    z-index:80;
  }
  .hub-carousel-arrow:hover{transform:translateY(-50%) scale(1.04);}
  .hub-carousel-prev{left:10px;}
  .hub-carousel-next{right:10px;}
  .hub-carousel-meta{margin-top:8px;gap:0;}
  .hub-carousel-hint{display:none!important;}
  .hub-carousel-dots{min-height:8px;gap:6px;}
  .hub-carousel-dot{width:6px;height:6px;}
  .hub-carousel-dot.is-active{width:20px;}
}

/* Clean slider: one focus card, only immediate neighbors visible */
.hub-carousel-stage{overflow:hidden;}
.hub-carousel-wrap{position:relative;min-height:310px;overflow:hidden;}
.hub-carousel-3d{
  position:relative!important;
  width:100%!important;
  max-width:860px!important;
  height:300px!important;
  perspective:none!important;
  transform-style:flat!important;
  overflow:visible!important;
  margin:0 auto;
  touch-action:pan-y;
  cursor:grab;
}
.hub-carousel-3d:active{cursor:grabbing;}
.hub-card{
  position:absolute!important;
  left:50%!important;
  top:8px!important;
  width:230px!important;
  height:282px!important;
  backface-visibility:visible!important;
  transform-origin:center center!important;
  transition:transform .42s cubic-bezier(.22,.75,.25,1),opacity .32s ease,box-shadow .32s ease!important;
  will-change:transform,opacity;
}
.hub-card.is-active{box-shadow:0 24px 52px rgba(15,36,56,.22),0 0 0 2px rgba(217,165,82,.24)!important;}
.hub-card.is-neighbor{filter:saturate(.82);}
.hub-carousel-arrow{z-index:80!important;}
.hub-carousel-meta{margin-top:8px!important;}
.hub-carousel-counter{
  min-width:58px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(15,36,56,.07);
  color:var(--navy-soft);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  text-align:center;
}

@media (max-width:699px){
  .hub-section-carousel{padding-left:0!important;padding-right:0!important;}
  .hub-carousel-stage{border-radius:22px!important;padding:12px 0 14px!important;}
  .hub-carousel-wrap{min-height:324px!important;}
  .hub-carousel-3d{height:306px!important;max-width:none!important;}
  .hub-card{
    top:6px!important;
    width:min(72vw,270px)!important;
    height:294px!important;
  }
  .hub-carousel-prev{left:14px!important;}
  .hub-carousel-next{right:14px!important;}
  .hub-carousel-arrow{width:44px!important;height:44px!important;}
}

/* Final carousel correction: centered desktop track, edge arrows, inactive countries grayscale */
.hub-carousel-wrap{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
}
.hub-carousel-3d{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin:0 auto!important;
}
.hub-carousel-arrow{
  position:absolute!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:46px!important;
  height:46px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(15,36,56,.10)!important;
  color:var(--navy)!important;
  box-shadow:0 8px 24px rgba(15,36,56,.14)!important;
  z-index:100!important;
}
.hub-carousel-prev{left:18px!important;}
.hub-carousel-next{right:18px!important;}
.hub-carousel-arrow:hover{
  border-color:rgba(217,165,82,.55)!important;
  color:var(--teal-dark)!important;
  transform:translateY(-50%) scale(1.04)!important;
}

/* Countries without an active partner stay visually inactive, even when selected. */
.hub-card-soon{
  filter:grayscale(1) saturate(0)!important;
  opacity:.72;
}
.hub-card-soon.is-active{
  filter:grayscale(1) saturate(0)!important;
  opacity:1;
  box-shadow:0 20px 42px rgba(15,36,56,.14),0 0 0 1px rgba(15,36,56,.10)!important;
}
.hub-card-soon .hub-card-flag,
.hub-card-soon .hub-card-flag-img{
  filter:grayscale(1)!important;
}
.hub-card-soon .hub-card-partner{color:#68737c!important;}
.hub-card-soon .hub-card-btn-soon{
  background:rgba(15,36,56,.07)!important;
  color:#59636c!important;
}
.hub-flag:not(.hub-flag-live){filter:grayscale(1) saturate(0);}
.hub-list-soon{filter:grayscale(1) saturate(0);opacity:.62;}

@media (min-width:700px){
  .hub-carousel-stage{max-width:960px!important;padding:28px 70px 20px!important;}
  .hub-carousel-wrap{min-height:318px!important;}
  .hub-carousel-3d{height:300px!important;}
  .hub-card{width:230px!important;height:282px!important;}
  .hub-carousel-prev{left:18px!important;}
  .hub-carousel-next{right:18px!important;}
}

@media (max-width:699px){
  .hub-carousel-prev{left:12px!important;}
  .hub-carousel-next{right:12px!important;}
  .hub-carousel-arrow{width:44px!important;height:44px!important;}
}

/* Country search */
.hub-country-search{
  width:min(100%,680px);
  margin:0 auto 10px;
  position:relative;
  display:flex;
  align-items:center;
  background:#fff;
  border:1px solid rgba(15,36,56,.12);
  border-radius:18px;
  box-shadow:0 12px 34px rgba(15,36,56,.08);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.hub-country-search:focus-within{
  border-color:rgba(30,122,114,.55);
  box-shadow:0 14px 40px rgba(15,36,56,.11),0 0 0 4px rgba(30,122,114,.08);
  transform:translateY(-1px);
}
.hub-country-search-icon{
  width:52px;
  flex:0 0 52px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--teal-dark);
  font-size:1.55rem;
  line-height:1;
  transform:rotate(-15deg);
}
.hub-country-search input{
  width:100%;
  min-width:0;
  height:58px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--navy);
  font:600 .92rem/1.2 'Plus Jakarta Sans',sans-serif;
  padding:0 48px 0 0;
}
.hub-country-search input::placeholder{color:#8a949c;font-weight:500;}
.hub-country-search-clear{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:rgba(15,36,56,.07);
  color:var(--navy-soft);
  font-size:.72rem;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease,background .15s ease;
}
.hub-country-search.has-value .hub-country-search-clear{opacity:1;pointer-events:auto;}
.hub-country-search-clear:hover{background:rgba(15,36,56,.12);}
.hub-country-search-meta{
  min-height:22px;
  width:min(100%,680px);
  margin:0 auto 12px;
  padding:0 4px;
  color:var(--navy-soft);
  font-size:.74rem;
  font-weight:600;
}
.hub-country-empty{
  width:min(100%,680px);
  margin:12px auto 0;
  text-align:center;
  padding:30px 22px;
  border:1px dashed rgba(15,36,56,.16);
  border-radius:18px;
  background:rgba(255,255,255,.58);
}
.hub-country-empty strong{display:block;font-size:1rem;margin-bottom:6px;}
.hub-country-empty span{display:block;color:var(--navy-soft);font-size:.82rem;line-height:1.5;margin-bottom:14px;}
.hub-country-empty button{
  border:0;
  border-radius:999px;
  padding:9px 15px;
  background:var(--navy);
  color:#fff;
  font:700 .76rem 'Plus Jakarta Sans',sans-serif;
  cursor:pointer;
}
.hub-list-item[hidden]{display:none!important;}
@media (max-width:699px){
  .hub-country-search{border-radius:16px;}
  .hub-country-search-icon{width:46px;flex-basis:46px;font-size:1.4rem;}
  .hub-country-search input{height:54px;font-size:.86rem;}
}


/* --- Status system: live / onboarding / partner gesucht --- */
.hub-card-status{
  position:absolute; top:14px; right:14px; z-index:4;
  padding:5px 9px; border-radius:999px; font-size:10px; line-height:1;
  font-weight:800; letter-spacing:.04em; text-transform:uppercase;
}
.hub-card-status-live{background:#dfeee6;color:#1f6a4c;border:1px solid rgba(31,106,76,.18)}
.hub-card-status-soon{background:#eceae5;color:#7a766d;border:1px solid rgba(80,76,68,.08)}
.hub-card-status-onboarding{
  background:linear-gradient(135deg,#e9f3ef,#fff2d7);
  color:#75601f; border:1px solid rgba(196,151,48,.35);
  box-shadow:0 5px 18px rgba(177,137,44,.10)
}

/* Onboarding deliberately sits between active and inactive visually. */
.hub-card-onboarding{
  filter:saturate(.58);
  border-color:rgba(197,157,67,.45)!important;
  background:
    linear-gradient(145deg,rgba(236,245,241,.96),rgba(255,249,236,.96))!important;
  box-shadow:0 18px 38px rgba(85,93,81,.13), inset 0 0 0 1px rgba(255,255,255,.75)!important;
}
.hub-card-onboarding.is-active{
  filter:saturate(.72);
  box-shadow:0 24px 50px rgba(85,93,81,.18),0 0 0 2px rgba(199,160,69,.16)!important;
}
.hub-card-onboarding .hub-card-flag{opacity:.78}
.hub-card-onboarding .hub-card-partner{color:#6c7e73!important;font-weight:700}
.hub-card-btn-onboarding{
  background:rgba(255,255,255,.62)!important;
  color:#8a742f!important;
  border:1px solid rgba(190,151,60,.28)!important;
  cursor:default!important;
}

.hub-list-onboarding{
  background:linear-gradient(100deg,rgba(235,244,240,.9),rgba(255,247,229,.86))!important;
  border-color:rgba(193,155,67,.28)!important;
}
.hub-list-onboarding .hub-list-flag{filter:saturate(.65);opacity:.82}
.hub-list-onboarding .hub-list-text small{color:#718079!important}
.hub-badge-onboarding{
  background:#f4ead1!important;color:#80691f!important;
  border:1px solid rgba(188,148,52,.22)!important;
}
.hub-flag-onboarding{
  background:linear-gradient(180deg,rgba(237,245,241,.95),rgba(255,245,222,.92))!important;
  border-color:rgba(191,153,65,.32)!important;
  filter:saturate(.68);
}
.hub-flag-onboarding::after{
  content:"BALD"; position:absolute; top:5px; right:6px;
  font-size:7px; font-weight:900; letter-spacing:.06em; color:#8b7027;
}
.hub-modal-onboarding-state .hub-modal{
  border-color:rgba(193,155,67,.38);
  background:linear-gradient(145deg,#f5faf7,#fff8e9);
}

/* Dedicated onboarding modal */
.hub-onboarding-modal{
  max-width:500px!important;
  text-align:center;
  background:linear-gradient(155deg,#f7fbf8 0%,#fffaf0 100%)!important;
  border:1px solid rgba(190,151,58,.30)!important;
  box-shadow:0 30px 80px rgba(26,45,38,.22)!important;
}
.hub-onboarding-kicker{
  display:inline-flex;align-items:center;justify-content:center;
  margin:0 auto 18px;padding:7px 12px;border-radius:999px;
  background:#e3f0e8;color:#28674f;font-size:11px;font-weight:850;
  letter-spacing:.055em;text-transform:uppercase;
}
.hub-onboarding-progress{
  width:132px;height:5px;display:flex;gap:5px;margin:12px auto 20px;
}
.hub-onboarding-progress span{
  flex:1;border-radius:20px;background:#e2dfd6;
}
.hub-onboarding-progress .is-done{background:#4e826d}
.hub-onboarding-progress .is-active{
  background:#d6aa45;box-shadow:0 0 0 3px rgba(214,170,69,.13);
}
.hub-onboarding-note{
  margin:18px 0;padding:15px 17px;border-radius:14px;
  background:rgba(255,255,255,.62);border:1px solid rgba(191,157,77,.16);
  color:#5e665f;font-size:13px;line-height:1.55;
}
.hub-onboarding-coming{
  display:inline-flex;padding:9px 15px;border-radius:999px;
  background:#f4ead1;color:#80691f;font-size:12px;font-weight:800;
}


/* Onboarding: keep the state muted, but never mute the country name/readability. */
.hub-flag-onboarding {
  filter: none !important;
  opacity: 1 !important;
  background: linear-gradient(180deg, rgba(237,245,241,.96), rgba(255,245,222,.94)) !important;
}

.hub-flag-onboarding .hub-flag-icon,
.hub-flag-onboarding .hub-flag-icon-img {
  opacity: .68 !important;
  filter: saturate(.55) !important;
}

.hub-flag-onboarding > span {
  opacity: 1 !important;
  color: #243a3a !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

.hub-flag-onboarding::after {
  opacity: 1 !important;
  color: #765f1d !important;
  background: rgba(255,248,224,.9);
  padding: 2px 5px;
  border-radius: 999px;
}


/* Fix onboarding badge: anchor it to the country tile, not the strip/container. */
.hub-flag {
  position: relative !important;
}

.hub-flag-onboarding::after {
  content: "BALD";
  position: absolute !important;
  top: 7px !important;
  right: 7px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 6 !important;
  pointer-events: none;
  white-space: nowrap;
}

/* Keep the badge stable on hover/focus/active states. */
.hub-flag-onboarding:hover::after,
.hub-flag-onboarding:focus::after,
.hub-flag-onboarding:focus-visible::after,
.hub-flag-onboarding:active::after {
  top: 7px !important;
  right: 7px !important;
  transform: none !important;
}


/* Search belongs to the carousel and filters carousel + list together. */
.hub-section-carousel .hub-country-search {
  max-width: 720px;
  margin: 24px auto 8px;
  position: relative;
  z-index: 20;
}
.hub-section-carousel .hub-country-search-meta {
  max-width: 720px;
  margin: 0 auto 18px;
  text-align: center;
}
.hub-country-search-clear[hidden] { display: none !important; }
.hub-country-search-clear {
  cursor: pointer;
}
.hub-carousel-arrow[hidden] { display: none !important; }
@media (max-width: 700px) {
  .hub-section-carousel .hub-country-search { margin: 18px 14px 8px; }
  .hub-section-carousel .hub-country-search-meta { margin-bottom: 12px; }
}


/* =========================================================
   Mobile-first country search
   ========================================================= */

.hub-country-search-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 14px;
  box-sizing: border-box;
}

.hub-country-search {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  box-sizing: border-box;
}

.hub-country-search-field {
  position: relative;
  width: 100%;
  min-width: 0;
}

#hub-country-search {
  display: block;
  width: 100%;
  min-width: 0;
  height: 52px;
  box-sizing: border-box;
  padding: 0 46px 0 44px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1;
}

.hub-country-search-icon {
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

#hub-country-search-clear {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 34px;
  height: 34px;
  margin: 0;
  transform: translateY(-50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.hub-country-search-meta {
  margin: 8px 0 0;
  min-height: 18px;
  padding: 0 4px;
  text-align: center;
  font-size: 12px;
  line-height: 1.35;
}

/* Give the search its own breathing room before the carousel. */
.hub-country-search-wrap + .hub-carousel-stage,
.hub-country-search + .hub-carousel-stage {
  margin-top: 14px;
}

@media (max-width: 420px) {
  .hub-country-search-wrap {
    padding-left: 12px;
    padding-right: 12px;
  }

  #hub-country-search {
    height: 50px;
    padding-left: 42px;
    padding-right: 44px;
    border-radius: 15px;
    font-size: 14px;
  }

  .hub-country-search-meta {
    margin-top: 7px;
    font-size: 11px;
  }
}

/* Tablet / desktop enhancement only after mobile works. */
@media (min-width: 700px) {
  .hub-country-search-wrap {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
  }

  #hub-country-search {
    height: 56px;
    border-radius: 18px;
    font-size: 15px;
  }

  .hub-country-search-meta {
    margin-top: 9px;
    font-size: 12px;
  }
}

@media (min-width: 1100px) {
  .hub-country-search-wrap {
    max-width: 820px;
  }
}


/* FINAL mobile search containment — matches actual markup */
.hub-section-carousel {
  overflow: hidden;
}

.hub-section-carousel .hub-country-search,
.hub-section-carousel .hub-country-search-meta {
  width: auto !important;
  max-width: none !important;
  margin-left: 12px !important;
  margin-right: 12px !important;
  box-sizing: border-box !important;
}

.hub-section-carousel .hub-country-search {
  position: relative !important;
  display: block !important;
}

.hub-section-carousel #hub-country-search {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  height: 50px !important;
  padding: 0 44px 0 42px !important;
  border-radius: 15px !important;
  font-size: 14px !important;
  text-align: left !important;
}

.hub-section-carousel .hub-country-search-icon {
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
}

.hub-section-carousel .hub-country-search-clear {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  z-index: 4 !important;
}

.hub-section-carousel .hub-country-search-meta {
  margin-top: 7px !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 11px !important;
}

@media (min-width: 700px) {
  .hub-section-carousel .hub-country-search,
  .hub-section-carousel .hub-country-search-meta {
    width: min(720px, calc(100% - 40px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hub-section-carousel #hub-country-search {
    height: 56px !important;
    padding-left: 46px !important;
    padding-right: 48px !important;
    border-radius: 18px !important;
    font-size: 15px !important;
  }
}


/* Search icon spacing refinement */
.hub-section-carousel .hub-country-search-icon {
  left: 12px !important;
  width: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hub-section-carousel #hub-country-search {
  padding-left: 40px !important;
}

@media (min-width: 700px) {
  .hub-section-carousel .hub-country-search-icon {
    left: 14px !important;
  }
  .hub-section-carousel #hub-country-search {
    padding-left: 44px !important;
  }
}


/* =========================================================
   Refined 3D carousel: depth without the old card-fan effect
   ========================================================= */

.hub-carousel-stage {
  perspective: 1250px !important;
  perspective-origin: 50% 45% !important;
  overflow: hidden;
}

.hub-carousel-wrap,
.hub-carousel-3d {
  transform-style: preserve-3d !important;
}

.hub-carousel-3d {
  perspective: inherit;
}

.hub-card {
  transform-style: preserve-3d !important;
  backface-visibility: hidden;
  will-change: transform, opacity;
  transition:
    transform .62s cubic-bezier(.22,.75,.18,1),
    opacity .42s ease,
    filter .42s ease,
    box-shadow .48s ease !important;
}

/* Active card visibly sits closer to the user. */
.hub-card.is-active {
  box-shadow:
    0 30px 55px rgba(31, 42, 44, .22),
    0 12px 22px rgba(31, 42, 44, .12),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
}

/* Direct neighbors are recessed but still readable. */
.hub-card.is-neighbor {
  filter: saturate(.76) brightness(.97);
  box-shadow:
    0 18px 34px rgba(31, 42, 44, .14),
    inset 0 1px 0 rgba(255,255,255,.66) !important;
}

/* Outer desktop cards recede further. */
.hub-card.is-far {
  filter: saturate(.58) brightness(.94);
  box-shadow:
    0 12px 24px rgba(31, 42, 44, .09),
    inset 0 1px 0 rgba(255,255,255,.55) !important;
}

/* A subtle floor/reflection gives depth without looking glossy. */
.hub-carousel-stage::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 46px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(34, 48, 48, .14) 0%,
    rgba(34, 48, 48, .07) 38%,
    rgba(34, 48, 48, 0) 72%
  );
  filter: blur(9px);
  pointer-events: none;
  z-index: 0;
}

.hub-carousel-wrap {
  position: relative;
  z-index: 1;
}

/* Keep the arrows optically on top of the 3D plane. */
.hub-carousel-arrow {
  z-index: 80 !important;
  transform: translateY(-50%) translateZ(120px);
}

/* Mobile: flatter, app-like, still with a little depth. */
@media (max-width: 699px) {
  .hub-carousel-stage {
    perspective: 900px !important;
  }

  .hub-card.is-active {
    box-shadow:
      0 22px 38px rgba(31,42,44,.18),
      0 8px 16px rgba(31,42,44,.10) !important;
  }

  .hub-card.is-neighbor {
    filter: saturate(.72) brightness(.97);
  }

  .hub-carousel-stage::after {
    left: 16%;
    right: 16%;
    bottom: 42px;
    height: 34px;
    filter: blur(8px);
  }
}


/* =========================================================
   3D rendering artifact fix
   Avoid GPU seam/flicker from filter + preserve-3d + rounded cards
   ========================================================= */

/* The cards themselves stay flat compositing layers.
   The scene still has perspective, but we do not preserve nested 3D
   inside every rounded card. */
.hub-card {
  transform-style: flat !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  contain: paint;
  isolation: isolate;
  overflow: hidden;
  filter: none !important;
  -webkit-filter: none !important;
  transition:
    transform .56s cubic-bezier(.22,.75,.18,1),
    opacity .34s ease,
    box-shadow .40s ease !important;
}

/* Never animate filters on the different depth states.
   Saturation changes were the main source of the vertical seams. */
.hub-card.is-active,
.hub-card.is-neighbor,
.hub-card.is-far,
.hub-card-onboarding,
.hub-card-onboarding.is-active {
  filter: none !important;
  -webkit-filter: none !important;
}

/* Use opacity/background treatment instead of GPU filters. */
.hub-card.is-neighbor {
  opacity: .76;
}

.hub-card.is-far {
  opacity: .42;
}

/* Keep inactive countries visually muted without filtering the whole card. */
.hub-card-soon .hub-card-flag,
.hub-card-soon .hub-card-desc,
.hub-card-soon .hub-card-partner,
.hub-card-soon h3 {
  opacity: .62;
}

.hub-card-onboarding .hub-card-flag {
  opacity: .78 !important;
}

/* Prevent pseudo/glow layers from crossing card compositing boundaries. */
.hub-carousel-stage::after {
  transform: translateZ(0);
  pointer-events: none;
}

/* Stabilize rounded edges during transforms. */
.hub-card::before,
.hub-card::after {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Safari / Chromium rounding stability */
.hub-card {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Hover should not create a competing transform or filter layer. */
.hub-card:hover,
.hub-card:focus-within {
  filter: none !important;
  -webkit-filter: none !important;
}

/* Mobile gets an even simpler compositing path. */
@media (max-width: 699px) {
  .hub-card {
    contain: paint;
    transform-style: flat !important;
  }
}


/* Country interest statistics */
.hub-country-stat {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin: 0 auto 9px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(16, 37, 58, .055);
  color: rgba(16, 37, 58, .62);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.hub-country-stat::before {
  content: "↗";
  margin-right: 4px;
  font-size: 9px;
}

.hub-list-stat {
  display: inline;
  color: rgba(16, 37, 58, .52);
  font-weight: 650;
}

.hub-list-stat::before {
  content: " · ";
}

.hub-country-stat[hidden],
.hub-list-stat[hidden] {
  display: none !important;
}

.hub-footer a {
  color: inherit;
  text-underline-offset: 3px;
}


/* Featured carousel contains only live + onboarding countries.
   If a search matches only a "Partner gesucht" country, keep the stage calm. */
.hub-carousel-3d:empty::before {
  content: "Dieses Land ist noch nicht im Länder-Karussell verfügbar.";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(300px, calc(100vw - 64px));
  transform: translate(-50%, -50%);
  text-align: center;
  color: rgba(16, 40, 60, .52);
  font-size: 12px;
  line-height: 1.5;
}

.hub-carousel-3d:empty + .hub-carousel-arrow,
.hub-carousel-wrap:has(.hub-carousel-3d:empty) .hub-carousel-arrow {
  display: none !important;
}


/* Desktop: featured country strip centered as one compact carousel unit.
   Arrows sit directly beside the visible country tiles, not at viewport edges. */
@media (min-width: 900px) {
  .hub-flag-carousel {
    width: fit-content;
    max-width: min(100%, 980px);
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 38px minmax(0, auto) 38px;
    align-items: center;
    justify-content: center;
    column-gap: 12px;
  }

  .hub-flag-viewport {
    width: auto;
    max-width: min(820px, calc(100vw - 180px));
    margin: 0;
  }

  .hub-flag-strip {
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    justify-content: center;
  }

  .hub-flag-arrow {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    align-self: center;
  }

  .hub-flag-arrow-left {
    grid-column: 1;
  }

  .hub-flag-viewport {
    grid-column: 2;
  }

  .hub-flag-arrow-right {
    grid-column: 3;
  }
}


/* AuswandernHilft wordmark – text only, transparent background */
.hub-brand-wordmark {
  position: absolute;
  z-index: 20;
  top: 18px;
  left: 22px;
  display: inline-block;
  padding: 0;
  margin: 0;
  background: transparent !important;
  border: 0 !important;
  color: #ff1717;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(27px, 3vw, 47px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: nowrap;
  text-decoration: none;
  -webkit-text-stroke: 3px rgba(255,255,255,.94);
  paint-order: stroke fill;
  text-shadow:
    0 2px 0 rgba(255,255,255,.96),
    0 0 5px rgba(255,255,255,.9),
    0 2px 3px rgba(0,0,0,.18);
}

@media (max-width: 699px) {
  .hub-brand-wordmark {
    top: 12px;
    left: 14px;
    font-size: clamp(24px, 8vw, 34px);
    -webkit-text-stroke-width: 2.5px;
  }
}


/* Keep the burger/menu away from the #AuswandernHilft wordmark.
   It was sitting underneath the "A" because .hub-nav had only one child. */
.hub-nav {
  justify-content: flex-end !important;
}

.hub-nav-burger {
  position: relative;
  z-index: 30;
  margin-left: auto;
}

/* Brand always has a completely transparent local background. */
.hub-brand-wordmark,
.hub-brand-wordmark::before,
.hub-brand-wordmark::after {
  background: transparent !important;
  box-shadow: none;
}

/* Fix: dark section heading must stay readable on navy background */
.hub-section-dark .hub-section-head h2 {
  color: #fff !important;
}


/* =========================================================
   Hero countries: slow seamless loop
   Active + onboarding only (selection remains in JS data logic)
   ========================================================= */
.hub-flag-strip-wrap {
  position: relative !important;
  display: block !important;
  width: min(100%, 860px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: hidden !important;
  gap: 0 !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.hub-flag-strip {
  display: flex !important;
  flex: none !important;
  width: max-content !important;
  max-width: none !important;
  gap: 0 !important;
  overflow: visible !important;
  padding: 4px 0 10px !important;
  margin: 0 !important;
  justify-content: flex-start !important;
  scrollbar-width: none;
  animation: hubFlagMarquee 36s linear infinite;
  will-change: transform;
}

.hub-flag-strip::-webkit-scrollbar { display: none; }

.hub-flag-marquee-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding-right: 10px;
}

.hub-flag-strip-wrap.is-paused .hub-flag-strip {
  animation-play-state: paused;
}

@keyframes hubFlagMarquee {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

/* Old manual arrows are intentionally gone for the auto-loop. */
.hub-flag-arrow { display: none !important; }

.hub-flag {
  flex: 0 0 auto !important;
}

@media (max-width: 699px) {
  .hub-flag-strip-wrap {
    width: calc(100% + 8px) !important;
    margin-left: -4px !important;
    margin-right: -4px !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
  .hub-flag-strip { animation-duration: 40s; }
  .hub-flag-marquee-group { gap: 8px; padding-right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-flag-strip { animation: none !important; transform: none !important; }
  .hub-flag-strip-wrap { overflow-x: auto !important; -webkit-mask-image: none; mask-image: none; }
  .hub-flag-marquee-group[aria-hidden="true"] { display: none; }
}


/* Header marquee: automatic loop + manual arrows + touch/drag */
.hub-flag-strip-wrap {
  width: min(100%, 960px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 38px !important;
  gap: 10px !important;
  align-items: center !important;
  overflow: visible !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.hub-flag-viewport {
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.hub-flag-arrow {
  display: grid !important;
  place-items: center;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  z-index: 5;
}

.hub-flag-strip {
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

@keyframes hub-country-marquee {
  from { transform: translate3d(var(--hub-manual-offset, 0px), 0, 0); }
  to { transform: translate3d(calc(-50% + var(--hub-manual-offset, 0px)), 0, 0); }
}

.hub-flag-strip.is-dragging {
  cursor: grabbing;
  animation-play-state: paused !important;
}

@media (max-width: 699px) {
  .hub-flag-strip-wrap {
    width: 100% !important;
    grid-template-columns: 32px minmax(0, 1fr) 32px !important;
    gap: 5px !important;
  }

  .hub-flag-arrow {
    width: 30px !important;
    height: 30px !important;
  }

  .hub-flag-viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
}


/* JS owns marquee movement now: prevents CSS animation from blocking arrow/drag movement. */
.hub-flag-strip {
  animation: none !important;
  transform: translate3d(0,0,0);
  will-change: transform;
}

.hub-flag-strip-wrap.is-paused .hub-flag-strip,
.hub-flag-strip:hover {
  animation-play-state: initial !important;
}


/* Active status badge in the TOP/HERO country carousel. */
.hub-flag-live::after{
  content:"AKTIV";
  position:absolute!important;
  top:7px!important;
  right:7px!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  margin:0!important;
  z-index:7!important;
  pointer-events:none;
  white-space:nowrap;
  font-size:7px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.06em!important;
  color:#1f6a4c!important;
  background:rgba(230,245,236,.96)!important;
  border:1px solid rgba(31,106,76,.20)!important;
  padding:2px 5px!important;
  border-radius:999px!important;
}
.hub-flag-live:hover::after,
.hub-flag-live:focus::after,
.hub-flag-live:focus-visible::after,
.hub-flag-live:active::after{
  top:7px!important;
  right:7px!important;
  transform:none!important;
}

/* Interest count gets its own quiet line and never outweighs the partner line. */
.hub-country-stat{
  display:block!important;
  margin-top:3px!important;
  font-size:.66rem!important;
  line-height:1.25!important;
  font-weight:500!important;
}
.hub-list-stat{
  display:block!important;
  margin-top:2px!important;
  font-size:.72rem!important;
  line-height:1.25!important;
  font-weight:400!important;
}


/* Hero-Bedienhinweis fuer die laufenden Flaggen: bewusst kein Button. */
.hub-hero-flag-hint{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  max-width:100%;
  margin:2px auto 0;
  padding:8px 13px;
  background:rgba(15,36,56,.16);
  color:rgba(255,255,255,.88);
  border:1px solid rgba(217,165,82,.42);
  border-radius:100px;
  box-shadow:none;
  font-size:.76rem;
  font-weight:600;
  line-height:1.35;
  letter-spacing:.01em;
  cursor:default;
  pointer-events:none;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
@media(max-width:620px){
  .hub-hero-flag-hint{
    padding:7px 11px;
    font-size:.72rem;
  }
}


/* Flaggen-Hinweis sichtbar direkt unter dem Flaggenband. */
.hub-hero .hub-hero-inner .hub-hero-flag-hint{
  display:flex!important;
  position:relative;
  z-index:8;
  visibility:visible!important;
  opacity:1!important;
  width:fit-content!important;
  margin:10px auto 0!important;
  padding:9px 15px!important;
  color:#fff!important;
  background:rgba(15,36,56,.72)!important;
  border:1px solid rgba(217,165,82,.78)!important;
  border-radius:999px!important;
  font-size:.78rem!important;
  font-weight:650!important;
  line-height:1.3!important;
  text-decoration:none!important;
  transform:none!important;
}


/* Flaggen-Hinweis: etwas praesenter, weiterhin dezent im Hero. */
.hub-hero .hub-hero-inner .hub-hero-flag-hint{
  margin-top:11px!important;
  padding:10px 18px!important;
  background:rgba(217,165,82,.18)!important;
  border:1.5px solid rgba(217,165,82,.95)!important;
  color:#fff!important;
  font-size:.82rem!important;
  font-weight:750!important;
  letter-spacing:.015em!important;
  box-shadow:0 8px 24px rgba(0,0,0,.16),0 0 0 3px rgba(217,165,82,.07)!important;
}


/* Flaggen-Hinweis als leicht leuchtendes Badge. */
.hub-hero .hub-hero-inner .hub-hero-flag-hint{
  position:relative!important;
  overflow:visible!important;
  background:linear-gradient(135deg,rgba(217,165,82,.28),rgba(217,165,82,.12))!important;
  border:1px solid rgba(235,190,105,.98)!important;
  color:#fff!important;
  text-shadow:0 1px 8px rgba(255,255,255,.12)!important;
  box-shadow:
    0 0 10px rgba(217,165,82,.32),
    0 0 24px rgba(217,165,82,.18),
    inset 0 0 10px rgba(255,225,165,.08)!important;
  animation:hub-flag-hint-glow 2.8s ease-in-out infinite!important;
}
.hub-hero .hub-hero-inner .hub-hero-flag-hint::before{
  content:"";
  width:6px;
  height:6px;
  flex:0 0 6px;
  margin-right:9px;
  border-radius:50%;
  background:#edc06f;
  box-shadow:0 0 7px rgba(237,192,111,.95),0 0 14px rgba(237,192,111,.55);
}
@keyframes hub-flag-hint-glow{
  0%,100%{
    box-shadow:0 0 9px rgba(217,165,82,.27),0 0 20px rgba(217,165,82,.14),inset 0 0 10px rgba(255,225,165,.07);
  }
  50%{
    box-shadow:0 0 14px rgba(217,165,82,.46),0 0 30px rgba(217,165,82,.23),inset 0 0 12px rgba(255,225,165,.11);
  }
}
@media(prefers-reduced-motion:reduce){
  .hub-hero .hub-hero-inner .hub-hero-flag-hint{animation:none!important;}
}


/* Länderpartner-Highlights */
.hub-highlights{
  position:relative;
  z-index:10;
  padding:26px 20px 8px;
  background:linear-gradient(180deg,var(--navy) 0%,#f5f7f8 100%);
}
.hub-highlights-inner{
  width:min(1100px,100%);
  margin:0 auto;
}
.hub-highlights-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:16px;
}
.hub-highlights-head>div{min-width:0}
.hub-highlights-eyebrow{
  display:inline-block;
  margin-bottom:7px;
  color:var(--gold);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hub-highlights-head h2{
  margin:0;
  color:#fff;
  font-size:clamp(1.25rem,2.8vw,1.75rem);
  line-height:1.15;
}
.hub-highlights-head p{
  max-width:480px;
  margin:0;
  color:rgba(255,255,255,.7);
  font-size:.78rem;
  line-height:1.55;
}
.hub-highlights-track{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.hub-highlight-card{
  position:relative;
  min-width:0;
  padding:17px 18px 16px;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(217,165,82,.22);
  border-radius:18px;
  box-shadow:0 14px 34px rgba(15,36,56,.12);
}
.hub-highlight-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.hub-highlight-country{
  color:var(--navy);
  font-size:.68rem;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.hub-highlight-badge{
  padding:5px 8px;
  background:rgba(217,165,82,.16);
  color:#8f641f;
  border:1px solid rgba(217,165,82,.28);
  border-radius:999px;
  font-size:.6rem;
  font-weight:800;
  white-space:nowrap;
}
.hub-highlight-card h3{
  margin:0 0 8px;
  color:var(--navy);
  font-size:1rem;
  line-height:1.22;
}
.hub-highlight-time{
  display:flex;
  flex-wrap:wrap;
  gap:5px 8px;
  margin-bottom:8px;
  color:var(--teal-dark);
  font-size:.69rem;
}
.hub-highlight-time strong{font-weight:850}
.hub-highlight-card p{
  margin:0 0 13px;
  color:var(--navy-soft);
  font-size:.72rem;
  line-height:1.5;
}
.hub-highlight-more{
  appearance:none;
  border:0;
  padding:0;
  background:transparent;
  color:var(--navy);
  font:800 .69rem/1.2 inherit;
  cursor:pointer;
}
.hub-highlight-more::after{content:" →";color:var(--gold)}
.hub-highlight-more:hover{color:var(--teal-dark)}

.hub-highlight-modal-overlay{
  position:fixed;
  inset:0;
  z-index:1100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(15,36,56,.64);
  opacity:0;
  transition:opacity .18s ease;
}
.hub-highlight-modal-overlay[hidden]{display:none}
.hub-highlight-modal-overlay.open{opacity:1}
.hub-highlight-modal{
  position:relative;
  width:min(430px,100%);
  padding:28px 26px 25px;
  background:#fff;
  border:1px solid rgba(217,165,82,.28);
  border-radius:22px;
  box-shadow:0 24px 70px rgba(0,0,0,.25);
}
.hub-highlight-modal-close{
  position:absolute;
  top:13px;
  right:13px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#eef1f2;
  color:var(--navy);
  cursor:pointer;
}
.hub-highlight-modal-country{
  display:block;
  margin-bottom:7px;
  color:var(--teal-dark);
  font-size:.7rem;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.hub-highlight-modal-badge{
  display:inline-flex;
  margin-bottom:10px;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(217,165,82,.16);
  color:#8f641f;
  font-size:.62rem;
  font-weight:850;
}
.hub-highlight-modal h3{
  margin:0 38px 10px 0;
  color:var(--navy);
  font-size:1.35rem;
  line-height:1.18;
}
.hub-highlight-modal-time{
  margin-bottom:11px;
  color:var(--teal-dark);
  font-size:.77rem;
  font-weight:750;
}
.hub-highlight-modal p{
  margin:0 0 19px;
  color:var(--navy-soft);
  font-size:.82rem;
  line-height:1.6;
}
.hub-highlight-modal-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 16px;
  border-radius:999px;
  background:var(--gold);
  color:var(--navy);
  text-decoration:none;
  font-size:.78rem;
  font-weight:850;
}
body.hub-modal-open{overflow:hidden}

@media(max-width:820px){
  .hub-highlights-head{display:grid;gap:8px}
  .hub-highlights-track{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding-bottom:6px;
  }
  .hub-highlights-track::-webkit-scrollbar{display:none}
  .hub-highlight-card{
    flex:0 0 min(82vw,320px);
    scroll-snap-align:start;
  }
}
@media(max-width:560px){
  .hub-highlights{padding:22px 14px 6px}
  .hub-highlights-head p{font-size:.73rem}
  .hub-highlight-card{padding:15px 16px}
}


/* Highlights: kompaktere Länder-Karten mit Flagge + Partner-Badge + Autoscroll */
.hub-highlights{
  padding:24px 0 10px;
  overflow:hidden;
}
.hub-highlights-inner{
  width:100%;
  max-width:none;
}
.hub-highlights-head{
  width:min(1100px,calc(100% - 40px));
  margin:0 auto 15px;
}
.hub-highlights-marquee{
  width:100%;
  overflow-x:auto;
  scrollbar-width:none;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
}
.hub-highlights-marquee::-webkit-scrollbar{display:none}
.hub-highlights-track{
  display:flex;
  width:max-content;
  gap:12px;
  padding:4px 20px 12px;
}
.hub-highlight-card{
  flex:0 0 280px;
  min-height:138px;
  display:grid;
  grid-template-columns:58px 1fr;
  gap:13px;
  align-items:center;
  padding:14px 15px;
  text-decoration:none;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(217,165,82,.25);
  border-radius:16px;
  box-shadow:0 10px 26px rgba(15,36,56,.11);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.hub-highlight-card:hover,
.hub-highlight-card:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(217,165,82,.58);
  box-shadow:0 14px 32px rgba(15,36,56,.16);
  outline:none;
}
.hub-highlight-visual{
  position:relative;
  width:58px;
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hub-highlight-flag-wrap{
  width:52px;
  height:38px;
  overflow:hidden;
  border-radius:8px;
  background:#eef0f1;
  box-shadow:0 5px 13px rgba(15,36,56,.15);
  border:1px solid rgba(15,36,56,.08);
}
.hub-highlight-flag{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hub-highlight-partner-logo{
  position:absolute;
  right:-2px;
  bottom:8px;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--navy);
  color:var(--gold);
  border:2px solid #fff;
  font-size:.48rem;
  line-height:1;
  font-weight:900;
  letter-spacing:-.02em;
  box-shadow:0 3px 9px rgba(15,36,56,.2);
}
.hub-highlight-content{min-width:0}
.hub-highlight-card-top{
  margin-bottom:5px;
}
.hub-highlight-country{
  font-size:.61rem;
  letter-spacing:.07em;
}
.hub-highlight-badge{
  padding:4px 7px;
  font-size:.55rem;
}
.hub-highlight-card h3{
  margin:0 0 6px;
  font-size:.89rem;
  line-height:1.2;
}
.hub-highlight-time{
  margin:0 0 8px;
  gap:4px 6px;
  font-size:.62rem;
}
.hub-highlight-linkline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:var(--navy-soft);
  font-size:.58rem;
  font-weight:700;
}
.hub-highlight-linkline b{
  color:var(--gold);
  font-size:.8rem;
}
@media(max-width:620px){
  .hub-highlights-head{
    width:calc(100% - 28px);
  }
  .hub-highlights-track{
    gap:10px;
    padding-left:14px;
    padding-right:14px;
  }
  .hub-highlight-card{
    flex-basis:250px;
    grid-template-columns:52px 1fr;
    min-height:128px;
    padding:13px 14px;
  }
  .hub-highlight-visual{width:52px}
  .hub-highlight-flag-wrap{width:47px;height:34px}
}


/* Highlights: echtes nahtloses Laufband, unabhängig von JS/scrollLeft. */
.hub-highlights-marquee{
  overflow:hidden!important;
}
.hub-highlights-track{
  display:flex!important;
  width:max-content!important;
  gap:0!important;
  padding:4px 0 12px!important;
  animation:hub-highlights-marquee 32s linear infinite;
  will-change:transform;
}
.hub-highlights-group{
  display:flex;
  flex:none;
  gap:12px;
  padding-right:12px;
}
.hub-highlights-marquee:hover .hub-highlights-track,
.hub-highlights-marquee:focus-within .hub-highlights-track{
  animation-play-state:paused;
}
@keyframes hub-highlights-marquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media(max-width:620px){
  .hub-highlights-track{animation-duration:27s}
  .hub-highlights-group{gap:10px;padding-right:10px}
}


/* Highlights: ruhigere, einheitliche Kartenhierarchie */
.hub-highlight-card{
  flex:0 0 292px!important;
  min-height:132px!important;
  display:grid!important;
  grid-template-columns:64px minmax(0,1fr)!important;
  gap:15px!important;
  align-items:center!important;
  padding:15px 16px!important;
  border-radius:15px!important;
}
.hub-highlight-visual{
  width:64px!important;
  min-width:64px!important;
  align-self:center!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.hub-highlight-flag-wrap{
  width:58px!important;
  height:40px!important;
  border-radius:7px!important;
  box-shadow:0 4px 12px rgba(15,36,56,.13)!important;
}
.hub-highlight-partner-logo{
  display:none!important;
}
.hub-highlight-content{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
.hub-highlight-card-top{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin-bottom:5px!important;
}
.hub-highlight-country{
  font-size:.62rem!important;
  font-weight:850!important;
  letter-spacing:.08em!important;
  line-height:1!important;
}
.hub-highlight-badge{
  flex:0 0 auto!important;
  padding:4px 7px!important;
  font-size:.54rem!important;
  line-height:1!important;
}
.hub-highlight-card h3{
  margin:0 0 7px!important;
  font-size:.92rem!important;
  line-height:1.22!important;
  min-height:1.15em!important;
}
.hub-highlight-time{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  margin:0 0 9px!important;
  font-size:.61rem!important;
  line-height:1.25!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.hub-highlight-time strong{
  flex:0 0 auto!important;
}
.hub-highlight-time span{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.hub-highlight-linkline{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  padding-top:7px!important;
  border-top:1px solid rgba(15,36,56,.08)!important;
  color:#66717a!important;
  font-size:.58rem!important;
  font-weight:700!important;
  line-height:1!important;
}
.hub-highlight-linkline b{
  flex:0 0 auto!important;
  font-size:.82rem!important;
}
@media(max-width:620px){
  .hub-highlight-card{
    flex-basis:268px!important;
    min-height:126px!important;
    grid-template-columns:58px minmax(0,1fr)!important;
    gap:13px!important;
    padding:14px 15px!important;
  }
  .hub-highlight-visual{
    width:58px!important;
    min-width:58px!important;
  }
  .hub-highlight-flag-wrap{
    width:52px!important;
    height:36px!important;
  }
}


/* =========================================================
   Highlights – finales Endlos-Laufband wie im Hero
   Zwei identische Gruppen laufen kontinuierlich durch.
   ========================================================= */
.hub-highlights{
  overflow:hidden!important;
}

.hub-highlights-inner{
  width:100%!important;
  max-width:none!important;
}

.hub-highlights-head{
  width:min(1100px,calc(100% - 40px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.hub-highlights-marquee{
  position:relative!important;
  width:min(1100px,calc(100% - 40px))!important;
  margin:0 auto!important;
  overflow:hidden!important;
  padding:4px 0 12px!important;
  scrollbar-width:none!important;
  -webkit-mask-image:linear-gradient(
    90deg,
    transparent 0,
    #000 28px,
    #000 calc(100% - 28px),
    transparent 100%
  )!important;
  mask-image:linear-gradient(
    90deg,
    transparent 0,
    #000 28px,
    #000 calc(100% - 28px),
    transparent 100%
  )!important;
}

.hub-highlights-marquee::-webkit-scrollbar{
  display:none!important;
}

.hub-highlights-track{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  width:max-content!important;
  max-width:none!important;
  gap:0!important;
  padding:0!important;
  margin:0!important;
  transform:translateX(0);
  animation:hub-highlight-loop 24s linear infinite!important;
  will-change:transform;
}

.hub-highlights-group{
  display:flex!important;
  flex:0 0 auto!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  gap:12px!important;
  padding:0 6px!important;
  width:max-content!important;
}

.hub-highlight-card{
  flex:0 0 286px!important;
  width:286px!important;
  min-width:286px!important;
  max-width:286px!important;
}

.hub-highlight-partner-logo{
  display:none!important;
}

.hub-highlights-marquee:hover .hub-highlights-track,
.hub-highlights-marquee:focus-within .hub-highlights-track{
  animation-play-state:paused!important;
}

/* Weil Gruppe 2 identisch auf Gruppe 1 folgt, ist -50% nahtlos. */
@keyframes hub-highlight-loop{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

@media(max-width:620px){
  .hub-highlights-head,
  .hub-highlights-marquee{
    width:calc(100% - 20px)!important;
  }

  .hub-highlights-group{
    gap:10px!important;
    padding:0 5px!important;
  }

  .hub-highlight-card{
    flex-basis:260px!important;
    width:260px!important;
    min-width:260px!important;
    max-width:260px!important;
  }

  .hub-highlights-track{
    animation-duration:20s!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .hub-highlights-track{
    animation:none!important;
  }
  .hub-highlights-marquee{
    overflow-x:auto!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
}


/* Highlights: sauberer Kartenabstand + exakt gemessener Endlos-Uebergang. */
.hub-highlights-track{
  --hub-highlight-loop-distance:0px;
  animation:none!important;
}
.hub-highlights-track.is-loop-ready{
  animation:hub-highlight-loop-exact 24s linear infinite!important;
}
.hub-highlights-group{
  gap:10px!important;
  padding:0 5px!important;
}
.hub-highlight-card{
  flex-basis:284px!important;
  width:284px!important;
  min-width:284px!important;
  max-width:284px!important;
}
@keyframes hub-highlight-loop-exact{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-1 * var(--hub-highlight-loop-distance)),0,0)}
}
.hub-highlights-marquee:hover .hub-highlights-track.is-loop-ready,
.hub-highlights-marquee:focus-within .hub-highlights-track.is-loop-ready{
  animation-play-state:paused!important;
}
@media(max-width:620px){
  .hub-highlights-group{
    gap:9px!important;
    padding:0 4.5px!important;
  }
  .hub-highlight-card{
    flex-basis:258px!important;
    width:258px!important;
    min-width:258px!important;
    max-width:258px!important;
  }
  .hub-highlights-track.is-loop-ready{
    animation-duration:20s!important;
  }
}


/* Highlight-Steuerung exakt im Stil des Hero-Flaggenbands. */
.hub-highlights-strip-wrap{
  position:relative;
  width:min(1100px,calc(100% - 40px));
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:10px;
}
.hub-highlights-strip-wrap .hub-highlights-marquee{
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
}
.hub-highlights-strip-wrap > .hub-flag-arrow{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  flex:0 0 auto!important;
  z-index:5!important;
}
.hub-highlights-prev,
.hub-highlights-next{
  display:grid!important;
}

/* Alte/zwischenzeitliche Highlight-Pfeilvarianten vollständig ausblenden. */
.hub-highlights-nav,
#hub-highlights-prev,
#hub-highlights-next{
  display:none!important;
}

@media(max-width:620px){
  .hub-highlights-strip-wrap{
    width:calc(100% - 20px);
    gap:6px;
  }
}


/* Highlight-Pfeile: links UND rechts fest am Laufband, nicht am Seitenrand. */
.hub-highlights-strip-wrap{
  position:relative!important;
  display:block!important;
  width:min(1100px,calc(100% - 72px))!important;
  margin:0 auto!important;
}
.hub-highlights-strip-wrap .hub-highlights-marquee{
  width:100%!important;
  margin:0!important;
}
.hub-highlights-strip-wrap > #hub-highlight-prev,
.hub-highlights-strip-wrap > #hub-highlight-next{
  position:absolute!important;
  top:50%!important;
  bottom:auto!important;
  display:grid!important;
  place-items:center!important;
  z-index:20!important;
  margin:0!important;
}
.hub-highlights-strip-wrap > #hub-highlight-prev{
  left:-44px!important;
  right:auto!important;
  transform:translateY(-50%)!important;
}
.hub-highlights-strip-wrap > #hub-highlight-next{
  right:-44px!important;
  left:auto!important;
  transform:translateY(-50%)!important;
}

@media(max-width:620px){
  .hub-highlights-strip-wrap{
    width:calc(100% - 64px)!important;
  }
  .hub-highlights-strip-wrap > #hub-highlight-prev{
    left:-34px!important;
  }
  .hub-highlights-strip-wrap > #hub-highlight-next{
    right:-34px!important;
  }
}


/* Hero-Flaggen: Einzelkarten-Recycling statt Gruppen-Loop. */
.hub-flag-strip{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:max-content!important;
  max-width:none!important;
  min-width:max-content!important;
  gap:10px!important;
  margin:0!important;
  padding:4px 4px 10px!important;
  animation:none!important;
  will-change:transform!important;
}
.hub-flag-strip > .hub-flag{
  flex:0 0 auto!important;
}
@media(max-width:699px){
  .hub-flag-strip{
    gap:8px!important;
  }
}


/* Mobile Hero kompakter: Inhalt hoeher, naechster Bereich frueher sichtbar. */
@media(max-width:699px){
  .hub-hero{
    min-height:560px!important;
    padding-top:16px!important;
    padding-bottom:24px!important;
  }
  .hub-hero-inner{
    margin-top:0!important;
    transform:translateY(-42px);
  }
  .hub-hero-sub{
    margin-bottom:16px!important;
  }
  .hub-flag-strip-wrap{
    margin-bottom:14px!important;
  }
}


/* Mobile Hero v2: deutlich hoeherer Inhalt + Pfeile ohne eigene Platzspalten. */
@media(max-width:699px){
  .hub-hero{
    min-height:500px!important;
    padding:12px 12px 18px!important;
  }

  .hub-nav{
    min-height:42px!important;
  }

  .hub-hero-inner{
    margin-top:0!important;
    transform:translateY(-92px)!important;
  }

  .hub-hero-eyebrow{
    margin-bottom:9px!important;
    padding:5px 12px!important;
  }

  .hub-hero h1{
    margin-bottom:8px!important;
  }

  .hub-hero-sub{
    margin-bottom:12px!important;
    line-height:1.42!important;
  }

  .hub-flag-strip-wrap{
    position:relative!important;
    display:block!important;
    width:100%!important;
    margin-bottom:10px!important;
  }

  .hub-flag-viewport{
    width:100%!important;
  }

  .hub-flag-arrow{
    position:absolute!important;
    top:50%!important;
    width:26px!important;
    height:26px!important;
    z-index:12!important;
    opacity:.78;
    background:rgba(15,36,56,.42)!important;
    transform:translateY(-50%)!important;
  }

  .hub-flag-arrow-left{
    left:2px!important;
  }

  .hub-flag-arrow-right{
    right:2px!important;
  }

  .hub-hero-flag-hint{
    margin-top:8px!important;
  }
}


/* =========================================================
   Mobile Hero UX-Fix
   - echte Pfeile an den vorhandenen IDs
   - Pfeile liegen über dem Flaggenband, nehmen keinen Platz weg
   - Finger-Wischen zuverlässig
   - weniger Leerraum bis zum Highlights-Bereich
   ========================================================= */
@media(max-width:699px){
  .hub-flag-strip-wrap{
    position:relative!important;
    display:block!important;
    width:100%!important;
    margin:0 0 8px!important;
    overflow:visible!important;
  }

  .hub-flag-viewport{
    width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    touch-action:pan-y!important;
  }

  .hub-flag-strip{
    touch-action:pan-y!important;
    -webkit-user-select:none!important;
    user-select:none!important;
    cursor:grab!important;
  }

  .hub-flag-strip.is-dragging{
    cursor:grabbing!important;
  }

  /* Die echten Buttons aus index.php: #hub-flag-prev / #hub-flag-next */
  #hub-flag-prev,
  #hub-flag-next{
    position:absolute!important;
    top:50%!important;
    z-index:30!important;
    display:grid!important;
    place-items:center!important;
    width:26px!important;
    height:26px!important;
    min-width:26px!important;
    padding:0!important;
    margin:0!important;
    border:1px solid rgba(255,255,255,.42)!important;
    border-radius:50%!important;
    background:rgba(15,36,56,.58)!important;
    color:#fff!important;
    font-size:20px!important;
    font-weight:400!important;
    line-height:1!important;
    opacity:.92!important;
    transform:translateY(-50%)!important;
    box-shadow:0 3px 10px rgba(0,0,0,.16)!important;
  }

  #hub-flag-prev{
    left:4px!important;
    right:auto!important;
  }

  #hub-flag-next{
    right:4px!important;
    left:auto!important;
  }

  /* Alte, nicht existierende/alte Positionsklassen neutralisieren. */
  .hub-flag-arrow-left,
  .hub-flag-arrow-right{
    inset:auto!important;
  }

  /* Hinweis näher ans Flaggenband. */
  .hub-hero-flag-hint{
    margin-top:6px!important;
    margin-bottom:0!important;
  }

  /* Hero endet direkt nach dem Hinweis statt mit grosser leerer Bildflaeche. */
  .hub-hero{
    min-height:0!important;
    height:auto!important;
    padding-bottom:18px!important;
  }

  .hub-hero-inner{
    margin-bottom:0!important;
  }

  /* Highlights direkt anschliessen, aber nicht ankleben. */
  .hub-highlights{
    padding-top:18px!important;
    margin-top:0!important;
  }
}


/* Mobile Hero: Layoutfluss korrigieren statt optisch per transform zu schieben. */
@media(max-width:699px){
  .hub-hero{
    min-height:0!important;
    height:auto!important;
    padding:12px 12px 14px!important;
  }

  .hub-nav{
    margin-bottom:0!important;
  }

  .hub-hero-inner{
    transform:none!important;
    margin-top:0px!important;
    margin-bottom:0!important;
  }

  .hub-hero-flag-hint{
    margin-top:6px!important;
    margin-bottom:0!important;
  }

  .hub-highlights{
    margin-top:0!important;
    padding-top:12px!important;
  }
}


/* =========================================================
   FINAL OVERRIDE: dauerhaft sichtbarer Burger + Hero-Eyebrow
   ========================================================= */

/* Burger wirklich viewport-fixed und ueber allen normalen Layern */
.hub-nav-burger{
  position:fixed!important;
  top:12px!important;
  right:12px!important;
  left:auto!important;
  bottom:auto!important;
  width:44px!important;
  height:44px!important;
  margin:0!important;
  z-index:2147483647!important;
  background:rgba(15,36,56,.96)!important;
  color:#fff!important;
  border:2px solid rgba(217,165,82,.95)!important;
  border-radius:50%!important;
  box-shadow:
    0 6px 22px rgba(0,0,0,.42),
    0 0 0 3px rgba(15,36,56,.20)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  transform:none!important;
}

/* "AuswandernHilft weltweit": nicht mehr transparent im Hintergrund verlieren */
.hub-hero-eyebrow{
  background:rgba(15,36,56,.88)!important;
  color:#ffd36f!important;
  border:1px solid rgba(217,165,82,.78)!important;
  box-shadow:
    0 5px 18px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,255,255,.05)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.55)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}

@media(min-width:700px){
  .hub-nav-burger{
    top:18px!important;
    right:20px!important;
  }
}


/* EXAKT ZWEI ZEILEN:
   1. Dein Weg ins Ausland —  (Originalgroesse)
   2. fuer jedes Land der richtige Partner. (kleiner + einzeilig)
*/
.hub-hero-title-main,
.hub-hero-title-second{
  display:block!important;
}

.hub-hero-title-main{
  font-size:1em!important;
}

.hub-hero-title-second{
  font-size:.72em!important;
  white-space:nowrap!important;
  margin-top:2px!important;
}

@media(max-width:699px){
  .hub-hero-title-main{
    font-size:1em!important;
  }

  .hub-hero-title-second{
    font-size:.58em!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    margin-top:3px!important;
  }
}