/* ---------------------------------------------------------------------------
   Produktseite Kalender.

   Handgeschrieben, nicht vom Seitenbaukasten erzeugt. Die Vorlage waere
   umfragen-erstellen.css gewesen, deren Kopf aber auf ein hochformatiges Bild
   in einer halben Spalte ausgelegt ist. Das Hauptbild ist hier ein
   Monatsraster mit sieben Spalten und braucht die volle Blattbreite -- unter
   etwa 900 Pixeln ist es nicht mehr zu lesen, und Lesen ist der Zweck.

   css-include.cfm zieht diese Datei ueber den Dateinamen der Vorlage
   (kalender.cfm -> kalender.css). Der Name ist damit Teil der Verdrahtung.
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   Abschnitt 1 -- Kopf: Text ueber dem Bild, beides mittig.
   --------------------------------------------------------------------------- */

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

.u-section-1 .cal-hero-intro {
  max-width: 760px;
  margin: 80px auto 0;
  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;
}

/* auto statt 0 an den Seiten: .u-btn ist display:table (styles.css:1030) und
   damit block-artig. Das text-align:center des Elternelements zentriert
   deshalb nur die Beschriftung im Knopf, nicht den Knopf in der Spalte. */
.u-section-1 .u-btn-1 {
  background-image: none;
  margin: 30px auto 0;
}

/* Der Schatten ersetzt den Rahmen: der Screenshot ist oben und links weiss
   und liefe sonst in den dunklen Grund der Sektion aus. */
.u-section-1 .cal-hero-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1140px;
  margin: 50px auto 70px;
  border-radius: 16px;
  box-shadow: 5px 5px 25px 0 rgba(0, 0, 0, 0.35);
  --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;
}

@media (max-width: 991px) {
  .u-section-1 .cal-hero-intro {
    margin-top: 50px;
  }

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

  .u-section-1 .cal-hero-image {
    margin: 40px auto 50px;
  }
}

@media (max-width: 767px) {
  .u-section-1 .u-text-1 {
    font-size: 1.875rem;
  }

  /* Unter dieser Breite ist das Raster ohnehin nur noch Form, kein Inhalt.
     Es bleibt trotzdem stehen: es zeigt, dass hier ein Kalender wartet, und
     das ist auf dem Handy die ganze Aufgabe des Bildes. */
  .u-section-1 .cal-hero-image {
    margin: 30px auto 40px;
    border-radius: 12px;
  }
}


/* ---------------------------------------------------------------------------
   Abschnitt 2 -- drei Karten.

   Kein Bild: das Monatsraster steht schon im Kopf. Die farbigen Punkte sind
   dieselben Zeichen wie in der Legende unter dem Raster, in denselben Farben
   wie in der Anwendung -- wer das Bild oben angesehen hat, findet sie wieder.
   --------------------------------------------------------------------------- */

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

.u-section-2 .u-text-1 {
  width: 800px;
  line-height: 1.2;
  margin: 60px auto 0;
}

.u-section-2 .u-text-2 {
  width: 720px;
  margin: 20px auto 0;
}

.u-section-2 .cal-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 50px 0 80px;
  text-align: left;
}

.u-section-2 .cal-fact {
  padding: 28px;
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 3px 3px 15px 0 rgba(0, 0, 0, 0.12);
  --animation-custom_in-translate_x: 0px;
  --animation-custom_in-translate_y: 30px;
  --animation-custom_in-opacity: 0;
  --animation-custom_in-rotate: 0deg;
  --animation-custom_in-scale: 1;
}

.u-section-2 .cal-fact-dot {
  display: block;
  width: 12px;
  height: 12px;
  margin-bottom: 16px;
}

.u-section-2 .cal-fact-dot--task {
  border-radius: 50%;
  background-color: #352791;
}

/* Quadratisch, nicht rund: in der Anwendung unterscheidet genau die Form den
   Termin von der Aufgabe, nicht nur die Farbe. Wer nur die Farbe uebernimmt,
   verliert den Unterschied fuer jeden, der sie nicht auseinanderhaelt. */
.u-section-2 .cal-fact-dot--appointment {
  background-color: #f0a202;
}

.u-section-2 .cal-fact-dot--planned {
  border-radius: 50%;
  border: 2px solid #7361e6;
  background-color: transparent;
}

.u-section-2 .cal-fact-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 12px;
}

.u-section-2 .cal-fact-text {
  margin: 0;
  font-size: 1rem;
}

@media (max-width: 991px) {
  .u-section-2 .u-text-1,
  .u-section-2 .u-text-2 {
    width: auto;
  }

  .u-section-2 .cal-facts {
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 40px 0 50px;
  }
}

@media (max-width: 767px) {
  .u-section-2 .u-text-1 {
    margin-top: 40px;
  }

  .u-section-2 .cal-fact-title {
    font-size: 1.125rem;
  }
}


/* ---------------------------------------------------------------------------
   Abschnitt 3 -- Zu- und Absage.

   Hochformatiges Bild, darum eine schmale Spalte: 38 Prozent von 1140 sind
   rund 430 Pixel, und der Termin-Dialog ist dort gut zu lesen. Breiter
   gestellt wuerde er zum Plakat und der Text daneben zur Randnotiz.
   --------------------------------------------------------------------------- */

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

