/* --- Kontakt ---- */

.page-template-kontakt .page-main-content{
  position: sticky;
  top:3rem;
  margin: 2rem auto;
}

.page-template-kontakt footer{padding-top:7rem}

@media (max-width:600px){
  .page-template-kontakt footer{padding-top:10rem}
}

.page-template-kontakt .page-main-content p{
  max-width:40ch;
  padding-right:3ch
}

@media (max-width:1250px) and (min-width:992px){
  .page-template-kontakt h1{max-width:15ch}
}

.kontakt-info{
  margin-top:2.5rem;
  display: grid;
  gap:.5em 0;
}

@media (min-width:601px){
  .kontakt-info *{
    font-size:1rem !important
  }
}

.kontakt-info .head{
  font-weight:bold;
  text-decoration: underline;
}

.kontakt-info a:not(.social){
  text-decoration: underline;
  text-decoration-color:var(--color-highlight);
  text-underline-offset:.1em;
}

.kontakt-info div:last-child{
  margin-top:1.25em;
  display:flex;
  flex-wrap: wrap;
  gap:1.25em;
}

.kontakt-info a.social::before{
  content:'';
  height:1.6em;
  width:1.6em;
  background-color:currentColor;
  display: inline-block;
  -webkit-mask:var(--icon) no-repeat center/contain;
  mask:var(--icon) no-repeat center/contain;
  --icon:url('../assets/in.png');
}

.kontakt-info a.social.social-insta::before{
  --icon:url('../assets/insta.png');
}

@media (max-width:600px){
  .kontakt-info a.social::before{
    width:2rem;
    height:2rem;
  }
}

.no-touch .kontakt-info a:hover{
  color:var(--color-highlight)
}


/* --- Kontaktformular ---*/

.kontaktformular{
  margin-top:2rem;
  position: relative;
}

@media (max-width:991px){
  .kontaktformular{
    max-width:50ch;
    margin:2rem auto 0 auto;
  }
}

.kontaktformular::before{
  content:'';
  position: absolute;
  top:0;
  bottom:0;
  left:-2.5rem;
  border:1px solid var(--color-gray);
  border-width:0 0 0 1px;
}

@media (max-width:991px){
  .kontaktformular::before{
    border-width:1px 0 0 0;
    left:0;
    right:0;
    top:-2rem;
    height:1px;
  }
}

/* --- Contact Form ----- */

.kontaktformular .row.main-row{
  --gx:10px;
  --gy:20px;
  --color-gray:#999;
  --color-invalid:#c41883;
  caret-color: var(--color-highlight);
  accent-color:var(--color-highlight);
}

.kontaktformular .cf-heading{
  font-weight:bold;
  font-size:1rem;
}

@media (min-width:601px){
  .kontaktformular .cf-heading{font-size:.9rem}
}

.kontaktformular .row.main-row > div:not(:first-child) .cf-heading{
  margin-top:.75em
}

.wpcf7 select{
  -webkit-appearance:none;
  appearance:none;
  background-color:#fff;
  color:currentColor;
  white-space: normal;
  text-wrap:balance;
}

.wpcf7 span:has(select){
  position: relative;
  display:inline-block;
  width: 100%;
}

.wpcf7 span:has(select)::after{
  content:'';
  position: absolute;
  top:.9em;
  right:.6em;
  width:1.25em;
  height:1.25em;
  background-color:var(--color-highlight);
  -webkit-mask:var(--icon) no-repeat center/contain;
  mask:var(--icon) no-repeat center/contain;
  --icon:url('../assets/arrow-down.svg');
  pointer-events: none;
  cursor: pointer;
}

.wpcf7 input, .wpcf7 select, .wpcf7 textarea{
  width: 100%;
  padding:1rem;
  border:1px solid var(--color-gray);
  border-radius: 10px;
  font-size:1rem;
  line-height: 1;
  color:var(--color-prime);
  outline:none!important;
}

@media (min-width:601px){
  .wpcf7 input, .wpcf7 select, .wpcf7 textarea{font-size: .9rem;}
}

.wpcf7 textarea{min-height:250px}

.wpcf7-form-control-wrap *:active,
.wpcf7-form-control-wrap *:focus{
  border-color: var(--color-prime);
}

.wpcf7-form-control-wrap *:not(:valid){
  border-color:var(--color-invalid)
}

.wpcf7-form-control-wrap + label{
  position: absolute;
  top:0;
  left:1rem;
  translate:0 1rem;
  background-image:linear-gradient(to bottom,transparent calc(50% - 1px),#fff 0);
  padding: 0 .8ch;
  font-size:1rem;
  color:var(--color-gray);
  transition: translate .25s, scale .25s;
  transform-origin: top left;
  pointer-events: none;
}

@media (min-width:601px){
  .wpcf7-form-control-wrap + label{font-size:.9rem}
}

.wpcf7-form-control-wrap:has(*:active) + label,
.wpcf7-form-control-wrap:has(*:focus) + label,
.wpcf7-form-control-wrap:has(*:not(:placeholder-shown)) + label{
  color:var(--color-prime);
  translate:0 -40%;
  scale:.825;
}

.wpcf7-form-control-wrap:has(.wpcf7-not-valid) + label{color:var(--color-invalid);}

.wpcf7-not-valid-tip{
  font-size:.6rem !important;
  line-height: 1.5;
  padding:.5em .8ch 0 3.25ch;
  color:var(--color-invalid) !important;
  position: relative;
}

.wpcf7-not-valid-tip::before{
  content:"\2191";
  position: absolute;
  left:1.5ch;
  top:.4em;
}

.wpcf7 input::placeholder{opacity:0}

.footnote{
  font-size:.75rem;
  line-height:1.2;
  font-style: italic;
  color:var(--color-gray);
  --color-gray:#888;
  margin-top:-.5em;
}
.footnote div + div{
  margin-top:.5em
}

@media (max-width:575px){
  .footnote{max-width:40ch}
}

.footnote a{
  color:var(--color-gray);
  text-decoration: underline;
  text-decoration-color: var(--color-highlight);
  text-underline-offset:.1em;
}

.wpcf7-submit{
  font-size:1rem;
  border-color:var(--color-sec) !important;
  background-color: var(--color-sec);
  color:#fff !important;
  font-weight:bold;
  margin-top:.75rem;
  cursor: pointer;
  transition:scale .25s;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-appearance:none;
  appearance:none;
}

@media (min-width:601px){
  .wpcf7-submit{font-size:.9rem;}
}

.no-touch .wpcf7-submit:hover{
  --color-sec:var(--color-highlight)
}

.wpcf7-submit:active{
  scale:.95
}

.wpcf7-spinner{
  display: block !important;
  margin:0 auto !important;
  background-color:var(--color-gray) !important;
}

.wpcf7-spinner::before{
  background-color:#fff !important
}

.submitting .wpcf7-spinner{
  margin:1rem auto !important;
  opacity:1 !important;
}

.wpcf7 form .wpcf7-response-output{
  font-size:1rem;
  padding:1.5rem 1.75rem !important;
  border-radius:10px;
  margin:.75rem 0 0 0 !important;
}

@media (min-width:601px){
  .wpcf7 form .wpcf7-response-output{font-size:.9rem;}
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{
  border-color:#ffde00 !important; /* Yellow */
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #21e733 !important; /* Green */
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: var(--color-invalid) !important; /* Red */
}