/* ---------------------------------------------------------------------------
   Support-Seite.

   Handgeschrieben wie kalender.css. css-include.cfm zieht diese Datei ueber
   den Dateinamen der Vorlage (support.cfm -> support.css).

   Die Seite hat keine Bilder. Ihre Form kommt aus zwei Spalten: links das,
   was die Person tut (Formular), rechts das, was ihr dabei hilft (Angaben,
   Adresse). Unter 900 Pixeln stehen die Spalten untereinander.
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   Abschnitt 1 -- Kopf: Titel, ein Satz, die beiden Antwortzeiten.
   --------------------------------------------------------------------------- */

.u-section-1 .u-sheet-1 {
  min-height: 420px;
}

.u-section-1 .sup-hero-intro {
  max-width: 760px;
  margin: 80px auto 70px;
  text-align: center;
  --animation-custom_in-translate_x: 0px;
  --animation-custom_in-translate_y: -40px;
  --animation-custom_in-opacity: 0;
  --animation-custom_in-rotate: 0deg;
  --animation-custom_in-scale: 1;
}

.u-section-1 .u-text-1 {
  font-size: 2.8125rem;
  line-height: 1.15;
  margin: 0;
}

.u-section-1 .u-text-2 {
  margin: 24px 0 0;
}

/* Die Antwortzeiten als zwei Karten nebeneinander: der Plan gross, die Zeit
   darunter. Sie sind das Versprechen der Seite und stehen darum im Kopf. */
.u-section-1 .sup-times {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 32px 0 0;
}

.u-section-1 .sup-time {
  flex: 0 1 280px;
  padding: 18px 24px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  text-align: center;
}

.u-section-1 .sup-time-plan {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.u-section-1 .sup-time-text {
  display: block;
  margin-top: 4px;
  font-size: 0.95rem;
}

/* auto statt 0 an den Seiten: .u-btn ist display:table und damit block-artig;
   text-align:center des Elternelements zentriert sonst nur die Beschriftung. */
.u-section-1 .u-btn-1 {
  background-image: none;
  margin: 32px auto 0;
}


/* ---------------------------------------------------------------------------
   Abschnitt 2 -- Formular links, Hinweise rechts.
   --------------------------------------------------------------------------- */

.u-section-2 .u-sheet-1 {
  padding: 70px 0;
}

.sup-columns {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.u-section-2 .sup-form-col {
  flex: 1 1 60%;
  min-width: 0;
  scroll-margin-top: 100px;
}

.u-section-2 .sup-tips-col {
  flex: 1 1 40%;
  min-width: 0;
  padding: 30px;
  border-radius: 16px;
  background: #f4f6f9;
}

.u-section-2 .u-text-1,
.u-section-2 .u-text-3 {
  font-size: 1.75rem;
  margin: 0;
}

.u-section-2 .u-text-2 {
  margin: 16px 0 28px;
}

/* Formularfelder. styles.css kennt .u-input nur innerhalb von .u-form, und
   .u-form haengt das Baukasten-Skript an einen AJAX-Versand. Darum eigene
   Klassen, ohne Abhaengigkeit von beidem. */
.sup-field {
  margin: 0 0 18px;
}

.sup-field label {
  display: block;
  margin: 0 0 6px;
  font-weight: 600;
  font-size: 0.95rem;
}

.sup-field input,
.sup-field select,
.sup-field textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem;
  color: inherit;
  background: #fff;
  border: 1px solid #c9d1dc;
  border-radius: 8px;
  outline: none;
}

.sup-field input:focus,
.sup-field select:focus,
.sup-field textarea:focus {
  border-color: #1f4e79;
  box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.15);
}

.sup-field textarea {
  min-height: 160px;
  resize: vertical;
}

/* Honeypot: aus dem Sichtbereich geschoben, nicht display:none -- manche
   Bots ueberspringen Felder, die per display:none versteckt sind. */
.sup-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sup-privacy {
  margin: 0 0 20px;
  font-size: 0.875rem;
  opacity: 0.75;
}

.u-section-2 .u-btn-2 {
  background-image: none;
  margin: 0;
}

/* Die Meldung aus getAlert() traegt Bootstrap-Klassen, die es im Frontend
   nicht gibt. Hier nur so viel Stil, dass sie als Meldung zu erkennen ist. */
.sup-alert {
  margin: 0 0 24px;
}

.sup-alert .alert {
  padding: 14px 18px;
  border-radius: 8px;
  border: 1px solid #c9d1dc;
  background: #eef3f8;
}

