:root {
  --header-w: 250px;
  --footer-h: 120px;
  --gap: 30px;
}

/* Wrapper, der den verfügbaren Viewport korrekt berechnet */
.contact-viewport {
  position: fixed;
  top: var(--gap);
  left: calc(var(--header-w) + var(--gap));
  right: var(--gap);
  bottom: calc(var(--footer-h) + var(--gap));
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  box-sizing: border-box;
}

/* Glasbox */
.contact-glassbox {
  width: 100%;
  height: 100%;
  padding: 32px;
  box-sizing: border-box;
  
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-radius: 22px;
  border: 3px solid rgba(209, 182, 98, 0.85);
  display: flex;
}

/* Formular selbst */
.contact-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Felder */
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 0.9rem;
  min-height: 40px;
  font-family: 'Lato';
  font-weight: 200;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.4);
  color: #fff;
  box-sizing: border-box;
}

.contact-form textarea {
  resize: none;
  flex: 1; /* dehnt sich exakt im verfügbaren Raum */
}

/* Button */
.contact-form button {
  align-self: flex-end;
  padding: 12px 26px;
  border-radius: 999px;
  border: none;
  background: rgba(209,182,98,0.9);
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
}

.contact-glassbox {
  max-width: 720px;
  margin: 0 auto;
}


.contact-glassbox {
  position: relative; /* Bezugspunkt */
}

.contact-form button {
  position: absolute;
  right: 32px;
  bottom: 12px;
}

.contact-form {
  padding-bottom: 72px; /* Platz für Button */
}


.contact-note {
  font-size: 0.75rem;
  opacity: 0.75;
  margin-top: 6px;
  color:rgba(255, 255, 255, 1);
text-shadow: 0 0 10px rgba(100, 73, 0, 0.3), 0 0 5px rgba(54, 40, 0, 0.2), 0 0 5px rgba(54, 40, 0, 0.1) !important;
}

.contact-title {
  margin: 0 0 12px;
  font-size: 1.8rem;
  font-weight: 600;
  font-family: "Pacifico", cursive;
  letter-spacing: 0.2px;
  color: rgb(255, 255, 255);
  text-shadow: 
  0 0 1px rgba(0, 0, 0, 0.99), 
  0 0 10px rgba(209, 182, 98, 0.99), 
  0 0 15px rgba(209, 182, 98, 0.88), 
  0 0 20px rgba(209, 182, 98, 0.77) !important;

}

.contact-hint {
  font-size: 1rem;
  opacity: 0.8;
  margin: 0 0 12px;
  color:rgb(255, 255, 255);
  text-shadow: 0 0 10px rgba(100, 73, 0, 0.3), 0 0 5px rgba(54, 40, 0, 0.2), 0 0 5px rgba(54, 40, 0, 0.1) !important;
}

.contact-hint a {
  color: rgba(209, 163, 26, 0.99);
  text-decoration: none;
  text-shadow:
    0 1px 0 rgba(140, 115, 45, 0.7);
}

.contact-hint a:hover {
  text-decoration: underline;
}



@media (min-width: 1251px) and (max-height: 620px) {
  .contact-form {
    gap: 10px;
}}



@media (min-width: 1251px) and (max-height: 580px) {
  .contact-form {
    gap: 5px;
}
  .contact-title {
font-size: 1.4rem;
  }
}


@media (min-width: 1251px) and (max-height: 540px) {
.contact-title {
    margin: 0;
}
}


@media (min-width: 1251px) and (max-height: 520px) {
  .contact-form textarea {
    max-width: 520px;
  }
}


.contact-glassbox {
  position: relative; /* Bezugspunkt */
}

.contact-note {
  position: absolute;
  left: 32px;
  bottom: 5px;
}


