/* Vokabeln2go.de topic hub. All component styles use the v2g- prefix. */
.v2g-selection-section {
  --v2g-ink:#1d1d1f; --v2g-muted:#6e6e73; --v2g-track:#e6e6eb;
  box-sizing:border-box; color:var(--v2g-ink); background:#f5f5f7;
  padding:clamp(26px,3.2vw,46px) 24px clamp(30px,3vw,42px);
  scroll-margin-top:0;
  display:flex; flex-direction:column; height:100svh; min-height:700px;
}
.v2g-selection-inner { width:min(1240px,100%); margin-inline:auto; }
.v2g-selection-section > .v2g-selection-inner { display:flex; flex-direction:column; flex:1; min-height:0; }
.v2g-hub-heading { max-width:860px; margin:0 0 clamp(18px,2vw,26px); text-align:left; }
.v2g-hub-eyebrow { margin:0 0 8px; color:#e34b43; font-size:clamp(.78rem,1.05vw,.92rem); font-weight:700; letter-spacing:.14em; }
.v2g-hub-title { margin:0; color:var(--v2g-ink); font-size:clamp(2.7rem,5.6vw,4.7rem); font-weight:700; letter-spacing:-.06em; line-height:.98; }
.v2g-topic-intro { max-width:720px; margin:13px 0 0; color:var(--v2g-muted); font-size:clamp(1rem,1.25vw,1.15rem); line-height:1.48; }
.v2g-hub-showcase { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(340px,1fr) auto; position:relative; flex:1; min-height:0; }
.v2g-feature-card { position:relative; isolation:isolate; overflow:hidden; min-height:0; aspect-ratio:auto; height:100%; border-radius:clamp(20px,2vw,28px); background:#202124; box-shadow:0 10px 30px rgba(20,20,25,.08); grid-area:1/1; }
.v2g-feature-image-frame { position:absolute; inset:0; overflow:hidden; margin:0; }
.v2g-hub-image { position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center 48%; opacity:1; }
.v2g-feature-gradient { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(8,10,14,.02) 12%,rgba(8,10,14,.18) 36%,rgba(8,10,14,.68) 68%,rgba(8,10,14,.9) 100%); }
.v2g-feature-overlay { grid-area:1/1; z-index:2; align-self:end; display:flex; flex-direction:column; gap:22px; padding:clamp(22px,3vw,36px); pointer-events:none; }
.v2g-image-actions { position:relative; z-index:2; pointer-events:auto; display:flex; flex-wrap:wrap; align-items:center; gap:8px; transition:opacity .32s ease,transform .38s cubic-bezier(.22,.68,0,1); }
.v2g-feature-caption { position:relative; z-index:2; margin:0; padding:0; pointer-events:none; transition:opacity .32s ease,transform .38s cubic-bezier(.22,.68,0,1); }
.v2g-feature-caption.is-content-leaving,.v2g-image-actions.is-content-leaving { opacity:0; transform:translateY(9px); }
.v2g-feature-caption.is-content-entering,.v2g-image-actions.is-content-entering { opacity:0; transform:translateY(12px); }
.v2g-image-actions.is-content-entering .v2g-hub-link { opacity:0; transform:translateY(8px); }
.v2g-image-actions .v2g-hub-link { transition:opacity .32s ease,transform .38s cubic-bezier(.22,.68,0,1),background-color .18s ease,border-color .18s ease; }
.v2g-image-actions.is-content-entering .v2g-hub-link:nth-child(2) { transition-delay:.04s,.04s,0s,0s; }
.v2g-image-actions.is-content-entering .v2g-hub-link:nth-child(3) { transition-delay:.08s,.08s,0s,0s; }
.v2g-image-actions.is-content-entering .v2g-hub-link:nth-child(4) { transition-delay:.12s,.12s,0s,0s; }
.v2g-hub-description { max-width:720px; margin:0; color:rgba(255,255,255,.94); font-size:clamp(.98rem,1.3vw,1.16rem); line-height:1.42; text-shadow:0 1px 12px rgba(0,0,0,.2); }
.v2g-hub-link,.v2g-hub-cta { display:inline-flex; min-height:40px; align-items:center; justify-content:center; gap:9px; padding:0 16px; border:1px solid rgba(255,255,255,.96); border-radius:999px; color:#1d1d1f; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); box-shadow:0 2px 12px rgba(0,0,0,.12); text-decoration:none; font-family:inherit; font-size:clamp(.85rem,.92vw,.96rem); font-weight:650; transition:background-color .18s ease,transform .18s ease,border-color .18s ease; }
.v2g-hub-link span,.v2g-hub-cta span { color:#45454a; font-size:1.12em; }
.v2g-hub-link:hover,.v2g-hub-cta:hover { color:#111; border-color:#fff; background:#fff; transform:translateY(-1px); }
.v2g-hub-link:focus-visible,.v2g-hub-cta:focus-visible,.v2g-hub-tab:focus-visible,.v2g-hub-arrow:focus-visible,.v2g-back-link:focus-visible { outline:3px solid #1685ff; outline-offset:3px; }
.v2g-hub-tabs-wrap { display:flex; justify-content:center; grid-area:2/1; margin:16px auto 0; width:100%; }
.v2g-hub-tabs { display:flex; align-items:center; gap:2px; width:max-content; max-width:100%; padding:4px; border-radius:999px; background:var(--v2g-track); }
.v2g-hub-arrow { flex:0 0 36px; display:none; place-items:center; width:36px; height:38px; padding:0; border:0; border-radius:999px; color:#45454a; background:transparent; font-family:inherit; font-size:1.35rem; font-weight:500; line-height:1; cursor:pointer; transition:color .18s ease,background-color .18s ease,opacity .18s ease; }
.v2g-hub-arrow:hover:not(:disabled) { color:#111; background:rgba(255,255,255,.72); }
.v2g-hub-arrow:disabled { opacity:.35; cursor:default; }
.v2g-hub-tab-track { position:relative; display:flex; min-width:0; align-items:center; justify-content:center; gap:2px; overflow-x:auto; scrollbar-width:none; }
.v2g-hub-tab-track::before { content:""; position:absolute; z-index:0; top:2px; left:var(--v2g-active-left,0px); width:var(--v2g-active-width,0px); height:calc(100% - 4px); border-radius:999px; background:#1d1d1f; transition:left .34s cubic-bezier(.22,.68,0,1),width .34s cubic-bezier(.22,.68,0,1); pointer-events:none; }
.v2g-hub-tab-track::-webkit-scrollbar { display:none; }
.v2g-hub-tab { position:relative; z-index:1; flex:0 0 auto; min-width:0; min-height:40px; padding:0 clamp(14px,1.8vw,22px); border:0; border-radius:999px; color:#45454a; background:transparent; font-family:inherit; font-size:clamp(.86rem,.98vw,1rem); font-weight:400; line-height:1.15; white-space:nowrap; cursor:pointer; transition:color .22s ease; }
.v2g-hub-tab:hover { color:#111; }
.v2g-hub-tab.is-active { color:#fff; }
.v2g-selection-followup { display:flex; justify-content:center; padding:0 24px clamp(26px,3vw,42px); background:#f5f5f7; border-bottom:1px solid rgba(60,60,67,.09); text-align:center; }
.v2g-selection-followup .v2g-selection-inner { text-align:center; }
.v2g-back-link { display:inline-block; color:#6e6e73; font-size:.92rem; text-decoration:none; transition:color .16s ease; }
.v2g-back-link:hover { color:#1d1d1f; }
.v2g-support-section { scroll-margin-top:20px; background:#fff; }
.v2g-topic-page .section--trust { border-top:1px solid rgba(60,60,67,.08); }
.v2g-section-divider { width:min(1160px,calc(100% - 48px)); height:1px; margin:0 auto; background:rgba(60,60,67,.16); }
.v2g-topic-page .section--social { padding-top:clamp(42px,6vw,76px); }
@media (max-width:1000px) {
  .v2g-selection-section { padding-inline:20px; }
  .v2g-feature-card { aspect-ratio:auto; }
  .v2g-hub-link,.v2g-hub-cta { min-height:38px; padding-inline:14px; }
  .v2g-hub-tab { flex:1 1 auto; padding-inline:clamp(6px,1.2vw,12px); font-size:clamp(.72rem,1.35vw,.9rem); }
}
/* Larger touch targets and labels on tablets in landscape. */
@media (min-width:768px) and (max-width:1366px) and (orientation:landscape) and (any-pointer:coarse) {
  .v2g-hub-tabs { width:min(960px,100%); box-sizing:border-box; padding:6px; }
  .v2g-hub-tab-track { width:100%; }
  .v2g-hub-tab { flex:1 1 auto; min-height:48px; padding-inline:clamp(12px,2vw,24px); font-size:clamp(.95rem,1.5vw,1.08rem); }
}
@media (max-width:640px) {
  .v2g-selection-section { height:auto; min-height:100svh; display:flex; align-items:center; padding:clamp(18px,3svh,28px) 17px clamp(20px,3svh,30px); }
  .v2g-selection-inner { width:100%; }
  .v2g-selection-section > .v2g-selection-inner { display:block; flex:none; }
  .v2g-hub-heading { max-width:450px; margin:0 auto clamp(14px,2.2svh,20px); }
  .v2g-hub-eyebrow { margin-bottom:6px; font-size:.68rem; }
  .v2g-hub-title { font-size:clamp(2.25rem,9.2vw,3.15rem); line-height:.98; }
  .v2g-topic-intro { margin-top:9px; font-size:.91rem; line-height:1.38; }
  .v2g-hub-showcase { width:min(100%,430px); margin-inline:auto; grid-template-rows:auto auto auto; }
  .v2g-feature-card { width:100%; aspect-ratio:auto; height:clamp(320px,50svh,480px); border-radius:22px; box-shadow:0 8px 24px rgba(20,20,25,.10); touch-action:pan-y; }
  .v2g-feature-image-frame { border-radius:inherit; }
  .v2g-hub-image { object-position:center 46%; }
  .v2g-feature-gradient { background:linear-gradient(180deg,rgba(0,0,0,.04) 12%,rgba(0,0,0,.18) 34%,rgba(0,0,0,.65) 68%,rgba(0,0,0,.88) 100%); }
  .v2g-feature-overlay { display:contents; }
  .v2g-image-actions { grid-area:1/1; align-self:end; margin:15px 14px; gap:7px; }
  .v2g-image-actions.has-multiple-links { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
  .v2g-hub-link,.v2g-hub-cta { min-height:39px; padding:0 12px 0 18px; justify-content:flex-start; text-align:left; color:#1d1d1f; background:rgba(255,255,255,.97); border-color:#fff; font-size:.8rem; }
  .v2g-image-actions.has-multiple-links .v2g-hub-link { box-sizing:border-box; min-height:40px; padding:6px 8px 6px 16px; gap:5px; font-size:.75rem; font-weight:650; line-height:1.15; text-align:left; }
  .v2g-image-actions.has-multiple-links .v2g-hub-link:nth-child(1) { flex:0 1 56%; }
  .v2g-image-actions.has-multiple-links .v2g-hub-link:nth-child(2) { flex:0 1 39%; }
  .v2g-image-actions.has-multiple-links .v2g-hub-link:nth-child(3) { flex:0 1 45%; }
  .v2g-image-actions.has-multiple-links .v2g-hub-link:nth-child(4) { flex:0 1 48%; }
  .v2g-hub-link span,.v2g-hub-cta span { margin-left:auto; flex-shrink:0; }
  .v2g-hub-tabs-wrap { margin:12px auto 0; }
  .v2g-hub-tabs { width:100%; justify-content:space-between; gap:0; padding:4px; }
  .v2g-hub-arrow { display:grid; flex-basis:32px; width:32px; height:38px; font-size:1.3rem; }
  .v2g-hub-tab-track { flex:1 1 auto; justify-content:flex-start; gap:1px; scroll-behavior:smooth; }
  .v2g-hub-tab { flex:0 0 auto; min-height:38px; padding:0 11px; font-size:.79rem; }
  .v2g-feature-caption { grid-area:3/1; align-self:auto; margin:0; padding:20px 8px 0; min-height:7em; text-align:center; box-sizing:border-box; pointer-events:auto; }
  .v2g-hub-description { max-width:38ch; margin-inline:auto; color:#6e6e73; font-size:.95rem; line-height:1.48; text-align:center; text-shadow:none; }
  .v2g-selection-followup { padding:0 14px 25px; }
  .v2g-back-link { font-size:.88rem; }
  .v2g-section-divider { width:calc(100% - 28px); }
}
@media (prefers-color-scheme:dark) {
  .v2g-selection-section,.v2g-selection-followup { --v2g-ink:#f5f5f7; --v2g-muted:#a1a1a6; --v2g-track:#303034; color:#f5f5f7; background:#1c1c1e; }
  .v2g-hub-title { color:#f5f5f7; }
  .v2g-topic-intro,.v2g-back-link { color:#a1a1a6; }
  .v2g-back-link:hover { color:#fff; }
  .v2g-hub-link,.v2g-hub-cta { color:#f5f5f7; background:rgba(44,44,48,.9); border-color:rgba(255,255,255,.24); box-shadow:0 2px 10px rgba(0,0,0,.16); -webkit-backdrop-filter:blur(12px); }
  .v2g-hub-link:hover,.v2g-hub-cta:hover { color:#fff; background:rgba(64,64,69,.96); border-color:rgba(255,255,255,.4); }
  .v2g-hub-link span,.v2g-hub-cta span { color:#dedee2; }
  .v2g-hub-tab { color:#dedee2; }
  .v2g-hub-tab:hover { color:#fff; }
  .v2g-hub-tab.is-active { color:#1d1d1f; }
  .v2g-hub-tab-track::before { background:#f5f5f7; }
  .v2g-hub-arrow { color:#dedee2; }
  .v2g-hub-arrow:hover:not(:disabled) { color:#fff; background:rgba(255,255,255,.12); }
  .v2g-hub-description { color:#e4e4e7; }
  .v2g-selection-section .v2g-feature-caption { background:transparent; }
  .v2g-selection-section .v2g-hub-description { color:#e4e4e7; }
  .v2g-support-section { color:#f5f5f7; background:#111113; }
  .v2g-section-divider { background:rgba(235,235,245,.18); }
}
@media (prefers-reduced-motion:reduce) {
  .v2g-hub-image,.v2g-image-actions,.v2g-feature-caption,.v2g-hub-link,.v2g-hub-cta,.v2g-hub-tab,.v2g-hub-arrow,.v2g-back-link { transition:none !important; scroll-behavior:auto !important; }
}