body {
  margin: 0;
  background-color: rgb(0, 0, 60);
  font-family: 'Courier New', Courier, monospace;
  color: white;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: white;
  padding: 10px;
  text-align: center;
  z-index: 1000;
}

header img {
  max-height: 50px;
}

main {
  padding-top: 80px;           /* keep content below the fixed header */
  position: relative;
  z-index: 1;
}

/* ============================= */
/* TEXT BOXES  – basic styling   */
/* ============================= */
.text-box {
  position: relative;
  background-color: white;
  color: rgb(0, 0, 60);
  padding: 20px;
  width: 60%;                 /* give us some horizontal play room */
  max-width: 600px;
  border-radius: 4px;
  font-weight: bold;
  overflow: visible;          /* let the pseudo‑elements stick out */
  margin: 90px 0;             /* vertical spacing */
}

/*********************************
 *  INDIVIDUAL HORIZONTAL OFFSETS
 *********************************/
.text-box:nth-of-type(1) { margin-left: 8%;  }   /* left-ish  */
.text-box:nth-of-type(2) { margin-left: 32%; }   /* more right */
.text-box:nth-of-type(3) { margin-left: 14%; }   /* slight left*/
.text-box:nth-of-type(4) { margin-left: 0%;  }   /* flush left */
.text-box:nth-of-type(5) { margin-left: 40%; }   /* far right  */

/* For anything beyond the 5th box we’ll just centre it */
.text-box:nth-of-type(n+6) { margin-left: auto; margin-right: auto; }

/* ============================= */
/*  DECORATIVE PROTRUSIONS       */
/* ============================= */
.text-box::before,
.text-box::after {
  content: '';
  position: absolute;
  background-color: white;
  z-index: -1;   /* keep them behind the text */
}

/* 1 — Democracy…  */
.text-box:nth-of-type(1)::after {
  width: 90px;
  height: 22px;
  bottom: -22px;
  left: 50px;
}

/* 2 — The time for…  */
.text-box:nth-of-type(2)::after {
  width: 150px;
  height: 22px;
  bottom: -22px;
  right: -100px;
}

/* 3 — Verne Capital invests… */
.text-box:nth-of-type(3)::after {
  width: 70px;
  height: 22px;
  top: -22px;
  right: 40px;
}

/* 4 — We back bold founders… */
.text-box:nth-of-type(4)::after {
  width: 110px;
  height: 22px;
  bottom: -22px;
  left: 0;
}

/* 5 — Led by Benjamin… */
.text-box:nth-of-type(5)::after {
  width: 110px;
  height: 22px;
  top: -22px;
  right: 0;
}

.text-box:nth-of-type(5)::before {
  width: 60px;
  height: 40px;
  right: -60px;
  top: 42px;
}

    .advisory-text {
      font-weight: normal;
      font-size: 0.95em;
      color: rgb(0, 0, 60);
      margin-top: 10px;
      line-height: 1.4em;
      text-align: left;
    }

/* ============================= */
/*  CONTACT FORM 		 */
/* ============================= */
.contact-form {
  display: block;
  background-color: white;
  color: rgb(0, 0, 60);
  margin: 80px auto;
  padding: 30px;
  width: 80%;
  max-width: 600px;
  border-radius: 6px;
  font-weight: bold;
  font-family: 'Courier New', Courier, monospace;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.contact-form h2 { margin: 0 0 20px 0; font-size: 1.4em; }
.contact-form input,
.contact-form textarea {
  display: block; width: 100%; margin-bottom: 16px; padding: 12px; font-size: 1em;
  font-family: inherit; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;
}
.contact-form textarea { resize: vertical; min-height: 100px; }
.contact-form button { background-color: rgb(0,0,60); color: white; padding: 12px 24px; border: none; border-radius: 4px; font-weight: bold; font-size: 1em; cursor: pointer; transition: background-color .2s; }
.contact-form button:hover { background-color: rgb(30,30,90); }

/* ============================= */
/*  FOOTER                       */
/* ============================= */
footer { color: white; text-align: center; margin-top: 50px; font-size: 0.9em; padding-bottom: 30px; position: relative; z-index: 1; }

/* ============================= */
/*   DECORATIVE BACKGROUND       */
/* ============================= */
.crosshair-wrapper { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; animation: float 6s ease-in-out infinite alternate; }
.crosshair-svg { width: 100%; height: 100%; }
.red-dot { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; background-color: red; border-radius: 50%; transform: translate(-50%, -50%); z-index: 2000; }
body > .red-dot { display: none; }
@keyframes float { 0% { margin-top: 0; margin-left: 0; } 100% { margin-top: 40px; margin-left: 40px; } }

/* ============================= */
/*  RESPONSIVE TWEAKS            */
/* ============================= */
@media (max-width: 600px) {
  .text-box { width: 90%; margin-left: auto !important; margin-right: auto !important; margin: 60px auto; }
  .text-box::before, .text-box::after { display: none; }
}

/* ============================= */
/*  TEAM GRID (neu, minimal)     */
/* ============================= */
.team-grid {
  display: flex;
  width: 60%;
  max-width: 600px;
  margin: 90px auto; /* wie .text-box, damit äquidistanter Abstand entsteht */
  gap: 28px;        /* schmaler Hintergrundstreifen zwischen Boxen */
}

.team-grid .team-card { /* vererbt .text-box-Stile, reduziert nur Abstände */
  margin: 0;                 /* kein zusätzlicher Außenabstand */
  min-height: 170px;         /* gleichmäßige Höhe für Text + Bullets */
  display: flex;
  flex-direction: column;
  align-items: flex-start;    /* Text linksbündig wie gewünscht */
  justify-content: flex-start;
}

.team-grid .team-card p { margin: 0 0 10px 0; }
.team-grid .team-card ul { margin: 0; padding-left: 20px; font-weight: normal; font-size: 0.95em; }

/* Protrusions bei kleinen Teamkarten deaktivieren */
.team-grid .team-card::before, .team-grid .team-card::after { display: none; }

@media (max-width: 600px) {
  .team-grid { width: 90%; flex-direction: column; gap: 16px; margin: 60px auto; }
  .team-grid .team-card { min-height: 140px; }
}