/* kontakt.css – dezente Anpassung an deinen bestehenden Look
   nutzt vorhandene Variablen/Klassen aus style.css, wenn vorhanden */

:root{
  --primary: #0a66c2;
  --text: #111827;
  --muted: #6b7280;
  --card: #ffffff;
  --line: rgba(0,0,0,.08);
  --bg-soft: #f7f7fb;
  --radius-lg: 16px;
  --radius-md: 12px;
}

.contact-hero {
  padding: 64px 0 32px;
  background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.02));
  border-bottom: 1px solid var(--line);
}
.contact-hero .container { max-width: 960px; }
.contact-badge{
  display:inline-flex; gap:.5rem; align-items:center;
  font-size:.85rem; padding:.2rem .6rem; border-radius:999px;
  background:#eef2ff; color:#3730a3; font-weight:600; margin-bottom:.5rem;
}
.contact-hero h1 { margin: 0 0 .25rem; }
.contact-hero .subtitle { color: var(--muted); }

.contact-section .container{
  max-width: 1080px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 24px 0 64px;
}
@media (min-width: 1024px){
  .contact-section .container{ grid-template-columns: 2fr 1fr; align-items: start; }
}

/* Card */
.contact-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 6px 24px rgba(0,0,0,.04);
}
.section-title{
  display:flex; align-items:center; gap:.6rem; margin: 0 0 .8rem;
}

/* Form */
.contact-form{ display: grid; gap: 16px; }

.form-grid{
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px){
  .form-grid{ grid-template-columns: 1fr 1fr; }
}
.grid-2-1{
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 768px){
  .grid-2-1{ grid-template-columns: 1fr; }
}

.form-field label{
  display:block; font-weight:600; margin: 2px 0 6px; color: var(--text);
}

.input-ico-wrap{
  position: relative;
}
.input-ico-wrap .ico-field{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width: 18px; height: 18px; opacity:.6; pointer-events:none;
}
.input-ico-wrap input,
.input-ico-wrap textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 12px 12px 36px;
  background:#fff;
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.input-ico-wrap textarea{ min-height: 160px; resize: vertical; }
.input-ico-wrap input::placeholder,
.input-ico-wrap textarea::placeholder{ color: #9ca3af; }

.input-ico-wrap input:focus,
.input-ico-wrap textarea:focus{
  border-color: rgba(10,102,194,.5);
  box-shadow: 0 0 0 4px rgba(10,102,194,.08);
}

.hint{ color: var(--muted); display:block; margin-top:4px; }

.form-check{
  display:flex; gap:.6rem; align-items:flex-start; margin-top: 4px;
}
.form-check input[type="checkbox"]{
  width: 18px; height: 18px; margin-top: 2px;
}
.form-check label{ color: var(--text); }
.form-check .link{ color: var(--primary); text-decoration: none; }
.form-check .link:hover{ text-decoration: underline; }

/* Buttons & Icons */
.btn{
  appearance:none; border:1px solid transparent; background: #111827; color:#fff;
  padding: 10px 14px; border-radius: 10px; font-weight:600; cursor:pointer;
  transition: transform .05s ease, filter .15s ease;
  display:inline-flex; align-items:center; gap:.5rem;
}
.btn:hover{ filter: brightness(1.1); }
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--primary); }
.btn.icon .ico{ width:18px; height:18px; }

.ico{ width: 16px; height: 16px; display:inline-block; }
.ico-lg{ width: 24px; height: 24px; }

/* Status / Fehlermeldungen */
.status{ color: var(--muted); margin: .4rem 0 0; }
#form-msg{ min-height: 1.2em; }

/* Aside */
.contact-aside .info-card{
  background: var(--bg-soft);
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.contact-aside .info-card h3{ margin: 0 0 .5rem; }
.contact-list{ list-style:none; padding:0; margin:0; display:grid; gap:.25rem; }
.contact-list li{ display:flex; gap:.5rem; }
.contact-list li span{ width: 130px; color: var(--muted); }

/* Honeypot */
.hp{ position:absolute; left:-9999px; opacity:0; }