html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f2f2f2;
  font-family: Arial, Helvetica, sans-serif;
}

/* ✅ Jetzt BLAUER Hintergrund */
.captcha-box {
  width: 320px;
  background: #3f5cff;   /* blau */
  padding: 16px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* ✅ Schrift jetzt WEISS */
.captcha-text {
  margin-bottom: 12px;
  line-height: 1.2;
  color: white;
}

.captcha-text .small {
  display: block;
  font-size: 12px;
  color: white;
  opacity: 0.9;
}

.captcha-text .big {
  display: block;
  font-size: 22px;
  font-weight: bold;
  margin: 4px 0;
  color: white;
}

.captcha-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
}

/* ✅ JETZT: Quadrate sind WEISS */
.captcha-grid div {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: white;
  cursor: pointer;
  transition: border 0.1s ease;
}

/* ✅ Hover bleibt weiß umrandet */
.captcha-grid div:hover {
  border: 2px solid white;
}

.captcha-grid.kaninchen div {
  background-image: url(BUNNYS.png); /* DEIN BILD */
  background-size: 300% 300%;  /* 3x3 Aufteilung */
  background-repeat: no-repeat;
}


.captcha-grid.aschenbroedel div {
  background-image: url(aschenbroedel.png); /* DEIN BILD */
  background-size: 300% 300%;  /* 3x3 Aufteilung */
  background-repeat: no-repeat;
}

.captcha-grid.jamilah div {
  background-image: url(jamilah.png); /* DEIN BILD */
  background-size: 300% 300%;  /* 3x3 Aufteilung */
  background-repeat: no-repeat;
}

.captcha-grid.milena div {
  background-image: url(Milena.jpeg); /* DEIN BILD */
  background-size: 300% 300%;  /* 3x3 Aufteilung */
  background-repeat: no-repeat;
}

.captcha-grid.tram div {
  background-image: url(Tram.jpg); /* DEIN BILD */
  background-size: 300% 300%;  /* 3x3 Aufteilung */
  background-repeat: no-repeat;
}

.captcha-grid.hund div {
  background-image: url(Hund.jpg); /* DEIN BILD */
  background-size: 300% 300%;  /* 3x3 Aufteilung */
  background-repeat: no-repeat;
}

.captcha-grid.velo div {
  background-image: url(Velo.png); /* DEIN BILD */
  background-size: 300% 300%;  /* 3x3 Aufteilung */
  background-repeat: no-repeat;
}

.captcha-grid.katze div {
  background-image: url(Katze.jpg); /* DEIN BILD */
  background-size: 300% 300%;  /* 3x3 Aufteilung */
  background-repeat: no-repeat;
}

.captcha-grid.tiger div {
  background-image: url(Tiger.jpg); /* DEIN BILD */
  background-size: 300% 300%;  /* 3x3 Aufteilung */
  background-repeat: no-repeat;
}

.captcha-grid.rio div {
  background-image: url(Rio.png); /* DEIN BILD */
  background-size: 300% 300%;  /* 3x3 Aufteilung */
  background-repeat: no-repeat;
}

.captcha-grid.bär div {
  background-image: url(Bär.jpg); /* DEIN BILD */
  background-size: 300% 300%;  /* 3x3 Aufteilung */
  background-repeat: no-repeat;
}

.captcha-grid.hochzeit div {
  background-image: url(hochzeit.jpg); /* DEIN BILD */
  background-size: 300% 300%;  /* 3x3 Aufteilung */
  background-repeat: no-repeat;
}


.captcha-grid.benny div {
  background-image: url(Benny.jpeg); /* DEIN BILD */
  background-size: 300% 300%;  /* 3x3 Aufteilung */
  background-repeat: no-repeat;
}

.captcha-grid.meerjungfrau div {
  background-image: url(meerjungfau.jpg); /* DEIN BILD */
  background-size: 300% 300%;  /* 3x3 Aufteilung */
  background-repeat: no-repeat;
}

.captcha-grid.esel div {
  background-image: url(esel.jpg); /* DEIN BILD */
  background-size: 300% 300%;  /* 3x3 Aufteilung */
  background-repeat: no-repeat;
}

.captcha-grid.security div {
  background-image: url(Security.JPG); /* DEIN BILD */
  background-size: 300% 300%;  /* 3x3 Aufteilung */
  background-repeat: no-repeat;
}

.captcha-grid.offish div {
  background-image: url(offish.jpg); /* DEIN BILD */
  background-size: 300% 300%;  /* 3x3 Aufteilung */
  background-repeat: no-repeat;
}

.captcha-grid.marina div {
  background-image: url(Marina.jpg); /* DEIN BILD */
  background-size: 300% 300%;  /* 3x3 Aufteilung */
  background-repeat: no-repeat;
}


.captcha-grid.hasi div {
  background-image: url(hasi.jpg); /* DEIN BILD */
  background-size: 300% 300%;  /* 3x3 Aufteilung */
  background-repeat: no-repeat;
}


.captcha-grid.pinkhair div {
  background-image: url(pinkhair.jpg); /* DEIN BILD */
  background-size: 300% 300%;  /* 3x3 Aufteilung */
  background-repeat: no-repeat;
}


