/* Seite /kontakt/ -------------------------------------------------------------
   Lokale Styles ausschliesslich fuer src/kontakt.njk (per Frontmatter-Feld
   extraCss in layouts/base.njk eingebunden). Praefix .kontakt- ; nur bestehende
   Design-Tokens und Breakpoints (768/1024px). Wiederverwendet: .hero-media
   (Hintergrundbild-Platzhalter bzw. spaeter <img>), .eyebrow, .btn, .link,
   .form-note, .breadcrumbs (nur Farben lokal auf dunkel gedreht).
   Bewusst ruhig: keine Schatten, keine Glas-Effekte, keine Animationen. ------ */

/* Zusammenhaengende dunkle Kontaktflaeche ------------------------------------- */
.kontakt {
  position: relative;
  overflow: hidden;
  background: var(--ink-900);
  color: var(--ink-text);
  padding-block: var(--space-3) var(--space-6);
}
@media (min-width: 1024px) {
  .kontakt {
    min-height: calc(100vh - 4.5rem);
    padding-block: var(--space-3) var(--space-7);
  }
}
/* Hintergrundbild (2,3:1, links dunkel/ruhig, Haus + Transporter rechts). Der
   Kontaktbereich ist deutlich hoeher als das Bild (Formular!), cover ist daher
   hoehengetrieben und zeigt nur einen Breitenausschnitt. Desktop: Position 62 % -
   dunkle Baeume/Himmel liegen hinter dem Text, das beleuchtete Haus hinter und
   neben dem Formular. Der Overlay ist links am staerksten (Textlesbarkeit) und
   rechts leichter (Motiv bleibt sichtbar); das Formular-Panel hat zusaetzlich
   eine eigene dunkle Flaeche. */
.kontakt .hero-media img { object-position: 62% 42%; }
.kontakt .hero-media::after {
  background: linear-gradient(
    90deg,
    rgba(11, 11, 11, 0.88) 0%,
    rgba(11, 11, 11, 0.72) 35%,
    rgba(11, 11, 11, 0.5) 60%,
    rgba(11, 11, 11, 0.38) 100%
  );
}
@media (max-width: 1023px) {
  /* Gestapeltes Layout: Bereich sehr hoch und schmal, nur ~15 % der Bildbreite
     sichtbar. Ausschnitt mit Abendhimmel/Baum, gleichmaessig kraeftiger Overlay -
     Text und Formular haben Vorrang, das Bild ist nur Atmosphaere. */
  .kontakt .hero-media img { object-position: 42% center; }
  .kontakt .hero-media::after { background: rgba(11, 11, 11, 0.78); }
}
.kontakt__inner { position: relative; z-index: 1; }

/* Breadcrumb in dunkler Gestaltung (kein heller Streifen) --------------------- */
.kontakt .breadcrumbs { color: var(--ink-text-muted); margin-bottom: var(--space-4); }
.kontakt .breadcrumbs a:hover { color: var(--brand-400); }

.kontakt__grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 1024px) {
  .kontakt__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-6);
    align-items: center;
  }
}

/* Linke Seite -------------------------------------------------------------------- */
.kontakt__intro h1 {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  margin-top: 0.35em;
  text-wrap: balance;
}
.kontakt__intro > p { max-width: 34rem; }

.kontakt-list { margin: var(--space-5) 0 0; padding: 0; max-width: 34rem; }
.kontakt-list__row {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 0;
  border-top: 1px solid var(--ink-line);
}
.kontakt-list__row:last-child { border-bottom: 1px solid var(--ink-line); }
.kontakt-list dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-400);
}
.kontakt-list dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.3;
}
.kontakt-list a { color: var(--ink-text); text-decoration: none; }
.kontakt-list a:hover { color: var(--brand-400); text-decoration: underline; text-underline-offset: 0.2em; }
@media (min-width: 768px) {
  .kontakt-list__row { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: baseline; gap: var(--space-1); }
  .kontakt-list dd { font-size: 1.125rem; overflow-wrap: anywhere; }
}

