.tx-powermail {
  margin: 0 0 30px;
}

.tx-powermail textarea.form-control {
  resize: none;
}

.tx-powermail p {
  margin:0;
}

.tx-powermail label {
  font-weight: normal;
  font-family: "Laila Bold";
}

/*
 * Die Abschnittsueberschriften des Reservierungsformulars.
 *
 * Sie standen bis zum 2026-09-26 als <h6> im Inhalt und sprangen damit von der
 * dritten auf die sechste Ebene — accesslint meldete es als „heading-order",
 * und Vorleseprogramme gaben die Gliederung falsch wieder. Sie sind jetzt <h4>
 * (Migration 24).
 *
 * Damit die Seite aussieht wie bisher, holt diese Regel das Aussehen der
 * sechsten Ebene zurueck: h4 ist im Sitepackage 24 px, Hausfarbe und
 * 'Laila Bold', h6 dagegen 17 px, grau und 'Laila'. Die Werte sind aus
 * Main/Typography.css uebernommen, einschliesslich der Grenze von 768 px —
 * darunter sind es 15 px.
 *
 * **Nur die Abschnittsueberschriften**, nicht jedes h4 im Ausgabebereich von
 * powermail: sie stehen in Feldern vom Typ „html", und deren Umschlag traegt
 * die Klasse powermail_fieldwrap_type_html. Die erste Fassung dieser Regel
 * zielte auf `.tx-powermail h4` und traf damit auch die Ueberschrift der
 * Danke-Seite („Herzlichen Dank für Ihre Kontaktanfrage!") -- die war danach
 * von einem Absatz nicht mehr zu unterscheiden. Gemeldet am 2026-09-27.
 *
 * Die h4 der Seitenspalte („So finden Sie uns") waren nie betroffen.
 */
.powermail_fieldwrap_type_html h4 {
  font-family: 'Laila', 'Arial', sans-serif;
  font-size: 15px;
  color: #535353;
}

@media only screen and (min-width : 768px) {
  .powermail_fieldwrap_type_html h4 {
    font-size: 17px;
  }
}

body .powermail_fieldwrap_type_textarea textarea {
  height: 150px;
}
input.powermail_captcha {
  display: inline-block;
}

/*
 * Die Rechenaufgabe des Spamschutzes steht seit dem 2026-09-26 als Text in der
 * Beschriftung des Feldes statt als Bild daneben (WCAG 1.1.1, Einzelheiten im
 * Partial Form/Field/Captcha.html). Damit sie sich von der Beschriftung abhebt,
 * traegt sie die Hausfarbe -- gewuenscht vom Auftraggeber am 2026-09-26.
 *
 * Kontrast gegen Weiss 5,3:1, also ueber den 4,5:1 der Stufe AA. Die Farbe ist
 * nicht die einzige Unterscheidung: der Doppelpunkt davor trennt beides auch
 * ohne Farbwahrnehmung (WCAG 1.4.1).
 *
 * Die beiden Regeln fuer .powermail_captchaimage sind mit dem Bild entfallen.
 */
.powermail_captcha_question {
  color: #cc2650;
}

.powermail_fieldwrap_datum input {
  padding-top: 0;
}

.powermail_form_1 .powermail_fieldwrap_type_check,
.powermail_form_2 .powermail_fieldwrap_type_check {
  width: 100%;
}

.powermail_form_1 .powermail_fieldwrap_type_check > label,
.powermail_form_2 .powermail_fieldwrap_type_check > label {
  display: none;
}

.powermail_form_1 .powermail_fieldwrap_type_check .checkbox label,
.powermail_form_2 .powermail_fieldwrap_type_check .checkbox label {
  padding-left: 32px;
  position: relative;
  font-family: "Laila", "Arial", sans-serif;
  line-height: 1.4em;
  font-size: 15px;
}

/* Seit dem Frontend-Umbau ohne ez-checkbox-Umschlag - siehe Base.css. */
.powermail_form_1 .powermail_fieldwrap_type_check .checkbox label .ez-checkbox,
.powermail_form_2 .powermail_fieldwrap_type_check .checkbox label .ez-checkbox,
/* Bezugspunkt fuer das absolut gesetzte Kaestchen. Frueher sass das
   ez-checkbox-Element im <label>, das schon relativ positioniert war. Ohne
   Umschlag ist das Feld ein Geschwister des Labels und braucht seinen
   Bezugspunkt hier - sonst landet es in der Fensterecke. */