.u-section-3 .cal-feature {
  display: grid;
  grid-template-columns: 38% 1fr;
  align-items: center;
  gap: 50px;
  margin: 70px 0;
}

.u-section-3 .cal-feature-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.2);
}

.u-section-3 .cal-feature-title {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 20px;
}

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

/* Zwei Zeilen, kein Fliesstext: es sind zwei Entscheidungen, die man nicht
   erwartet. Im Absatz mitgelesen wuerde keine davon haengenbleiben. */
.u-section-3 .cal-feature-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.u-section-3 .cal-feature-list li {
  position: relative;
  margin-top: 14px;
  padding-left: 26px;
  font-size: 0.9375rem;
}

.u-section-3 .cal-feature-list li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #7361e6;
}

@media (max-width: 991px) {
  .u-section-3 .cal-feature {
    grid-template-columns: 1fr;
    gap: 28px;
    margin: 50px 0;
  }

  /* Gestapelt bekommt das Hochformat sonst die volle Blattbreite und schiebt
     den Text zwei Bildschirme nach unten. */
  .u-section-3 .cal-feature-image {
    max-width: 380px;
    margin: 0 auto;
  }

  .u-section-3 .cal-feature-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 767px) {
  .u-section-3 .cal-feature {
    margin: 40px 0;
  }

  .u-section-3 .cal-feature-title {
    font-size: 1.3125rem;
  }
}


/* ---------------------------------------------------------------------------
   Abschnitt 4 -- die beiden Bruecken.
   --------------------------------------------------------------------------- */

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

.u-section-4 .cal-bridges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin: 70px 0;
  text-align: left;
}

.u-section-4 .cal-bridge {
  --animation-custom_in-translate_x: 0px;
  --animation-custom_in-translate_y: 30px;
  --animation-custom_in-opacity: 0;
  --animation-custom_in-rotate: 0deg;
  --animation-custom_in-scale: 1;
}

.u-section-4 .cal-bridge-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 16px;
}

.u-section-4 .cal-bridge-text {
  margin: 0;
  font-size: 1rem;
}

.u-section-4 .cal-bridge-link {
  display: inline-block;
  margin-top: 16px;
  font-weight: 700;
  text-decoration: underline;
}

@media (max-width: 991px) {
  .u-section-4 .cal-bridges {
    grid-template-columns: 1fr;
    gap: 36px;
    margin: 50px 0;
  }
}

@media (max-width: 767px) {
  .u-section-4 .cal-bridges {
    margin: 40px 0;
  }

  .u-section-4 .cal-bridge-title {
    font-size: 1.3125rem;
  }
}


/* ---------------------------------------------------------------------------
   Abschnitte 5 und 6 -- Aufruf und Fragen.

   Beide sind bis auf die Nummer dieselben wie auf der Umfragen-Seite. Die
   Regeln stehen dort unter .u-section-4 und .u-section-5; hier sind sie
   uebernommen, weil eine Sektion mehr davor liegt.
   --------------------------------------------------------------------------- */

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

.u-section-5 .u-layout-wrap-1 {
  margin: 60px 0;
}

.u-section-5 .u-layout-cell-1 {
  min-height: 180px;
}

.u-section-5 .u-container-layout-1 {
  padding: 30px;
}

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

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

.u-section-5 .u-layout-cell-2 {
  min-height: 180px;
}

.u-section-5 .u-container-layout-2 {
  padding: 30px;
}

.u-section-5 .u-btn-1 {
  background-image: none;
  margin: 40px auto 0;
}

@media (max-width: 991px) {
  .u-section-5 .u-layout-wrap-1 {
    margin: 40px 0;
  }

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

  .u-section-5 .u-btn-1 {
    margin-top: 20px;
  }
}

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

.u-section-6 .u-text-1 {
  width: 800px;
  margin: 60px auto 0;
}

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

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

/* DAS SYMBOL BRAUCHT EINE GROESSE, sonst laeuft es auf die volle Breite der
   Zeile und das Aufklappelement wird zu einem Quadrat mit einem Riesenplus.
   Der Baukasten schreibt diese vier Regeln fuenfmal hintereinander, einmal je
   Element; hier stehen sie als eine Gruppe, weil sie ohnehin fuenfmal
   dasselbe sagen und die Datei von Hand geschrieben ist. */
.u-section-6 .u-icon-1,
.u-section-6 .u-icon-2,
.u-section-6 .u-icon-3,
.u-section-6 .u-icon-4,
.u-section-6 .u-icon-5 {
  height: 17px;
  width: 17px;
}

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

/* min-height statt einer festen Hoehe: die Antworten sind unterschiedlich
   lang, und im Russischen und Deutschen deutlich laenger als im Englischen. */
.u-section-6 .u-accordion-pane-1,
.u-section-6 .u-accordion-pane-2,
.u-section-6 .u-accordion-pane-3,
.u-section-6 .u-accordion-pane-4,
.u-section-6 .u-accordion-pane-5 {
  min-height: 120px;
  background-image: none;
}

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

@media (max-width: 991px) {
  .u-section-6 .u-text-1,
  .u-section-6 .u-text-2 {
    width: auto;
  }
}

@media (max-width: 767px) {
  .u-section-6 .u-text-1 {
    margin-top: 40px;
  }

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