/* Taalwissel */
/* Ondertitel binnen de marges houden (langere vertalingen) */
.title__portfolio{
  box-sizing: border-box;
  max-width: 100%;
  padding: 0 6vw;
  text-align: center;
}
/* Kop op tablets begrenzen zodat lange woorden (ONTWIKKELAAR, DÉVELOPPEUR) binnen beeld blijven */
@media (min-width: 761px) and (max-width: 1100px){
  .title__h1{
    font-size: min(10em, 12vw);
  }
}
.lang-btn{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-left: 25px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: inherit;
  transition: color .4s linear;
}
.lang-btn:hover{
  color: white;
}
.lang-btn:focus-visible{
  outline: 1px solid currentColor;
  outline-offset: 4px;
}
.lang-btn__chev{
  width: .7em;
  height: .45em;
}
.lang-flag{
  flex: none;
  width: 1.35em;
  height: .9em;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}
.lang-list,
.lang-prompt{
  position: fixed;
  z-index: 50;
  font-family: "Open Sans", Arial, sans-serif;
  color: #fff;
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 32px rgba(0,0,0,.25);
}
.lang-list{
  display: flex;
  flex-direction: column;
  padding: 6px;
  min-width: 170px;
}
.lang-list[hidden]{
  display: none;
}
.lang-list button{
  display: flex;
  align-items: center;
  gap: .8em;
  padding: .6em .8em;
  border: 0;
  border-radius: 4px;
  background: none;
  color: #c8c8c8;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: inherit;
}
.lang-list button:hover,
.lang-list button:focus-visible{
  background: rgba(255,255,255,.08);
  color: #fff;
  outline: none;
}
.lang-list button[aria-current="true"]{
  color: #fff;
}
.lang-prompt{
  display: flex;
  align-items: center;
  gap: .8em;
  max-width: min(400px, calc(100vw - 32px));
  padding: .8em .9em;
  font-size: 13px;
  line-height: 1.45;
  animation: langPromptIn .4s ease both;
}
.lang-prompt__text{
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: #e6e6e6;
}
.lang-prompt__yes{
  padding: .35em .8em;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font: inherit;
  white-space: nowrap;
  cursor: inherit;
  transition: background .3s ease;
}
.lang-prompt__yes:hover,
.lang-prompt__yes:focus-visible{
  background: rgba(255,255,255,.1);
  outline: none;
}
.lang-prompt__close{
  display: flex;
  padding: 4px;
  border: 0;
  background: none;
  color: #9c9c9c;
  cursor: inherit;
}
.lang-prompt__close:hover,
.lang-prompt__close:focus-visible{
  color: #fff;
  outline: none;
}
.lang-prompt__close svg{
  width: 10px;
  height: 10px;
}
@keyframes langPromptIn{
  from{ opacity: 0; transform: translateY(-4px); }
  to{ opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .lang-prompt{ animation: none; }
}
@media (max-width: 430px){
  .lang-btn{
    margin: 10px 0 0 0;
  }
}