.powermail_form_1 .powermail_fieldwrap_type_check .checkbox,
.powermail_form_2 .powermail_fieldwrap_type_check .checkbox {
  position: relative;
}

.powermail_form_1 .powermail_fieldwrap_type_check .checkbox input[type="checkbox"],
.powermail_form_2 .powermail_fieldwrap_type_check .checkbox input[type="checkbox"] {
  position: absolute;
  left:0;
  top:1px;
}

.powermail_form_1 p.small,
.powermail_form_2 p.small {
  font-family: "Laila", "Arial", sans-serif;
  font-size: 15px;
  line-height: 1.4em;
  margin:0 0 12px;
}

.powermail_fieldwrap_straenr {
  clear: both;
}

/* ── Pruefmeldungen im Formular ──────────────────────────────────────────────
 *
 * Diese Regeln standen hier seit 2016 unter den Klassennamen von Parsley
 * (.parsley-errors-list, .parsley-error). Parsley liefert powermail seit
 * Version 4 nicht mehr mit - seitdem griff keine einzige davon, und die
 * Meldungen erschienen im Fliesstext-Grau (gemessen: rgb(83, 83, 83)).
 * Vom Auftraggeber gemeldet: "nicht auffaellig genug".
 *
 * powermails eigene Pruefung heisst die Dinge heute anders:
 *   .powermail-errors-list   die <ul> unter dem Feld (mit .filled, wenn belegt)
 *   .powermail_field_error   das Feld selbst
 *   .powermail_message_error der Sammelhinweis oben im Formular (Serverseite)
 *
 * Die Werte sind an der laufenden 7.6-Installation gemessen (2026-09-25,
 * Probe-Element im DOM, ohne das Formular abzusenden): rgb(255, 0, 0),
 * Schriftschnitt 700, 17 px, Liste 6 px Abstand nach oben und 25 px Einzug.
 *
 * Der Rahmen des Feldes bleibt grau. Live ist er es auch (rgb(204, 204, 204)),
 * obwohl die alte Regel Rot vorsah.
 *
 * Zwei bewusste Abweichungen vom 7.6-Stand, beide am 2026-09-25 vom
 * Auftraggeber gewuenscht:
 *
 * 1. Die Farbe ist nicht mehr das reine Rot der 7.6-Fassung (rgb(255, 0, 0)),
 *    sondern die Hausfarbe #cc2650 - dieselbe, die die Ueberschriften tragen.
 *
 * 2. Das Aufzaehlungszeichen sitzt buendig auf der linken Kante des Feldes.
 *    Die 7.6-Fassung hatte dafuer eine eigene Regel unter dem Parsley-Namen,
 *    die beim Umbenennen der Klassen verlorenging. Ohne sie greift die
 *    allgemeine Listenregel aus Typography.css (ul li:before) mit
 *    margin-left: -34px und 22 px Schriftgroesse, und das Blatt haengt 9 px
 *    links ueber die Feldkante hinaus. Gemessen am 2026-09-25 gegen die
 *    laufende 7.6-Installation: dort steht das Zeichen bei -25px und 12 px
 *    genau auf der Kante (Versatz 0), hier vorher bei -9.
 */
ul.powermail-errors-list {
  display: block;
  margin-top: 6px;
  padding-left: 25px;
}

ul.powermail-errors-list li {
  color: #cc2650;
  font-weight: bold;
  position: relative;
}

/* Das Blatt aus Typography.css auf die Feldkante zurueckholen: absolut
   positioniert und um den Einzug der Liste nach links versetzt, damit es
   unabhaengig von seiner eigenen Breite immer dort steht. */
ul.powermail-errors-list li:before {
  color: #cc2650;
  position: absolute;
  top: -1px;
  margin: 0 0 0 -25px;
  font-size: 12px;
  transform: rotate(0);
}

/* Der Sammelhinweis oben im Formular kommt von der Serverseite (FormError.html)
   und traegt keine der Listenklassen. */
.tx-powermail .powermail_message_error,
.tx-powermail .powermail_message_error a {
  color: #cc2650;
}

.tx-powermail .powermail_message_error a {
  text-decoration: underline;
}

/* Beschriftung der Einwilligungs-Checkbox in der Hausfarbe, wenn der Haken
   fehlt - wie in der 7.6-Fassung, nur ueber den heutigen Klassennamen. Das
   Kaestchen ist ein Geschwister des Labels, deshalb :has() am Umschlag. */
