/* =====================================================================
   Fluent Forms an das Corporate Design "Achse" angleichen

   Das Plugin bringt eigene Gestaltung mit, und drei Dinge davon stehen im
   Widerspruch zum CD oder sind schlicht ein Zugaenglichkeitsfehler. Der
   Inspektor hat alle drei gemeldet, nachdem das Formular auf /kontakt/
   stand.

   Warum eine eigene Datei und nicht tokens.css: Das CD gilt fuer die
   ganze Seite, das hier gilt nur, wo ein Formular steht. Und tokens.css
   ist die Datei, an der sich alle anderen orientieren; Fremdgestaltung
   einzufangen ist nicht ihre Aufgabe.

   Geladen wird sie vom Loader, aber nur wenn Fluent Forms aktiv ist.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Der Fokusumriss, und warum das ein Fehler war und keine Warnung

   Fluent Forms setzt in .ff-default .ff-el-form-control:focus und
   .ff-default .ff_btn_style:focus den Umriss auf none, ohne einen Ersatz
   zu definieren. Wer mit der Tastatur navigiert, sieht dann nicht mehr,
   in welchem Feld er steht. Bei einem Formular ist das der schlimmste
   Ort dafuer: Man fuellt blind aus.

   Das CD hat ab tokens.css Zeile 1527 bereits eine saubere Regel. Sie
   wird hier nur zurueckgeholt, nicht neu erfunden, und mit derselben
   Spezifitaet wie die Regel des Plugins, damit sie gewinnt.
   --------------------------------------------------------------------- */

