/* ============================================================
   Kontaktseite – Angaben + Formular
   Wird nur auf der Seite mit Slug „kontakt“ geladen (fbd_assets).
   ============================================================ */

.kontaktseite .sec-head h1{font-size:clamp(2rem,4vw,3rem);margin:.2em 0 .3em}
/* Einleitungssatz einzeilig halten: Es ist ein kurzer Lead, kein Fliesstext –
   der Umbruch nach zwei Dritteln wirkt unruhig. Auf schmalen Bildschirmen
   bricht er weiterhin normal um. */
.kontaktseite .sec-head{max-width:none}
.kontaktseite .sec-head p{color:var(--ink-soft);max-width:none;margin:0}

/* --- Rückmeldung nach dem Absenden --- */
.fbd-notice{
  margin:0 0 34px;padding:16px 20px;border-radius:var(--radius);
  border-left:4px solid var(--moss);background:#eaf3e3;color:var(--forest-900);
  font-size:.98rem;line-height:1.55;
}
.fbd-notice-warn{border-left-color:var(--amber);background:#fbf0e6}

/* --- Zweispaltiges Raster --- */
.kontakt-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:52px;align-items:stretch;margin-top:12px;
}
@media(max-width:900px){.kontakt-grid{grid-template-columns:minmax(0,1fr);gap:40px}}

.kontakt-grid h2{font-size:1.45rem;margin:0 0 24px}

/* --- Linke Spalte: Angaben --- */
/* Linke Spalte über die volle Höhe verteilen, damit unten keine Lücke bleibt. */
.kontakt-info{display:flex;flex-direction:column}
.kontakt-info .kinfo{display:flex;flex-direction:column;gap:20px;margin-bottom:8px}
.kontakt-info>.kontakt-hinweis:last-child{margin-top:auto}
.kontakt-info .row{display:flex;gap:15px;align-items:flex-start}
.kontakt-info .kic{
  flex:0 0 42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:#e8f0e0;color:var(--forest-700);
}
.kontakt-info .kic .ico{width:20px;height:20px}
.kontakt-info .row b{display:block;font-size:.83rem;letter-spacing:.04em;text-transform:uppercase;color:var(--moss);margin-bottom:3px}
.kontakt-info .row span{color:var(--ink-soft);line-height:1.5}
.kontakt-info .row a{border-bottom:1px solid var(--line)}
.kontakt-info .row a:hover{border-bottom-color:var(--moss);color:var(--forest-700)}

.kontakt-hinweis{
  margin-top:26px;padding:22px;border-radius:var(--radius);
  background:var(--cream);border:1px solid var(--line);
}
.kontakt-hinweis b{display:block;font-size:.83rem;letter-spacing:.04em;text-transform:uppercase;color:var(--moss);margin-bottom:8px}
.kontakt-hinweis p{margin:0 0 16px;color:var(--ink-soft);font-size:.95rem;line-height:1.55}

/* --- Rechte Spalte: Formular --- */
.kontakt-form{
  background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);
  padding:38px;box-shadow:var(--shadow);
}
@media(max-width:560px){.kontakt-form{padding:26px 20px}}

.fbd-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
@media(max-width:560px){.fbd-row{grid-template-columns:minmax(0,1fr)}}

.fbd-field{margin-bottom:20px}
.fbd-field label{
  display:block;font-weight:600;font-size:.9rem;color:var(--forest-900);margin-bottom:7px;
}
.fbd-field .req{color:var(--amber)}

.fbd-field input,
.fbd-field select,
.fbd-field textarea{
  width:100%;padding:13px 15px;font:inherit;font-size:1rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:10px;
  transition:border-color .15s,box-shadow .15s;
}
.fbd-field textarea{resize:vertical;min-height:118px;line-height:1.55}
.fbd-field input:focus,
.fbd-field select:focus,
.fbd-field textarea:focus{
  outline:none;border-color:var(--moss);box-shadow:0 0 0 3px rgba(79,157,58,.16);
}
/* Erst nach Interaktion markieren – sonst wirken leere Pflichtfelder
   schon beim Laden wie Fehler. */
.fbd-field input:user-invalid,
.fbd-field textarea:user-invalid{border-color:var(--amber)}

.fbd-hint{font-size:.85rem;color:var(--ink-soft);line-height:1.5;margin:0 0 22px}

.kontakt-form .btn{width:100%;justify-content:center;font-size:1.02rem;padding:.95em 1.4em}

/* Honeypot: für Menschen unsichtbar, für Bots im DOM vorhanden.
   Kein display:none – manche Bots erkennen das und lassen das Feld dann leer. */
.fbd-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Karten-Stile stehen neu in style.css – sie werden auch auf der Startseite gebraucht. */

/* --- Optionaler Fliesstext unterhalb --- */
.kontakt-text{margin-top:52px;padding-top:34px;border-top:1px solid var(--line);max-width:70ch}
.kontakt-text h2{font-size:1.35rem;margin:1.4em 0 .5em}
.kontakt-text ul{color:var(--ink-soft);line-height:1.7}