.lidgeld-tabel-wrapper {
  overflow-x: auto;
  margin-top: 20px;
}

.lidgeld-tabel {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: 'Roboto', sans-serif;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.lidgeld-tabel thead {
  background-color: #003366; /* Donkerblauw */
  color: #ffffff;             /* Witte letters */
}

.lidgeld-tabel th,
.lidgeld-tabel td {
  padding: 14px 18px;
  text-align: left;
  color: #000000;             /* Zwarte tekst overal */
  background-color: #ffffff;  /* Witte achtergrond voor alle cellen */
}

.lidgeld-tabel thead th {
  background-color: #003366; /* Donkerblauwe header */
  color: #ffffff;            /* Witte tekst in header */
}

.lidgeld-tabel tbody tr:not(:last-child) td {
  border-bottom: 1px solid #eee;
}

.lidgeld-tabel td:last-child {
  font-weight: bold;
}
/* Verberg submenu standaard */
.dropdown .dropdown-content {
  display: none;
}

/* Laat submenu’s zien op hover (voor desktop) */
@media screen and (min-width: 768px) {
  .dropdown:hover .dropdown-content {
    display: block;
  }
}

a {
  text-decoration: none;
}

.footer {
  display: flex;
  flex-direction: row;
  background-color: #05226a;
  width: 100%;
}

.footer-info-container {
  display: flex;
  flex-direction: column;
  width: 50%;
}
.footer-info {
  background-color: #da262c;
  width: 100%;
}


.footer-foto-l,
.footer-foto-r {
  background-color: #da262c;
  width: 25%;
  text-align: center;
}

.footer-copyright {
  width: 100%;
  background-color: #da262c;
  height: 100%;
  color: white;
  text-align: center;
  vertical-align: bottom;
}
.footer-foto-l {
  border-bottom-left-radius: 10px;
}

.footer-foto-r {
  border-bottom-right-radius: 10px;
}

.footer-info {
  display: flex;
  flex-direction: row;
}

.footer-info-accomodatie,
.footer-info-bank {
  color: white;
  width: 50%;
  padding: 10px;
  padding-top: 45px;
}

.footer-info-titel {
  font-weight: bolder;
}


.footer-info-bank {
  text-align: right;
}

.footer-info-accomodatie {
  text-align: left;
}

.layout {
  display: flex;
  flex-direction: row;
  /* Margin zorgt voor geen whitespace boven, links en rechts */
  margin: -8px;
}

.layout-zijkant {
  background-color: #05226a;
  flex: 1
}

.layout-center {
  background-color: white;
  width: 1278px;
  margin-top: 10px;
  margin-bottom: 10px;
}

body {
  font-family: Roboto, Arial;
  background-color: #05226a;
  line-height: 1.5;
}

.inhoud {
  background-color: white;
  margin-top: 20px;
  margin-left: 50px;
  margin-right: 50px;
}

h2 {
  color: #05226a;
}

.blauwebalk {
  background-color: #05226a;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.blauwebalk h2 {
  color: white;
  margin-left: 15px;
}

.toplink {
  vertical-align: middle;
  margin-top: 20px;
  margin-right: 20px;
}

.toplink img {
  width: 24px;
  height: 24px;
}

.blauwebalklinks h2 {
  color: white;
  margin-left: 20px;
  margin-right: 20px;
  vertical-align: middle;
}

.kledijlogo {
  display: block;
  margin: auto;
  max-width: 50%;
  margin-top: 50px;
  margin-bottom: 50px;
}

.inhoud img {
  max-width: 100%;
  height: auto;
  display: block;
}

.volgende-wedstrijd-card {
    background: linear-gradient(135deg, #1e3c72, #05226a);

    color: white;
    border-radius: 16px;
    padding: 20px;
    margin: 20px auto;
    max-width: 400px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    font-family: 'Roboto', sans-serif;
}

.vw-titel {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.vw-teams {
    font-size: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.team {
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.1);
}

.team-thuis {
    background-color: rgba(255, 255, 255, 0.2);
}

.team-uit {
    background-color: rgba(255, 255, 255, 0.2);
}

.vs {
    font-weight: 500;
    color: #ddd;
}

.vw-tijd {
    font-size: 1em;
    margin-top: 5px;
    font-style: italic;
}

.activiteiten-tabel {
  width: 90%;
  margin: 30px auto;
  border-collapse: collapse;
  font-family: 'Roboto', sans-serif;
  background-color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  overflow: hidden;
}

.activiteiten-tabel th {
  background-color: #05226a;
  color: white;
  padding: 12px 16px;
  text-align: left;
}

.activiteiten-tabel td {
  padding: 10px 16px;
  border-bottom: 1px solid #eee;
  background-color: white;
}

.formulier-tabel td, 
.formulier-tabel tr{
  background-color: white;
  color: black;
  text-align: left;
}

.activiteiten-tabel input[type="date"],
.activiteiten-tabel input[type="text"] {
  width: 95%;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-family: 'Roboto', sans-serif;
}

.activiteiten-tabel button {
  background-color: #073181;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s;
}

.activiteiten-tabel button:hover {
  background-color: #05226a;
}

.activiteiten-tabel a {
  color: white;
  margin-left: 12px;
  text-decoration: none;
  font-weight: bold;
}

.activiteiten-tabel a:hover {
  color: white;
  margin-left: 12px;
  text-decoration: none;
  font-weight: bold;
}

.primary-button {
  display: inline-block;
  background-color: #073181;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.primary-button:hover {
  background-color: #051454;
}

.terug-knop {
    display: inline-block;
    margin-bottom: 20px;
    background-color: #073181;
    color: #fff;
    padding: 10px 16px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    transition: background-color 0.3s;
}
.terug-knop:hover {
    background-color: #05226a;
}

form label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    margin-top: 15px;
}

form input[type="text"],
form input[type="file"],
form textarea {
    width: 100%;
    max-width: 600px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

form input[type="checkbox"] {
    margin-right: 5px;
}

form input[type="submit"] {
    background-color: #073181;
    color: white;
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 15px;
}

form input[type="submit"]:hover {
    background-color: #05226a;
}

.success-message {
    color: green;
    font-weight: bold;
    margin-bottom: 20px;
}

.inhoud h1 {
    font-size: 28px;
    color: #05226a;
    margin-bottom: 20px;
    font-weight: 700;
}

.formulier-wrapper {
    background-color: #ffffff; /* Echt wit */
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-width: 1000px;
    margin: 0 auto 30px auto; /* Extra ruimte onderaan */
}

.checkbox-groep label {
    font-weight: normal;
}

button {
  background-color: #073181;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #05226a;
}

.header {
    display: flex;
    flex-direction: row;
    align-self: center;
    background-color: #05226a;
}

.header-slideshow {
    display: flex;
    width: 70%;
    height: 100%;
}

.header-nextgame {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30%;
    background-color: #da262c;
    color: white;
    border-top-right-radius: 10px;
}  

.header-img {
    border-top-left-radius: 10px;
}

.header-nextgame-next {
    font-size: xx-large;
    font-weight: 600;
    margin-bottom: 10px;
}

.header-nextgame-teams {
    font-size: x-large;
    font-style: italic;
}

.trooper-img-big {
  width: 250px;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  margin-left: 20px; /* ruimte links */
  transition: transform 0.3s ease;
  margin-left: 200px;
}

.trooper-img-big:hover {
  transform: scale(1.05);
}
.header-nextgame-vs {
    font-size: small;
    font-style: italic;
}

.header-nextgame-time {
    margin-top: 10px;
}

.header-nextgame-locatie,
.header-nextgame-time {
    font-weight: 700;
}
.klastroop {
  display: flex;
  margin-bottom: 20px;
  width: 100%;
}

.agenda {
  width: 10%;
  background-color: white;
  border-radius: 10px;
  margin-left: 50px;
}

.agenda-titel {
  display: flex;
  padding: 15px 40px;
  color: white;
  font-weight: bolder;
  font-size: 24px;
  background-color: #05226a;
  border-radius: 10px;
}


.wedstrijd {
  display: flex;
  padding: 10px 20px;
  color: white;
  font-weight: bolder;
  font-size: 16px;
}
.agenda-datum {
  width: 10%;
  text-align: right;
}  
.agenda-uur {
  width: 10%;
  text-align: right;
}
.agenda-naam {
  width: 80%;
  margin-left: 20px;
}

.lijn {
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,.25);
}

.trooper {
  width: 40%;
  text-align: right;
  margin-right: 120px;
}

.sponsors {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}


.sponsors-slider {
  overflow: hidden;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center; /* optioneel: centreert horizontaal als nodig */
}

.sponsors-track {
  display: flex;
  /* width: max-content; */
  animation: scroll 40s linear infinite;
}

.sponsors-track a {
  flex-shrink: 0;
  margin: 0 10px;
}

.sponsors-track img {
  height: 80px;
  width: auto;
  object-fit: contain;
  transition: transform 0.3s;
}

.sponsors-track img:hover {
  transform: scale(1.1);
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.trooper-titel {
  font-size: 30px;
  width: 100%;
  font-weight: bold;
  color: #05226a;
}

.trooper-img {
  max-width: 30%;
}

.trooper-tekst {
  display: flex;
}

.trooper-tekst-links {
  display: inline-block;
  width: 30%;
}

.trooper-tekst-rechts {
  width: 70%;
}

.trooplink {
      text-decoration: none;
      color: #073181;
      font-weight: bold;
}

/* Add a black background color to the top navigation */
.topnav {
  background-color: #073181;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: #073181;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #004aad;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Socials rechts alignen */
.menu-socials {
  display: flex;
  justify-content: center;
  align-items: center;
  float: right;
  height: 48px;
}

.nieuws-info {
  background-color: #073181;
  padding-top: 10px;
}

.thumbnail {
  width: 100%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
    display: block;
  height: auto;
  object-fit: cover;
  margin: 0;
  padding: 0;
}

.titel {
  margin-left: 15px;
  margin-top: 0;
  margin-right: 15px;
  font-size: 18px;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 6px;
  color: white;
}

.nieuws-info-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.thumbnail-row {
  position: relative;
  line-height: 0;
  padding: 0;
  margin: 0;
}

.datum {
  margin-left: 15px;
  margin-top: 3px;
  margin-bottom: 3px;
  font-size: 12px;
  color: white;
  padding-bottom: 10px;
}

@media (max-width: 600px) {
  .nieuws-grid {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 16px;
    /* margin: 10px; */
    row-gap: 20px;
  }
}

@media (min-width: 601px) and (max-width: 768px) {
  .nieuws-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
      column-gap: 16px;
  row-gap: 40px;
  margin: 50px;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  .nieuws-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
      column-gap: 16px;
  row-gap: 40px;
  margin: 50px;
  }
}

@media (min-width: 1024px) {
  .nieuws-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
      column-gap: 16px;
  row-gap: 40px;
  margin: 50px;
  }
}

@media (max-width: 600px) {
  .nieuws-grid-index {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 16px;
    margin: 10px;
    row-gap: 20px;
  }
}

@media (min-width: 601px) and (max-width: 768px) {
  .nieuws-grid-index {
    display: grid;
    grid-template-columns: 1fr 1fr;
      column-gap: 16px;
  row-gap: 40px;
  margin: 50px;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  .nieuws-grid-index {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
      column-gap: 16px;
  row-gap: 40px;
  margin: 50px;
  }
}

@media (min-width: 1024px) {
  .nieuws-grid-index {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
      column-gap: 16px;
  row-gap: 40px;
  margin: 50px;
  }
}

.nieuws-item {
  background-color: #073181;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  padding: 0;
  margin: 0;
  border: none;
  line-height: 0;
}

.nieuws-item-bew {
  background-color: white;
  display: flex;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nieuws-item-bew:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* Kleine hover animatie */
.nieuws-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.titel a {
  color: white; /* Zorg dat de tekst wit is */
  text-decoration: none; /* Verwijder de onderstreping */
}

.news-filter {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 50px;
}

.news-filter-org {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 50px;
}

.news-filter-meer-nieuws {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 50px;
}

.news-filter-button {
  border-style: solid;
  border-width: 2px;
  border-color: #05226a;
  border-radius: 14px;
  padding: 3px 20px;
  margin: 5px;
  color: #05226a;
  text-decoration: none;
  }

.filter-active {
  border-style: solid;
  border-width: 2px;
  border-color: #05226a;
  border-radius: 14px;
  padding: 3px 20px;
  margin: 5px;
  color: white;
  background-color:#05226a;
  text-decoration: none;
  font-weight: bold;
}

.news-filter-button:hover {
  background-color: #004aad;
  color: white;
}

.nieuwscontainer {
  display: flex;
  width: 100%;
  min-height: 100px; /* voorbeeldhoogte */
  color: black;
}

.container {
  display: flex;
  width: 100%;
  min-height: 100px; /* voorbeeldhoogte */
  color: white;
}

.kolom {
  padding: 20px;
  box-sizing: border-box;
  border-radius: 10px;
}

.links,
.rechts {
  flex: 1; /* Deze kolommen nemen de resterende ruimte */
  background-color: #ffffff;
}

.midden {
  width: 400px; /* Vaste breedte */
  background-color: #073181;
}

input[type=text], input[type=password], input[type=submit], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ffffff;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  color: #073181;
  font-size: 20px;
}

.buffer {
  height: 10px;
}

.kolomtabel {
  padding: 20px;
  border-radius: 10px;
  background-color: #073181;
  width: 100%;
}

table {
  width: 100%;
  overflow: hidden;
  border-color: transparent;
}

th {
  background-color: #073181;
  color: white;
  border-color: transparent;
}

th, td {
  padding: 12px;
  text-align: center;
  color: black;
}

tr:nth-child(odd) {
  background-color: #05226a;
  color: white;
}

tr:nth-child(even) {
  background-color: #004aad;
  color: white;
}

.hoofd:link, .hoofd:visited, .hoofd:hover, .hoofd:active {
  text-decoration: none;
  color: white;
}

button {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ffffff;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: white;
  color: #073181;
  font-size: 20px;
  cursor: pointer;
}

button:hover {
  background-color: #f0f0f0;
}

/* MEDIA QUERIES
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 768px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 768px) {
  .topnav.responsive {
    position: fixed;
    z-index: 999;
    top: 0;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    top: 0;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
    top: 0;
  }
}


/* WAT VERWIJDEREN INDIEN SMARTPHONE */
@media screen and (max-width: 768px) {

  .header {
    display: none !important;
  }
  .agenda {
    display: none !important;
  } 
  .sidebar {
    display: none !important;
  } 
  .footer-info-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-size: 10px;
  }
  .layout-center {
  background-color: white;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  }
  .trooper {
    width: 100%;
    margin: 10px;
    text-align: center;
  }
  .layout-zijkant {
  display: none !important;
  }
  .news-filter {
  display: none !important;
  }
  .footer-info-accomodatie {
  width: 40%;
  padding-top: 10px;
  }
  .footer-info-bank {
  width: 60%;
  padding-top: 10px;
  }
  .trooper-tekst-right {
  width: 100%;
  font-size: 16px;
  }
  .trooper-tekst-links {
    display: none !important;
  }
  .layout-center {
  margin-top: 0px;
  margin-bottom: 0px;

  }

  .topnav {
    /* height: 50px; */
    position: fixed;
    width: 100%;
    z-index: 10;
    top: 0;
  }
  
  .inhoud {
    padding-top: 50px;
    font-size: 16px;
    margin-left: 10px;
    margin-right:10px;
  }
  .blauwebalk h2 {
  color: white;
  margin-left: 15px;
  font-size: 20px;
  }

  .nieuws-item-api {
  display: none !important;
  }

  .news-filter-org {
    display: flex;
    flex-direction: column;
    align-items: center; /* om inhoud horizontaal te centreren */
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 50px;
    gap: 5px; /* ruimte tussen de knoppen */
  }

  .news-filter-button {
    border: 2px solid #05226a;
    border-radius: 14px;
    padding: 8px 20px; /* correcte padding */
    color: #05226a;
    text-decoration: none;
    display: inline-block;
    width: auto; /* geen 100%, zodat ze niet te breed worden */
  }

  .buffer {
    height: 60px;
  }

  .iframe {
    width: 100%;
    height: 100%;
  }

}
@media screen and (max-width: 600px) {
  .footer-foto-l {
    display: none !important;
  }
  .footer-foto-r {
    display: none !important;
  }
}

@media (min-width: 601px) and (max-width: 768px) {
  .footer-foto-l img{
    height: 100%;
  }
  .footer-foto-r img {
    height: 100%;
  }
  .footer {
    height: 135px;
}
  .footer-foto-l,
  .footer-foto-r{
    border-radius: 0px;
  }
}

/* Wrapper die het logo bovenop alles plaatst */
.menu-logo-wrapper {
  position: relative;
  height: 0; /* neemt geen ruimte in beslag */
  z-index: 20;
  margin-top: 10px;
}

/* Het logo zelf — half boven menu, half erboven */
.menu-logo {
  position: fixed; /* absolute;*/
  top: 50; /* de bovenkant steekt uit boven het menu */
  left: 25px;
  height: 100px; /* pas aan naar wens */
  z-index: 30;
}

@media (min-width: 768px) {
  .menu-logo-wrapper {
    display: none;
  }
  .logobuffer {
    display: none;
  }
}

.logobuffer {height: 25px;}
body.menu-open .menu-logo-wrapper {
  display: none;
}

@media screen and (max-width: 600px) {
    img.teamfoto.is-placeholder {
        display: none;
    }
}

.trooper-block {
  display: flex;
  align-items: center;
  gap: 100px;
  margin-bottom: 30px;
}

.trooper-img-big {
  width:250px;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.trooper-text {
  max-width: 500px;
}

.trooper-titel {
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 10px;
}

.trooper-img {
  height: 30px;
  vertical-align: middle;
}

@media screen and (max-width: 768px) {
  .trooper-block {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .trooper-img-big {
    margin: 0 auto 15px auto;
    width: 70%;
    max-width: 150px;
  }

  .trooper-text {
    max-width: 90%;
  }
}