.ff-default .ff-el-form-control:focus,
.ff-default .ff-el-form-control:focus-visible,
.ff-default .ff_btn_style:focus,
.ff-default .ff_btn_style:focus-visible,
.fluentform .ff-btn-submit:focus,
.fluentform .ff-btn-submit:focus-visible,
.fcal-widget :focus-visible,
.fluent_booking_wrapper :focus-visible {
  /* !important ist hier kein Notbehelf, sondern der Zweck: Das Plugin
     setzt outline:none in seinem eigenen Stylesheet, und das laedt je
     nach Seite vor oder nach diesem hier. Ohne !important haengt die
     Sichtbarkeit des Fokus an der Ladereihenfolge, und das ist bei
     einer Zugaenglichkeitsregel keine tragfaehige Grundlage. */
  outline: 2px solid var(--phi-accent) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------
   2. Farben und Eckradius

   Das Plugin liefert #606266 fuer Text und #DADBDD fuer Rahmen, dazu
   einen Radius von 7px. Das CD kennt genau einen Radius, und die beiden
   Grauwerte stehen nicht in der Palette. Einzeln faellt das kaum auf, in
   Summe sieht ein Formular dann aus wie eingeklebt.
   --------------------------------------------------------------------- */

.fluentform .ff-el-form-control {
  border-radius: var(--phi-radius);
  border: 1px solid var(--phi-line);
  color: var(--phi-ink);
  background: var(--phi-n-0);
  font-family: var(--phi-font-body);
  font-size: 1rem;              /* nie unter 16px: iOS zoomt sonst beim
                                   Hineintippen in das Feld hinein */
  padding: 0.625rem 0.75rem;
}

.fluentform .ff-el-form-control::placeholder {
  color: var(--phi-n-400);
}

.fluentform .ff-el-input--label label {
  font-family: var(--phi-font-body);
  color: var(--phi-ink);
  font-weight: 600;
}

/* Der Stern am Pflichtfeld darf nicht die einzige Kennzeichnung sein,
   aber als zusaetzliches Signal ist er richtig. */
.fluentform .ff-el-is-required.asterisk-right label:after {
  color: var(--phi-danger);
}

.fluentform .ff-el-input--content .ff-el-help-message {
  color: var(--phi-n-500);
  font-size: 0.875rem;
}

/* ---------------------------------------------------------------------
   3. Zielgroesse der Schaltflaechen

   WCAG 2.5.5 nennt 44 mal 44 Pixel, Apple ebenso, Android 48. Der
   Auslieferungszustand liegt darunter.
   --------------------------------------------------------------------- */

.fluentform .ff-btn-submit {
  min-height: 44px;
  border-radius: var(--phi-radius);
  background: var(--phi-accent);
  color: var(--phi-bg);
  font-family: var(--phi-font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.75rem 1.5rem;
  border: 0;
  transition: background var(--phi-ease);
}

.fluentform .ff-btn-submit:hover {
  background: var(--phi-accent-dark);
}

/* ---------------------------------------------------------------------
   4. Fehlermeldungen

   Farbe allein darf einen Fehler nicht anzeigen (WCAG 1.4.1). Das
   Plugin faerbt nur; hier kommt ein Rahmen dazu, damit der Hinweis auch
   ohne Farbwahrnehmung ankommt.
   --------------------------------------------------------------------- */

.fluentform .error.text-danger {
  color: var(--phi-danger);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.fluentform .ff-el-is-error .ff-el-form-control {
  border-color: var(--phi-danger);
  border-left-width: 3px;
}

/* ---------------------------------------------------------------------
   5. Abstaende und Breite

   Ein Formular, das ueber die volle Textbreite laeuft, ist muehsam zu
   lesen. Die Feldbreite folgt dem Lesemass des CD.
   --------------------------------------------------------------------- */

.fluentform {
  max-width: var(--phi-measure);
}

.fluentform .ff-el-group {
  margin-bottom: var(--phi-s-4, 1rem);
}

.phi-formular {
  margin-top: var(--phi-s-4, 1rem);
}

/* Der Datenschutzhinweis unter dem Formular ist Beiwerk, kein Fliesstext. */
.phi-formhinweis {
  font-size: 0.875rem;
  color: var(--phi-n-500);
  margin-top: var(--phi-s-3, 0.75rem);
}

.phi-formhinweis a {
  color: inherit;
  text-decoration: underline;
}

/* Auf schmalen Geraeten nimmt das Formular die volle Breite. */
@media (max-width: 599px) {
  .fluentform { max-width: none; }
}


/* ---------------------------------------------------------------------
   6. Der Buchungskalender

   FluentBooking bringt dieselbe Fremdgestaltung mit wie Fluent Forms,
   nur unter anderen Klassen. Radius und Rahmenfarbe werden hier
   nachgezogen, damit auf der Kontaktseite nicht zwei Formsprachen
   nebeneinander stehen.
   --------------------------------------------------------------------- */

.fluent_booking_wrapper input,
.fluent_booking_wrapper select,
.fluent_booking_wrapper textarea,
.fluent_booking_wrapper button,
.fcal-widget input,
.fcal-widget select,
.fcal-widget button {
  border-radius: var(--phi-radius) !important;
  font-family: var(--phi-font-body);
}

.fluent_booking_wrapper button,
.fcal-widget button {
  min-height: 44px;
}

/* ---------------------------------------------------------------------
   7. Der Hinweis auf die eigene Preisvorstellung

   Er steht klein unter jedem Paketpreis und fuehrt zum Formular
   "Preisvorstellung" (Fluent Forms ID 5). Deshalb steht er hier und
   nicht in tokens.css: Er gehoert zum Formular, nicht zum Grundraster.

   Drei Dinge muss er gleichzeitig leisten, und sie ziehen in
   verschiedene Richtungen.

   KLEIN, ABER NICHT ZU KLEIN. Der Nutzer wollte ihn "in klein unterm
   Preis". 0,875rem sind 14px und damit die CD-Stufe "Small", eine
   Schreibtischskala. Auf dem Telefon ist 16px die Untergrenze fuer
   alles, was gelesen werden soll (Regel M3.1 des Inspektors), und
   gelesen werden soll er. Unter 780px geht er deshalb auf 1rem hoch,
   genau wie .phi-small in tokens.css Zeile 2601. Ein Hinweis, den
   niemand lesen kann, ist keiner.

   ABGESETZT VOM PREIS. Er steht direkt unter der Zeile "zzgl.
   gesetzlicher Umsatzsteuer", die ebenfalls klein ist. Ohne Trennung
   verschwimmen beide zu einem Absatz Kleingedrucktem, und der Preis
   bekommt einen Rattenschwanz. Die Haarlinie darueber ist dieselbe wie
   im .phi-rule der Karte, also kein neues Gestaltungsmittel.

   LESBAR. n-600 auf Weiss ergibt 9,9:1, auf dem Band 8,8:1. Der Text
   ist damit besser lesbar als der Grauwert n-500, den die
   Bildunterschriften tragen. Das ist Absicht: Wer den Preis zu hoch
   findet, soll den Ausweg nicht suchen muessen.
   --------------------------------------------------------------------- */

.phi-preishinweis {
  margin-top: var(--phi-s-4, 1rem);
  padding-top: var(--phi-s-3, 0.75rem);
  border-top: 1px solid var(--phi-n-200);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--phi-n-600);
  /* p erbt aus tokens.css ein max-width vom Lesemass. In der schmalen
     Kartenspalte ist das wirkungslos, in der breiten Faktenliste
     wuerde es den Hinweis auf 68 Zeichen einschnueren, waehrend der
     Preis daneben ueber die volle Breite laeuft. */
  max-width: none;
}

/* In der Faktenliste steht der Hinweis in derselben Zelle wie der
   Preis. Dort trennen schon die Zeilenlinien der Liste, eine zweite
   Linie waere eine zu viel. Stattdessen mehr Luft: Auf dem Telefon
   stehen Preiszeile und Hinweis fast im selben Grad, und ohne den
   Abstand liest sich beides als ein Absatz. */
.phi-facts__row .phi-preishinweis {
  border-top: 0;
  padding-top: 0;
  margin-top: var(--phi-s-3, 0.75rem);
}

/* Der Verweis traegt die Akzentfarbe der Sparte, also Tiefteal im
   Engineering und Verkehrsrot im Transport. Das kommt aus tokens.css
   und ist hier absichtlich nicht ueberschrieben: Ein Verweis, der wie
   Fliesstext aussieht, wird nicht gefunden, und genau gefunden werden
   soll dieser. Nur der Abstand der Unterlaenge zur Linie wird
   nachgezogen, damit die Unterstreichung nicht durch das "g" von
   "Preisvorstellung" schneidet. */
.phi-preishinweis a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.phi-preishinweis a:hover {
  color: var(--phi-accent-dark);
}

@media (max-width: 780px) {
  .phi-preishinweis { font-size: 1rem; }
}

/* ---------------------------------------------------------------------
   8. Zwei Messwerte, die erst auffielen, als ein Formular auf einer
      Paketseite stand

   Beide gelten fuer jedes Formular auf dieser Website, nicht nur fuer
   das neue. Sie stehen deshalb hier und nicht bei Abschnitt 7.

   A6.5 · Die Eingabefelder sind 43 Pixel hoch. WCAG 2.5.5 und Apple
   nennen 44 als Zielgroesse, Android 48. Ein Pixel klingt nach nichts,
   ist aber genau die Art Fund, die man einmal behebt und danach nie
   wieder sieht: 0,625rem Innenabstand oben und unten plus Rahmen plus
   Zeilenhoehe ergeben 43. Die Absendeschaltflaeche hat ihre 44 seit
   Abschnitt 3, die Felder daneben hatten sie nicht.

   M3.1 · Der Datenschutzhinweis und die Hilfstexte unter den Feldern
   stehen bei 14 Pixeln. Am Schreibtisch ist das die CD-Stufe "Small"
   und richtig. Auf dem Telefon sind 16 Pixel die Untergrenze fuer
   alles, was gelesen werden soll, und ein Datenschutzhinweis ist genau
   das: Er ist die einzige Stelle, an der steht, was mit den Angaben
   geschieht. tokens.css macht diesen Sprung ab Zeile 2601 fuer
   .phi-small bereits, hier fehlte er.

   Gemessen auf /engineering/leistungen/, vorher auch auf /kontakt/
   gemeldet und dort bis heute offen.
   --------------------------------------------------------------------- */

.fluentform .ff-el-form-control {
  min-height: 44px;
}

@media (max-width: 780px) {
  .phi-formhinweis,
  .fluentform .ff-el-input--content .ff-el-help-message {
    font-size: 1rem;
  }
}