@media (max-width: 1250px) {

  .contact-viewport {
    left: var(--gap); /* Header nicht mehr einrechnen */
    right: var(--gap);
    top: 150px;
    bottom: var(--gap);
  }

  .contact-glassbox {
    max-width: none;
    padding: 24px;
  }

  .contact-form {
    padding-bottom: 84px; /* Platz für Button + Note */
  }

  .contact-form button {
    right: 24px;
    bottom: 24px;
  }

  .contact-note {
    left: 24px;
    bottom: 24px;
  }
}


@media (max-width: 1250px) {

  .contact-viewport {
    position: relative;   /* nicht mehr fixed */
    min-height: 100vh;
    overflow: visible;    /* Seiten-Scroll erlauben */
  }
.contact-form {
    padding-bottom: 50px;
}}

@media (max-width: 1250px) {

  .contact-viewport {
    position: relative;          /* im normalen Flow */
    margin: var(--gap);          /* 30px Abstand zu allen Seiten */
    min-height: calc(100svh - (var(--gap) * 2));
  }

}

@media (max-width: 1250px) {

  .contact-viewport {
    position: relative;
    margin: var(--gap);
    min-height: calc(
      100svh
      - var(--footer-h)
      - (var(--gap) * 2)
    );
  }



  
}

@media (max-width: 1250px) {

  main#main {
    padding-bottom: calc(var(--footer-h) + var(--gap) *2.5);
  }

}

@media (max-width: 1250px) {

  .contact-viewport {
    left: auto !important;
    right: auto !important;

    margin: var(--gap);
    display: flex;
    justify-content: center;
    box-sizing: border-box;
  }

  .contact-glassbox {
    width: 100%;
  }

}

@media (max-width: 1250px) {

  .contact-glassbox {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

}

@media (max-width: 1250px) {

  .contact-note {
    position: static;   /* raus aus absolut */
    margin-top: 6px;    /* direkt unter dem textarea */
  }

}


.contact-form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.contact-consent {
  color: rgb(255, 255, 255);
}

.contact-consent {
  display: block;          /* normaler Textfluss */
  font-size: 0.75rem;
  opacity: 0.8;
}

.contact-consent input[type="checkbox"] {
  width: 12px;
  height: 12px;
  vertical-align: middle; /* Checkbox in Textlinie */
  margin-right: 6px;
}

.contact-consent a {
  display: inline;         /* erzwingt Inline-Text */
}

#kontakt > div > div > form > label > a {
  color: rgba(209, 163, 26, 0.99);
  
}

.hp-field {
  position: absolute;
  left: -9999px;
  height: 0;
  overflow: hidden;
}


/* =========================
   DANKE – SECTION
   ========================= */

.panel--thanks {
  display: flex;
  align-items: center;
  justify-content: center;
}

.thanks-viewport {
  width: 100%;
  padding: var(--gap);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.thanks-glassbox {
  width: 100%;
  max-width: 720px;
  padding: 32px;

  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-radius: 22px;
  border: 3px solid rgba(209, 182, 98, 0.85);

  text-align: center;
  box-sizing: border-box;
}

.thanks-title {
  margin: 0 0 12px;
  font-size: 1.8rem;
  font-weight: 600;
  font-family: "Pacifico", cursive;
  color: rgb(255, 255, 255);
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.99),
    0 0 10px rgba(209, 182, 98, 0.99),
    0 0 15px rgba(209, 182, 98, 0.88),
    0 0 20px rgba(209, 182, 98, 0.77);
}

.thanks-text {
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 24px;
  color: rgb(255, 255, 255);
  opacity: 0.85;
  text-shadow:
    0 0 10px rgba(100, 73, 0, 0.3),
    0 0 5px rgba(54, 40, 0, 0.2);
}

.thanks-button {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  background: rgba(209, 182, 98, 0.9);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}


@media (max-width: 1250px) {

.panel--thanks {
margin-top: 140px;
}    
}

.thanks-text--small {
  font-size: 0.75rem;
  opacity: 0.6;
  margin-top: 12px;
}