.powermail_form_1 .powermail_fieldwrap_type_check .checkbox:has(.powermail_field_error) label,
.powermail_form_2 .powermail_fieldwrap_type_check .checkbox:has(.powermail_field_error) label {
  color: #cc2650;
}

/* Medium Devices, Desktops */
/*
 * Nur das Captcha wird gedeckelt, nicht die Auswahlfelder.
 *
 * Die 7.6-Fassung dieser Regel nannte beide. Sie traf dort aber nie ein
 * Auswahlfeld: die damalige eigene Select.html des Sitepackages schrieb an den
 * Umschlag die Klasse powermail_fieldwrap_type_input - offenbar aus der
 * Input.html uebernommen. Der Selektor .powermail_fieldwrap_type_select griff
 * deshalb ins Leere, und die Auswahlfelder standen so breit wie ihre Spalte.
 *
 * powermail 14 schreibt die Klasse richtig. Damit griff die Regel zum ersten
 * Mal, und die Auswahlfelder schrumpften auf 44 % - beim Reservierungsformular
 * von 720 auf 317 px neben 720 px breiten Textfeldern. Vom Auftraggeber
 * gemeldet am 2026-09-25.
 *
 * Gemessen an demselben Feld in beiden Staenden (1400 px, Feld "Uhrzeit"):
 * live max-width none, hier vorher 44 %.
 *
 * Am Captcha greift die Regel in beiden Staenden (live 330 px) - die bleibt.
 */
@media only screen and (min-width : 992px) {
  input.powermail_captcha {
    max-width: 44%;
  }
}
/*
 * Feldbreiten im Formular.
 *
 * powermail haengt an jeden Feldumschlag die Klassen aus der Konstanten
 * fieldAndLabelWrappingClasses und aus dem Feld "css" des Datensatzes - hier
 * also "form-group col-md-6" und bei breiten Feldern zusaetzlich "col-md-12".
 *
 * Bootstrap 3 liess col-* floaten; zwei halbe Felder standen deshalb von selbst
 * nebeneinander. Bootstrap 5 setzt dafuer einen Flex-Container voraus, und
 * powermail gibt dem Formular keine row-Klasse. Ohne die folgende Regel stand
 * jedes Feld auf einer eigenen Zeile, und die Reservierungsseite war 306 px zu
 * hoch. Gemessen am 2026-09-25 gegen die laufende 7.6-Installation.
 *
 * Der Flex-Container ist das fieldset, nicht das Formular: seit
 * numberOfColumns = 0 (siehe Constants/350-Ext-Powermail) liegen die
 * Feldumschlaege unmittelbar darin.
 *
 * Mit den Innen- und negativen Aussenabstaenden von Bootstraps .row, denn
 * genau die tragen den Abstand zwischen zwei nebeneinanderstehenden Feldern.
 *
 * Sie fehlten bis zum 2026-09-25, weil eine fruehere Messung die *Umschlaege*
 * mit den *Feldern* verwechselt hatte: live ist der Umschlag bei 375 px
 * tatsaechlich 375 px breit, das Eingabefeld darin aber nur 345 px - der Rest
 * sind seine 15 px Innenabstand je Seite. Ohne sie standen Datum und Uhrzeit
 * bei 1400 px unmittelbar aneinander (gemessen: 0 px Abstand, live 30 px).
 * Vom Auftraggeber gemeldet.
 *
 * Der negative Aussenabstand am fieldset gleicht den Innenabstand der
 * Umschlaege wieder aus. Die aeusseren Kanten bleiben damit, wo sie waren -
 * nachgemessen bei 375, 768, 992 und 1400 px.
 */