/* Positionierungshinweis: drei gleichwertige Modelle, keines hervorgehoben */
.kontakt-models {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
  margin: var(--space-4) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--ink-text-muted);
}
.kontakt-models span { white-space: nowrap; }
.kontakt-models span:not(:last-child)::after { content: "\00b7"; margin: 0 0.75em; }

/* Formular-Panel (dunkel, dezent abgegrenzt) ------------------------------------- */
.kontakt-panel {
  padding: var(--space-4) var(--space-3);
  background: rgba(11, 11, 11, 0.76);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-md);
}
@media (min-width: 768px) {
  .kontakt-panel { padding: var(--space-5) var(--space-5); }
}
.kontakt-panel__head { margin-bottom: var(--space-4); }
.kontakt-panel__head h2 {
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem);
  margin: 0.35em 0 var(--space-1);
}
.kontakt-panel__head p { margin: 0; }

.kontakt-form {
  color-scheme: dark; /* dunkle native Select-Liste/Pfeil/Autofill */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
/* Honeypot-Feld (Spam-Schutz): bewusst NICHT .visually-hidden (base.css),
   da jenes Utility fuer echte Inhalte gedacht ist und Screenreadern/Tab-
   Navigation absichtlich zugaenglich bleibt. Hier gilt das Gegenteil: fuer
   Menschen (Maus, Tastatur, Screenreader) darf das Feld nie auffindbar
   sein, nur einfache Bots, die Formularfelder automatisiert ausfuellen,
   sollen es sehen. position:absolute nimmt es zudem aus dem Grid-Fluss von
   .kontakt-form heraus, es entsteht keine leere Grid-Zelle. */
.kontakt-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .kontakt-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kontakt-field--half { grid-column: span 1; }
}
.kontakt-field { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 768px) {
  .kontakt-field--half { grid-column: span 1; }
}
.kontakt-form label {
  color: var(--ink-text);
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: 0.4rem;
}
.kontakt-form input,
.kontakt-form select,
.kontakt-form textarea {
  min-height: 3rem;
  padding: 0.8em 0.9em;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-sm);
  color: var(--ink-text);
}
.kontakt-form textarea { min-height: 9rem; resize: vertical; }
.kontakt-form input::placeholder,
.kontakt-form textarea::placeholder { color: var(--ink-text-muted); opacity: 1; }
.kontakt-form input:hover,
.kontakt-form select:hover,
.kontakt-form textarea:hover { border-color: var(--ink-text-muted); }
.kontakt-form input:focus,
.kontakt-form select:focus,
.kontakt-form textarea:focus {
  border-color: var(--brand-400);
  background: rgba(255, 255, 255, 0.06);
}
.kontakt-form select option { background: var(--ink-900); color: var(--ink-text); }

.kontakt-form__submit { margin-top: var(--space-1); }
.kontakt-form__submit .btn { width: 100%; min-height: 3.25rem; }
@media (min-width: 768px) {
  .kontakt-form__submit .btn { width: auto; min-width: 14rem; }
}
.kontakt-form .form-note { color: var(--ink-text-muted); margin: 0; grid-column: 1 / -1; }
.kontakt-form .link { color: var(--brand-400); }

/* Statusmeldungen (IDs #form-success / #form-error werden per JS ein-/ausgeblendet) */
.kontakt-form__success {
  grid-column: 1 / -1;
  padding: var(--space-2);
  border-left: 2px solid var(--brand-400);
  background: rgba(143, 201, 58, 0.08);
}
.kontakt-form__success .form-note {
  color: var(--ink-text);
  font-size: var(--text-sm);
}
.kontakt-form__error {
  grid-column: 1 / -1;
  padding: var(--space-2);
  border-left: 2px solid var(--signal-warn);
  background: rgba(201, 129, 74, 0.1);
  font-size: var(--text-sm);
}
.kontakt-form .kontakt-form__error { color: var(--ink-text); }