/* ==========================================================================
   KONTAKT  —  nur für kontakt.html
   ========================================================================== */

.contact{
  display:grid;
  grid-template-columns:1.35fr .8fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}

/* ==========================================================================
   FORMULAR
   ========================================================================== */
.form{
  padding:clamp(1.5rem, 3.5vw, 2.5rem);
  background:linear-gradient(165deg, var(--panel-2), rgba(11,26,22,.7));
  border:1px solid var(--line);
  clip-path:var(--chamfer);
}

.form__row{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.25rem;
}
.form__field{ display:flex; flex-direction:column; margin-bottom:1.25rem; }
.form__row .form__field{ margin-bottom:0; }
.form__row + .form__field{ margin-top:1.25rem; }

.form__field label{
  font-family:var(--font-display); font-weight:600;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:.55rem;
}
.form__field label .req{ color:var(--accent); margin-left:.15rem; }
.form__field label .opt{
  color:var(--text-mute); font-weight:500;
  letter-spacing:.08em; text-transform:none;
  margin-left:.4rem; font-size:.66rem;
}

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form select,
.form textarea{
  width:100%;
  padding:.85rem 1rem;
  font-family:var(--font-body); font-weight:300;
  font-size:.85rem; color:var(--text);
  background:rgba(7,15,13,.75);
  border:1px solid var(--line);
  border-radius:0;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  appearance:none;
}
.form textarea{ min-height:170px; resize:vertical; line-height:1.7; }

.form input::placeholder,
.form textarea::placeholder{ color:var(--text-mute); opacity:.65; }

.form input:focus,
.form select:focus,
.form textarea:focus{
  outline:none;
  border-color:var(--accent-2);
  background:rgba(13,31,26,.9);
  box-shadow:0 0 0 1px var(--accent-2), 0 0 18px rgba(53,242,207,.25);
}

/* Auswahlfeld mit eigenem Pfeil */
.form select{
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% - 2px),
    calc(100% - 14px) calc(50% - 2px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:2.75rem;
  cursor:pointer;
}
.form select option{ background:var(--bg); color:var(--text); }

/* Zustimmung */
.form__consent{
  display:flex; align-items:flex-start; gap:.8rem;
  margin:1.5rem 0;
  font-size:.78rem; line-height:1.65;
  color:var(--text-dim);
  cursor:pointer;
}
.form__consent input{
  flex:none;
  width:20px; height:20px; margin-top:.15rem;
  appearance:none;
  background:rgba(7,15,13,.75);
  border:1px solid var(--line-strong);
  cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.form__consent input:checked{
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:0 0 14px rgba(255,232,61,.45);
}
.form__consent input:checked::after{
  content:"";
  display:block;
  width:6px; height:11px;
  margin:2px auto 0;
  border:solid #0a1512;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.form__consent input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Fehlermeldung je Feld */
.form__error{
  display:none;
  margin-top:.45rem;
  font-size:.72rem;
  color:#ff9a72;
}
.form__field.has-error input,
.form__field.has-error select,
.form__field.has-error textarea{
  border-color:#ff7a4d;
  box-shadow:0 0 0 1px rgba(255,122,77,.6);
}
.form__field.has-error .form__error,
.form__consent.has-error + .form__error{ display:block; }

/* Honigtopf — für Menschen unsichtbar, für Bots verlockend */
.form__hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px;
  overflow:hidden;
}

.form__actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem;
  margin-top:.5rem;
}
.form__hint{ font-size:.72rem; color:var(--text-mute); }

.form button[type="submit"]{ border:0; }
.form button[type="submit"][disabled]{
  opacity:.55;
  cursor:progress;
  filter:none;
}

/* Rückmeldung nach dem Absenden */
.form__status{
  display:none;
  margin-bottom:1.75rem;
  padding:1.1rem 1.35rem;
  font-size:.82rem; line-height:1.7;
  border-left:3px solid var(--accent-3);
  background:rgba(139,255,107,.08);
  color:var(--text);
}
.form__status.is-visible{ display:block; animation:statusIn .4s var(--ease); }
.form__status.is-error{
  border-left-color:#ff7a4d;
  background:rgba(255,122,77,.09);
}
.form__status strong{ display:block; margin-bottom:.3rem; color:var(--accent-3); }
.form__status.is-error strong{ color:#ff9a72; }
@keyframes statusIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

/* ==========================================================================
   KONTAKTDATEN DANEBEN
   ========================================================================== */
.cinfo{ display:grid; gap:1rem; }

.cinfo__card{
  position:relative;
  display:block;
  padding:1.35rem 1.4rem;
  background:rgba(11,26,22,.6);
  border:1px solid var(--line);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
a.cinfo__card:hover{
  border-color:var(--accent);
  background:rgba(17,39,34,.9);
  transform:translateY(-3px);
}
.cinfo__head{
  display:flex; align-items:center; gap:.65rem;
  margin-bottom:.7rem;
}
.cinfo__head svg{
  width:18px; height:18px; flex:none;
  fill:none; stroke:var(--accent); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.cinfo__head span{
  font-family:var(--font-display); font-weight:600;
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent);
}
.cinfo__value{
  font-size:.95rem; color:var(--text);
  line-height:1.6; word-break:break-word;
}
.cinfo__note{
  margin-top:.4rem;
  font-size:.72rem; color:var(--text-mute);
}

/* Reaktionszeit-Hinweis */
.cinfo__badge{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:.15rem;
  font-size:.7rem; letter-spacing:.06em;
  color:var(--accent-3);
}
.cinfo__badge i{
  width:7px; height:7px; border-radius:50%;
  background:var(--accent-3);
  box-shadow:0 0 0 0 rgba(139,255,107,.6);
  animation:pulse 2.4s infinite;
}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (max-width: 900px){
  .contact{ grid-template-columns:1fr; }
  .cinfo{ grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
}

@media (max-width: 560px){
  .form__row{ grid-template-columns:1fr; gap:0; }
  .form__row .form__field{ margin-bottom:1.25rem; }
  .form__actions{ flex-direction:column; align-items:stretch; }
  .form__actions .btn{ width:100%; }

  /* Mindestens 16px: Darunter zoomt iOS beim Antippen ungefragt hinein */
  .form input[type="text"],
  .form input[type="email"],
  .form input[type="tel"],
  .form select,
  .form textarea{ font-size:16px; }
}