.captcha-grid.auto div {
  background-image: url(auto.jpg); /* DEIN BILD */
  background-size: 300% 300%;  /* 3x3 Aufteilung */
  background-repeat: no-repeat;
}

.captcha-grid.ross div {
  background-image: url(ross.jpg); /* DEIN BILD */
  background-size: 300% 300%;  /* 3x3 Aufteilung */
  background-repeat: no-repeat;
}

.captcha-grid.katzen div {
  background-image: url(katzen.jpg); /* DEIN BILD */
  background-size: 300% 300%;  /* 3x3 Aufteilung */
  background-repeat: no-repeat;
}

.captcha-grid.pferd div {
  background-image: url(rossrechnung.jpg); /* DEIN BILD */
  background-size: 300% 300%;  /* 3x3 Aufteilung */
  background-repeat: no-repeat;
}



.captcha-grid div:nth-child(1) { background-position: 0% 0%; }
.captcha-grid div:nth-child(2) { background-position: 50% 0%; }
.captcha-grid div:nth-child(3) { background-position: 100% 0%; }

.captcha-grid div:nth-child(4) { background-position: 0% 50%; }
.captcha-grid div:nth-child(5) { background-position: 50% 50%; }
.captcha-grid div:nth-child(6) { background-position: 100% 50%; }

.captcha-grid div:nth-child(7) { background-position: 0% 100%; }
.captcha-grid div:nth-child(8) { background-position: 50% 100%; }
.captcha-grid div:nth-child(9) { background-position: 100% 100%; }


.Congrats {
color: white;
font-family: Arial, Helvetica, sans-serif;
background-color: #3f5cff;
}

.captcha-confirm {
  margin-top: 14px;
  margin-left: auto;          /* schiebt nach rechts */
  display: block;

  background: white;
  color: #3f5cff;
  border: none;
  padding: 10px 18px;

  font-size: 13px;
  font-weight: bold;
  border-radius: 4px;

  cursor: pointer;
}

.captcha-confirm:hover {
  background: #f0f0f0;
}


.back-to-index {
  position: fixed;
  top: 20px;
  right: 20px;

  margin: 0;          /* überschreibt margin-left:auto */
  z-index: 1000;
  text-decoration: none;
}

.back-to-index:hover {
  background: #f0f0f0;     /* gleich wie .captcha-confirm */
  text-decoration: none;  /* sicherstellen */
}


/* bleibt weiss umrandet, wenn angeklickt */
.captcha-grid div.active {
  border: 2px solid white;
}

.index-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 8px 0;
}

.index-buttons button {
  background: white;
  color: #3f5cff;

  border: none;
  border-radius: 4px;

  font-size: 16px;
  font-weight: bold;
  font-family: inherit;

  height: 40px;

  cursor: pointer;
}



.back-to-index {
  background: white;
  color: #3f5cff;
  border: none;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
}

.back-to-index:hover {
  background: #f0f0f0;
}



.back-to-index {
  position: fixed;      /* bleibt immer oben rechts */
  top: 20px;
  right: 20px;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;

  color: #3f5cff; ;       /* dein Neon-Grün */
  text-decoration: none;

  z-index: 1000;        /* sicher über allem */
}

.back-to-index:hover {
  text-decoration: underline;
}





.fake-recaptcha {
  width: 300px;
  height: 74px;

  background: #f9f9f9;
  border: 1px solid #d3d3d3;
  border-radius: 3px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

/* LEFT SIDE */
.recaptcha-left {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.recaptcha-left input {
  display: none;
}

.checkbox {
  width: 22px;
  height: 22px;
  border: 2px solid #bcbcbc;
  border-radius: 2px;
  background: white;
}

.recaptcha-text {
  font-size: 14px;
  color: #000;
}

/* CHECKED STATE */
.recaptcha-left input:checked + .checkbox {
  background: white;
  border-color: #34a853; /* Google-Grün */
  position: relative;
}

.recaptcha-left input:checked + .checkbox::after {
  content: "✓";
  color: #34a853;        /* grüner Haken */
  font-size: 18px;
  font-weight: bold;
  position: absolute;
  top: -1px;
  left: 4px;
}

/* RIGHT SIDE */
.recaptcha-right {
  text-align: center;
  font-size: 9px;
  color: #777;
}

.recaptcha-logo {
  width: 32px;
  height: 32px;
  margin: 0 auto 4px;
  background: url("https://www.gstatic.com/recaptcha/api2/logo_48.png")
    no-repeat center;
  background-size: contain;
}

.recaptcha-small {
  font-size: 9px;
}

/* Hintergrund nur für Seiten mit body.secret-page */
body.secret-page {
    background-color: hotpink; /* bright pink für diese Seite */
    margin: 0; /* optional, damit kein weißer Rand entsteht */
}

/* Styling für den Text in secret-div */
.schrift.secret {
    color: #0dff00; /* neon-grün */
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 40px;
    padding: 20px; /* optional, damit Text nicht am Rand klebt */
    line-height: 1.3; /* besser lesbar */
}