.sup-alert .alert-success { background: #e6f5ea; border-color: #9fd3ac; }
.sup-alert .alert-warning { background: #fff6e0; border-color: #f0d28a; }
.sup-alert .alert-danger  { background: #fdeaea; border-color: #f0a3a3; }

.sup-alert .alert .d-flex {
  display: flex;
  align-items: flex-start;
}

.sup-alert .alert .btn-close {
  display: none;
}

/* Die Hinweise rechts: Titel fett, Erklaerung darunter, Punkt davor. */
.sup-tips {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.sup-tips li {
  position: relative;
  padding: 0 0 0 26px;
  margin: 0 0 18px;
}

.sup-tips li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1f4e79;
}

.sup-tips strong {
  display: block;
  margin: 0 0 4px;
}

.sup-tips span {
  display: block;
  font-size: 0.95rem;
}

.sup-direct {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid #d9e0e8;
  font-size: 0.95rem;
}

.sup-direct a {
  font-weight: 600;
  text-decoration: underline;
}


/* ---------------------------------------------------------------------------
   Abschnitt 3 -- Haeufige Fragen. Dieselben Regeln wie auf den Produktseiten.
   --------------------------------------------------------------------------- */

.u-section-3 .u-sheet-1 {
  padding: 60px 0 0;
}

.u-section-3 .u-text-1 {
  font-size: 2.25rem;
  margin: 0;
}

.u-section-3 .u-text-2 {
  margin: 16px auto 0;
  max-width: 700px;
}

.u-section-3 .u-accordion-1 {
  margin: 40px 0 70px;
}

/* Das Symbol braucht eine Groesse, sonst laeuft es auf die volle Breite. */
.u-section-3 .u-icon-1,
.u-section-3 .u-icon-2,
.u-section-3 .u-icon-3,
.u-section-3 .u-icon-4,
.u-section-3 .u-icon-5,
.u-section-3 .u-icon-6,
.u-section-3 .u-icon-7,
.u-section-3 .u-icon-8 {
  width: 20px;
  height: 20px;
  margin: 0 0 0 auto;
}

.u-section-3 .u-accordion-link-1,
.u-section-3 .u-accordion-link-2,
.u-section-3 .u-accordion-link-3,
.u-section-3 .u-accordion-link-4,
.u-section-3 .u-accordion-link-5,
.u-section-3 .u-accordion-link-6,
.u-section-3 .u-accordion-link-7,
.u-section-3 .u-accordion-link-8 {
  background-image: none;
  font-weight: 700;
  padding: 25px 30px;
}

.u-section-3 .u-accordion-pane-1,
.u-section-3 .u-accordion-pane-2,
.u-section-3 .u-accordion-pane-3,
.u-section-3 .u-accordion-pane-4,
.u-section-3 .u-accordion-pane-5,
.u-section-3 .u-accordion-pane-6,
.u-section-3 .u-accordion-pane-7,
.u-section-3 .u-accordion-pane-8 {
  min-height: 100px;
  background-image: none;
}

.u-section-3 .u-container-layout-1,
.u-section-3 .u-container-layout-2,
.u-section-3 .u-container-layout-3,
.u-section-3 .u-container-layout-4,
.u-section-3 .u-container-layout-5,
.u-section-3 .u-container-layout-6,
.u-section-3 .u-container-layout-7,
.u-section-3 .u-container-layout-8 {
  padding: 20px 30px;
}


/* ---------------------------------------------------------------------------
   Abschnitt 4 -- Fehler und Wuensche links, weitere Hilfe rechts.
   --------------------------------------------------------------------------- */

.u-section-4 .u-sheet-1 {
  padding: 70px 0;
}

.u-section-4 .sup-more-col {
  flex: 1 1 50%;
  min-width: 0;
}

.u-section-4 .u-text-1,
.u-section-4 .u-text-3 {
  font-size: 1.75rem;
  margin: 0;
}

.u-section-4 .u-text-2,
.u-section-4 .u-text-4 {
  margin: 16px 0 24px;
}

.u-section-4 .u-btn-1 {
  background-image: none;
  margin: 0;
}

.sup-links {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 30px;
}

.sup-links li {
  break-inside: avoid;
  margin: 0 0 10px;
}

.sup-links a {
  text-decoration: underline;
}


/* ---------------------------------------------------------------------------
   Schmale Fenster.
   --------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .sup-columns {
    flex-direction: column;
    gap: 40px;
  }

  .u-section-2 .sup-form-col,
  .u-section-2 .sup-tips-col,
  .u-section-4 .sup-more-col {
    flex-basis: auto;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .u-section-1 .sup-hero-intro {
    margin: 60px auto 50px;
  }

  .u-section-1 .u-text-1 {
    font-size: 2.25rem;
  }

  .u-section-1 .sup-times {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* In der Spalte wird die flex-basis zur Hoehe: 280px hohe Kaesten. */
  .u-section-1 .sup-time {
    flex-basis: auto;
    padding: 14px 20px;
  }

  .u-section-2 .u-sheet-1,
  .u-section-4 .u-sheet-1 {
    padding: 50px 0;
  }

  .u-section-2 .sup-tips-col {
    padding: 24px;
  }

  .u-section-3 .u-accordion-1 {
    margin-bottom: 40px;
  }

  .sup-links {
    columns: 1;
  }
}