.tx-powermail .powermail_fieldset {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

/*
 * Was Bootstraps .row seinen Kindern mitgibt. Ohne diese Regel schrumpfen die
 * Felder unterhalb von 768 px auf ihre Inhaltsbreite (gemessen: 300, 256, 236
 * statt 375 px), weil dort keine col-Klasse greift und ein Flex-Element sonst
 * nach Inhalt bemessen wird. Die Innenabstaende sind das halbe Gutter, das die
 * negativen Aussenabstaende am fieldset wieder ausgleichen.
 */
.tx-powermail .powermail_fieldset > .powermail_fieldwrap {
    flex-shrink: 0;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

/*
 * Die Vollbreite gilt nur unterhalb des Umschaltpunkts. Stuende sie ohne
 * Media-Query hier, wuerde sie col-md-6 ueberschreiben: drei Klassen im
 * Selektor schlagen die eine von .col-md-6. Bootstrap loest das mit .row > *,
 * also einer Klasse und dem Universalselektor - dieselbe Spezifitaet wie die
 * col-Klassen, sodass die spaeter definierte gewinnt. Nachgestellt am
 * 2026-09-25: ohne die Media-Query war jedes Feld wieder vollbreit.
 */
@media (max-width: 767.98px) {
    .tx-powermail .powermail_fieldset > .powermail_fieldwrap {
        width: 100%;
    }
}

/*
 * Vollbreite Felder.
 *
 * powermail haengt zuerst die Klasse aus dem Feld "css" des Datensatzes an und
 * danach die Vorgabe aus der Konstanten fieldAndLabelWrappingClasses. Ein
 * vollbreites Feld traegt deshalb beides: "col-md-12 form-group col-md-6".
 * Welche der beiden Spaltenklassen gilt, entscheidet nicht die Reihenfolge im
 * Attribut, sondern die im Stylesheet - und dort steht col-md-12 hinter
 * col-md-6, es gewinnt also ohnehin.
 *
 * Diese Regel schreibt das ausdruecklich hin, statt sich auf die Reihenfolge in
 * Bootstrap zu verlassen. Sie aendert nichts am heutigen Bild; sie haelt es
 * fest, falls die Reihenfolge sich einmal verschiebt.
 *
 * Die Zuordnung, welches Feld vollbreit ist, steht in der Spalte "css" der
 * Tabelle tx_powermail_domain_model_field und ist 1:1 die der laufenden
 * 7.6-Installation. Wiederherstellbar mit
 * einer eigenen Migration.
 */
@media (min-width: 768px) {
    .tx-powermail .powermail_fieldwrap.col-md-12.col-md-6 {
        flex: 0 0 auto;
        width: 100%;
    }
}

/*
 * Ueberschrift des Formulars: Groesse und Farbe wie im 7.6-Stand.
 *
 * powermail zeichnet den Formulartitel in seinem eigenen Form.html als <h3>.
 * Das abgeloeste Sitepackage-Template der 7.6-Zeit benutzte dafuer ein <h4>,
 * und im Entwurf dieser Seite sind das zwei verschiedene Dinge: h4 ist 24 px
 * und traegt die Hausfarbe #cc2650, h3 ist 28 px und grau.
 *
 * Die Auszeichnung bleibt trotzdem <h3>. Der 7.6-Stand sprang von <h2> direkt
 * auf <h4> und verletzte damit die Ueberschriftsfolge; powermail macht es
 * heute richtig. Angeglichen wird deshalb nur das Aussehen.
 *
 * Gemessen an demselben Element in beiden Staenden: 7.6 rgb(204, 38, 80),
 * 24px, Zeilenhoehe 36px, Aussenabstand 9.6px; hier vorher rgb(83, 83, 83),
 * 28px, 33.6px, 11.2px.
 */
.tx-powermail .powermail_form > h3 {
    font-size: 24px;
    line-height: 36px;
    color: #cc2650;
    margin-top: 9.6px;
    margin-bottom: 9.6px;
}

/*
 * Titel der Formularseite bleibt fuer Screenreader, verschwindet fuers Auge.
 *
 * Das Sitepackage-Template der 7.6-Zeit hatte die <legend> auskommentiert, das
 * heutige Page.html von powermail gibt sie aus - auf der Reservierungsseite
 * stand dadurch "Wann moechten Sie uns besuchen?" doppelt, einmal als grosse
 * Ueberschrift ueber dem Formular und einmal als Zwischentext darin.
 *
 * Statt sie wie damals ganz zu unterdruecken (powermail kennt dafuer den Wert
 * "nolabel" in der Spalte css des Seiten-Datensatzes), bleibt sie im Quelltext
 * stehen und wird nur optisch ausgeblendet: eine <fieldset> ohne <legend> ist
 * fuer Screenreader eine Gruppe ohne Namen. Dieselbe Technik wie Bootstraps
 * .visually-hidden.
 * Angelegt beim Abnahmelauf am 2026-09-25.
 */
.tx-powermail .powermail_legend {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}