/* Seitenstile Kontakt — nur was style.css nicht schon kann. */

/* Rechte Spalte im Kontaktabschnitt: was fuer die Besichtigung bereitliegen
   sollte. Steckt im selben Grid wie .kontakt-innen (style.css), braucht aber
   eigene Textfarben — .h3 und .haken sind fuer helle Flaechen gebaut, hier
   steht die Spalte auf dem blauen Anker wie die linke daneben. */
/* Die Bereithalten-Liste stand bis zum 31.08.2026 rechts im blauen Block
   und trug deshalb weisse Schrift. Seit das Formular dort sitzt, steht sie
   auf Sand — weiss auf Sand war unlesbar. Sie laeuft jetzt in den
   normalen Textfarben; die Hakenfarbe bleibt Terrakotta, die traegt auf
   beiden Gruenden. */
.kont-bereit .haken li{ color:var(--ink); }
.kont-bereit .haken li::before{ border-color:var(--akzent); }
.kont-bereit-fuss{
  margin-top:16px;
  font-size:15.5px; line-height:1.65; color:var(--muted);
}

/* Formular-Platzhalter — ein Hinweis fuer Rene, kein Gestaltungselement.
   Bewusst zurueckhaltend: eine schraffierte Flaeche wie bei den
   Bildplatzhaltern waere hier zu laut, das Formular kommt ja, es fehlt nur
   die Vorlagen-ID. Eine schmale linke Kante genuegt als Markierung. */
.formular-platz{
  margin-top:clamp(20px,2.4vw,28px);
  padding:14px 20px;
  background:var(--card);
  border-left:3px solid var(--akzent);
  border-radius:0 4px 4px 0;
}
.formular-platz p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--muted); }
.formular-platz p + p{ margin-top:4px; }


/* Das Formular braucht hier KEINE eigenen Stile.
   style.css deckt Fluent Forms ab Zeile 119 bereits vollstaendig ab:
   Felder, Fokus, Platzhalter, Kapitaelchen-Labels in Terrakotta und den
   Absenden-Knopf als Umriss statt Flaeche, letzteres mit !important.
   Das ist die gewollte Gestaltung der Marke.

   Hier stand kurzzeitig ein zweiter Satz Formularstile, den ich
   geschrieben hatte, ohne vorher in style.css nachzusehen. Er hat gegen
   die bestehende Regel gearbeitet und nichts gewonnen. Wer hier etwas am
   Formular aendern will, aendert es in style.css, nicht ein zweites Mal
   daneben.

   Einzige Ausnahme: die Lesebreite des Formulars. Ohne sie laufen die
   Eingabefelder ueber die volle Bahn und werden unangenehm breit. */
.kont-formular{max-width:760px}


/* ══════════════════════════════════════════════════════════════════
   FORMULAR IM BLAUEN BLOCK
   Das Formular sitzt in der rechten Spalte von .kontakt-innen, also auf
   dem Markenblau. Die Feldstile aus style.css sind fuer helle Flaechen
   gebaut: die Labels stehen dort in var(--ink), und das ist genau dieses
   Blau — auf blauem Grund waeren sie unsichtbar. Deshalb hier, und nur
   hier, die Umkehrung auf Weiss. Die Felder selbst bleiben weiss mit
   dunklem Text, das traegt den Kontrast.
   ══════════════════════════════════════════════════════════════════ */
.kont-formularseite .kont-formular-lead{
  margin:.5rem 0 1.4rem; font-size:1rem; line-height:1.6;
  color:rgba(255,255,255,.82); max-width:46ch;
}
.kont-formularseite .fluentform .ff-el-input--label label{ color:var(--text-d) }
.kont-formularseite .fluentform .ff-el-form-control{
  background:var(--papier); border-color:transparent; color:var(--ink);
}
.kont-formularseite .fluentform .ff-el-form-control:focus{
  border-color:var(--akzent-hell); box-shadow:0 0 0 3px rgba(229,130,85,.28);
}
.kont-formularseite .fluentform .error.text{ color:var(--akzent-hell) }
.kont-formularseite .fluentform .ff-message-success{
  background:rgba(255,255,255,.10); border-left-color:var(--akzent-hell); color:var(--text-d);
}

/* Auf schmalen Geraeten stehen Telefonspalte und Formular ohnehin
   untereinander (.kontakt-innen klappt um); dann braucht das Formular
   oben etwas Luft, sonst klebt es an der Anschrift. */
@media (max-width:900px){
  .kont-formularseite{ margin-top:clamp(1.5rem,4vw,2.5rem) }
}