/* Bausteine, die im September 2026 dazugekommen sind: Bewertungsanzeige,
   Buchen-Band, mitlaufender Balken, Tagesplan, Überschrift über den vier Kästen. Farben, Kanten und Schriften folgen dem übrigen Theme: Petrol #186881,
   Gold #f8b236, Creme #f5f2ed, Dunkel #25333a, eckige Flächen ohne Rundung,
   Ubuntu im Fließtext, DM Serif Text in den Überschriften.

   Zur Spezifität: Das Theme färbt jeden .e-button-base unter .elementor mit der
   Elementor-Vorgabe ein, das sind zwei Klassen. Die Knöpfe hier tragen deshalb
   das Element im Selektor (a.s-buchband-btn), sonst gewinnt das Blau. */

/* --------------------------------------------------- Bewertungen bei Google */

/* Senkrechte Goldkante statt Kasten: Ein umrandetes weißes Feld gibt es im Theme
   sonst nirgends, deshalb fiel es auf. Note in DM Serif Text wie jede Überschrift,
   die Anzahl als Kicker in Petrol-Versalien wie über jeder Überschrift, der Link
   mit goldenem Unterstrich wie jeder Link im Fließtext. */

.elementor .art-bw {
  display: block;
  border-left: 3px solid #f8b236;
  padding-left: 22px;
  max-width: 470px;
}

.elementor .art-bw-note {
  display: block;
  font-family: "DM Serif Text", Georgia, serif;
  font-weight: 400;
  font-size: 38px;
  line-height: 1;
  color: #25333a;
}

.elementor .art-bw-reihe {
  display: block;
  margin-block: 6px 10px;
}

.elementor .art-bw-sterne {
  color: #f8b236;
  font-size: 18px;
  letter-spacing: 3px;
  line-height: 1;
}

.elementor .art-bw-zahl {
  display: block;
  font-family: Ubuntu, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #186881;
}

/* Der Link traegt im Ruhezustand keine Linie. Das Theme unterstreicht jeden Link
   erst beim Ueberfahren, in Gold mit 3 Pixeln Abstand, und genau so verhaelt sich
   dieser hier jetzt auch. Die Unterstreichung steht explizit hier statt sich auf
   die Theme-Regel zu verlassen: der Baustein laeuft ueber einen Shortcode und kann
   auch ausserhalb des Fliesstextes stehen, wo jene Regel nicht greift. */
.elementor .art-bw-link {
  display: inline-block;
  margin-block-start: 12px;
  font-family: Ubuntu, -apple-system, sans-serif;
  font-size: 14px;
  color: #25333a;
  text-decoration: none;
}

.elementor a.art-bw-link:hover,
.elementor a.art-bw-link:focus-visible {
  color: #186881;
  text-decoration: underline 2px #f8b236;
  text-underline-offset: 3px;
}

/* Kleine Fassung, etwa neben einem Knopf. */
.elementor .art-bw.is-klein { padding-left: 16px; max-width: 360px; }
.elementor .art-bw.is-klein .art-bw-note { font-size: 26px; }
.elementor .art-bw.is-klein .art-bw-sterne { font-size: 15px; letter-spacing: 2px; }
.elementor .art-bw.is-klein .art-bw-zahl { font-size: 12px; letter-spacing: 2px; }
.elementor .art-bw.is-klein .art-bw-link { font-size: 13px; margin-block-start: 10px; }

/* Einzeilig im Fließtext. */
.elementor .art-bw-zeile {
  display: inline;
  font-family: Ubuntu, -apple-system, sans-serif;
  font-size: 18px;
  color: #25333a;
}

.elementor .art-bw-zeile .art-bw-sterne { margin-right: 10px; }

/* Auf dunklem Grund dreht sich der Kontrast. */
.is-dark .art-bw-note,
.s-faq .art-bw-note { color: #ffffff; }

.is-dark .art-bw-zahl,
.s-faq .art-bw-zahl { color: #f8b236; }

.is-dark .art-bw-link,
.s-faq .art-bw-link { color: #f5f2ed; }

.is-dark .art-bw-link:hover,
.s-faq .art-bw-link:hover { color: #f8b236; text-decoration: underline 2px #f8b236; text-underline-offset: 3px; }

.is-dark .art-bw-zeile,
.s-faq .art-bw-zeile { color: #f5f2ed; }

@media (max-width: 767px) {
  .elementor .art-bw-note { font-size: 32px; }
  .elementor .art-bw { padding-left: 18px; }
}

/* ------------------------------------------------------------- Buchen-Band */

/* Ein schmales Band quer über die Seite: links ein Satz, rechts der Knopf.
   Es führt auf denselben Anker wie jeder andere Buchen-Knopf der Seite. */
.s-buchband {
  background: #25333a;
  color: #f5f2ed;
}

.s-buchband-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 26px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.s-buchband-text { flex: 1 1 420px; }

.s-buchband-headline {
  font-family: "DM Serif Text", Georgia, serif;
  font-size: 24px;
  line-height: 1.2;
  color: #ffffff;
  margin: 0 0 4px;
}

.s-buchband-sub {
  font-family: Ubuntu, -apple-system, sans-serif;
  font-size: 16px;
  color: #d8dee1;
  margin: 0;
}

.s-buchband a.s-buchband-btn {
  display: inline-block;
  background: #f8b236;
  color: #25333a;
  font-family: Ubuntu, -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1;
  padding: 16px 28px;
  border-radius: 0;
  text-decoration: none;
  flex: 0 0 auto;
}

.s-buchband a.s-buchband-btn:hover,
.s-buchband a.s-buchband-btn:focus { background: #186881; color: #f5f2ed; }

.s-buchband.is-petrol { background: #186881; }
.s-buchband.is-creme { background: #f5f2ed; }
.s-buchband.is-creme .s-buchband-headline { color: #25333a; }
.s-buchband.is-creme .s-buchband-sub { color: #4a565c; }
.s-buchband.is-creme a.s-buchband-btn { background: #186881; color: #f5f2ed; }
.s-buchband.is-creme a.s-buchband-btn:hover,
.s-buchband.is-creme a.s-buchband-btn:focus { background: #f8b236; color: #25333a; }

/* Sichtbarkeit je Bildschirmbreite. Ein Band kann auf Desktop an einer anderen
   Stelle der Seite stehen als auf dem Handy: dafuer zwei Baender einsetzen und
   jedes auf seine Breite stellen. Die Grenze ist dieselbe 1025 Pixel, ab der das
   Band klebt und unterhalb derer der Balken am unteren Rand uebernimmt. */
@media (min-width: 1025px) { .s-buchband.is-nur-mobil { display: none; } }
@media (max-width: 1024px) { .s-buchband.is-nur-desktop { display: none; } }

@media (max-width: 767px) {
  .s-buchband-inner { padding: 22px 20px; gap: 16px; }
  .s-buchband-headline { font-size: 20px; }
  .s-buchband-sub { font-size: 15px; }
  .s-buchband-btn { width: 100%; text-align: center; }
}

/* --------------------------------------------- Mitlaufender Buchen-Balken */

/* Nur auf schmalen Bildschirmen. Auf dem Handy liegen zwischen Kopf und
   Buchungsmodul rund zwölf Bildschirmhöhen, der Balken hält den Weg dorthin
   in jedem Moment kurz. Er verschwindet, sobald das Buchungsmodul im Bild steht. */
.art-buchleiste { display: none; }

@media (max-width: 900px) {
  .art-buchleiste {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: #25333a;
    box-shadow: 0 -2px 10px rgba(37, 51, 58, .25);
  }

  .art-buchleiste[hidden] { display: none; }

  .art-buchleiste-text {
    font-family: Ubuntu, -apple-system, sans-serif;
    color: #f5f2ed;
    font-size: 15px;
    line-height: 1.25;
    display: flex;
    flex-direction: column;
  }

  .art-buchleiste-zusatz { font-size: 12.5px; color: #b9c3c7; }

  .art-buchleiste a.art-buchleiste-btn {
    background: #f8b236;
    color: #25333a;
    font-family: Ubuntu, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1;
    padding: 13px 20px;
    border-radius: 0;
    text-decoration: none;
    flex: 0 0 auto;
  }

  .art-buchleiste a.art-buchleiste-btn:hover,
  .art-buchleiste a.art-buchleiste-btn:focus { background: #ffffff; color: #25333a; }
}


/* ------------------------------------------------------------- Tagesplan */

/* Zwei Spalten, je ein Tag. Die Stationen stehen untereinander, jede mit einer
   kurzen Marke und wenigen Zeilen Text. Bewusst schmal gehalten, ein Ablauf
   wird überflogen und nicht gelesen. */
.s-tagesplan-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 40px;
}

.s-tagesplan-kicker {
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #186881;
  margin-bottom: 10px;
}

.s-tagesplan-heading {
  font-family: "DM Serif Text", Georgia, serif;
  font-size: 45px;
  line-height: 1.15;
  color: #25333a;
  margin: 0 0 14px;
}

.s-tagesplan-text { max-width: 640px; margin-bottom: 34px; }

.s-tagesplan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
}

.s-tagesplan-spalte + .s-tagesplan-spalte {
  border-left: 1px dashed #186881;
  padding-left: 56px;
}

.s-tagesplan-tag {
  font-family: "DM Serif Text", Georgia, serif;
  font-size: 26px;
  line-height: 1.2;
  color: #25333a;
  margin: 0 0 18px;
}

.s-tagesplan-zeile + .s-tagesplan-zeile {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(37, 51, 58, .12);
}

.s-tagesplan-marke {
  font-family: Ubuntu, -apple-system, sans-serif;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #186881;
  margin-bottom: 6px;
}

.s-tagesplan-ztext { color: #4a565c; }
.s-tagesplan-ztext p { margin: 0; }

.s-tagesplan.is-dark .s-tagesplan-kicker,
.s-tagesplan.is-dark .s-tagesplan-marke { color: #f8b236; }
.s-tagesplan.is-dark .s-tagesplan-heading,
.s-tagesplan.is-dark .s-tagesplan-tag { color: #ffffff; }
.s-tagesplan.is-dark .s-tagesplan-ztext { color: #d8dee1; }
.s-tagesplan.is-dark .s-tagesplan-spalte + .s-tagesplan-spalte { border-left-color: rgba(255, 255, 255, .35); }
.s-tagesplan.is-dark .s-tagesplan-zeile + .s-tagesplan-zeile { border-top-color: rgba(255, 255, 255, .2); }

@media (max-width: 1024px) {
  .s-tagesplan-inner { padding: 0 28px; }
  .s-tagesplan-heading { font-size: 36px; }
  .s-tagesplan-grid { gap: 0 32px; }
  .s-tagesplan-spalte + .s-tagesplan-spalte { padding-left: 32px; }
}

@media (max-width: 767px) {
  .s-tagesplan-inner { padding: 0 20px; }
  .s-tagesplan-heading { font-size: 30px; }
  .s-tagesplan-grid { grid-template-columns: 1fr; gap: 0; }
  .s-tagesplan-spalte + .s-tagesplan-spalte {
    border-left: 0;
    padding-left: 0;
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px dashed #186881;
  }
}

/* ------------------------------- Überschrift über den vier Kästen (infovier) */

/* Zur Spezifität: Das Theme setzt .elementor .e-heading-base auf margin:0, das sind
   zwei Klassen. Die Abstände hier brauchen deshalb die Sektion im Selektor, sonst
   stehen Kicker, Überschrift und Kästen ohne Luft übereinander.
   Größen und Farben sind dieselben wie im Modul "Text + Bild". */
.s-infovier .s-infovier-kicker {
  font-family: Ubuntu, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #186881;
  margin-block-end: 10px;
}

.s-infovier .s-infovier-heading {
  font-family: "DM Serif Text", Georgia, serif;
  font-weight: 400;
  font-size: 45px;
  line-height: 1.18em;
  color: #25333a;
  margin-block: 0 40px;
}

.s-infovier.is-dark .s-infovier-kicker { color: #f8b236; }
.s-infovier.is-dark .s-infovier-heading { color: #ffffff; }

@media (min-width: 768px) and (max-width: 1024px) {
  .s-infovier .s-infovier-heading { font-size: 36px; margin-block-end: 32px; }
}

@media (max-width: 767px) {
  .s-infovier .s-infovier-heading { font-size: 30px; margin-block-end: 26px; }
}

/* ------------------------------------------------------------- Zeitstrahl */

/* Aufbau und Maße folgen .s-textabschnitt.has-bild.is-quer, damit die Sektion sich
   nahtlos zwischen die anderen einfügt: Sektion ohne Innenabstand, Textspalte mit
   133 Pixeln Einzug und 820 Pixeln Höchstbreite, Bildspalte 45 Prozent bis zum
   Rand, sticky bei 104 Pixeln. Abweichend ist nur, dass links an der Schraffur die
   Marken stehen und dass die Sektion mehrere Abschnitte gliedert. */

.s-zeitstrahl {
  padding: 0;
  --zs-marke: 34%;   /* Anteil der Markenspalte, die Schraffur sitzt an ihrer Kante */
  --zs-gap: 40px;
}

/* Kopf: gleicher Einzug wie die Textspalte darunter, damit die linke Kante steht. */
.s-zeitstrahl .s-zs-kopf {
  max-width: 953px;                 /* 820 Text + 133 Einzug */
  padding-block-start: 130px;
  padding-inline: 133px 60px;
}

/* Die Überschrift trägt ihren Abstand zur Einleitung selbst, die Einleitung steht
   eine Ebene tiefer in der Textspalte. */
.s-zeitstrahl .s-zs-texte > .s-zs-intro { margin-block-end: 0; }

.s-zeitstrahl .s-zs-kicker {
  font-family: Ubuntu, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #186881;
  margin-block-end: 10px;
}

.s-zeitstrahl .s-zs-heading {
  font-family: "DM Serif Text", Georgia, serif;
  font-weight: 400;
  font-size: 45px;
  line-height: 1.18em;
  color: #25333a;
  margin-block: 0 24px;
}

.s-zeitstrahl .s-zs-intro {
  font-family: Ubuntu, -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1.7em;
  color: #25333a;
  max-width: 660px;
}

.s-zeitstrahl .s-zs-intro p { margin-block: 0 14px; }
.s-zeitstrahl .s-zs-intro p:last-child { margin-block-end: 0; }

/* Text links, Bild rechts. Das Bild gehört zur ganzen Sektion und nicht zu einem
   Abschnitt, deshalb läuft es über alle Abschnitte mit. */
.s-zeitstrahl .s-zs-body {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
}

.s-zeitstrahl .s-zs-texte {
  flex: 1 1 auto;
  max-width: 953px;
  padding-inline: 133px 60px;
  padding-block: 24px 130px;
}

/* Der Strahl umfasst nur die Abschnitte. Die Schraffur hängt an ihm und beginnt
   dadurch erst bei der ersten Tagesüberschrift, nicht schon bei der Einleitung. */
.s-zeitstrahl .s-zs-strahl {
  position: relative;
  margin-block-start: 90px;
}

.s-zeitstrahl .s-zs-abschnitt { position: relative; }
.s-zeitstrahl .s-zs-abschnitt + .s-zs-abschnitt { margin-block-start: 64px; }

/* Die Schraffur beginnt 20 Pixel über der ersten Tagesüberschrift und endet
   20 Pixel unter der letzten Zeile. Sie hängt am Rahmen aller Abschnitte, damit
   sie an den Überschriften nicht abreißt. Gleiche Optik wie der Trenner im Block
   mit Fragen, dort Petrol, hier Gold. */
.s-zeitstrahl .s-zs-strahl::before {
  content: "";
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: 34%;
  width: 11px;
  margin-left: -5px;
  background-color: #f8b236;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' overflow='visible' width='100%25' viewBox='0 0 16 20' fill='none' stroke='black' stroke-width='1' stroke-linecap='square' stroke-miterlimit='10'%3E%3Cg transform='translate(0,-12)'%3E%3Cpath d='M0,28L18,10'/%3E%3Cpath d='M0,18L18,0'/%3E%3Cpath d='M0,48L18,30'/%3E%3Cpath d='M0,38L18,20'/%3E%3C/g%3E%3C/svg%3E");
  mask-size: 100% 20px;
  mask-repeat: repeat-y;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' overflow='visible' width='100%25' viewBox='0 0 16 20' fill='none' stroke='black' stroke-width='1' stroke-linecap='square' stroke-miterlimit='10'%3E%3Cg transform='translate(0,-12)'%3E%3Cpath d='M0,28L18,10'/%3E%3Cpath d='M0,18L18,0'/%3E%3Cpath d='M0,48L18,30'/%3E%3Cpath d='M0,38L18,20'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: 100% 20px;
  -webkit-mask-repeat: repeat-y;
}

/* Tagesüberschrift in der H3-Größe des Themes, dieselbe wie bei den Bildkarten. */
.s-zeitstrahl .s-zs-tag {
  font-family: "DM Serif Text", Georgia, serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.25em;
  color: #25333a;
  margin-block: 0 26px;
  position: relative;
}

.s-zeitstrahl .s-zs-stationen {
  display: grid;
  grid-template-columns: var(--zs-marke) minmax(0, 1fr);
  column-gap: var(--zs-gap);
  align-items: start;
}

.s-zeitstrahl .s-zs-marke {
  grid-column: 1;
  text-align: right;
  font-family: Ubuntu, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
  color: #186881;
  padding-block-end: 40px;
  padding-inline-end: 22px;
}

.s-zeitstrahl .s-zs-stext {
  grid-column: 2;
  font-family: Ubuntu, -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1.7em;
  color: #25333a;
  padding-block-end: 40px;
  padding-inline-start: 22px;
}

.s-zeitstrahl .s-zs-stext p { margin: 0; }

/* Die letzte Station eines Abschnitts trägt keinen Fußabstand. Die Klasse kommt
   aus dem Template, weil :last-of-type hier alle divs meint. */
.s-zeitstrahl .s-zs-marke.is-letzte,
.s-zeitstrahl .s-zs-stext.is-letzte { padding-block-end: 0; }

.s-zeitstrahl .s-zs-bild { flex: 0 0 45%; order: 2; }

.s-zeitstrahl .s-zs-img { display: block; width: 100%; height: auto; }

/* Auf Petrol dreht sich der Kontrast. */
.s-zeitstrahl.is-dark .s-zs-kicker,
.s-zeitstrahl.is-dark .s-zs-marke { color: #f8b236; }
.s-zeitstrahl.is-dark .s-zs-heading,
.s-zeitstrahl.is-dark .s-zs-tag { color: #ffffff; }
.s-zeitstrahl.is-dark .s-zs-stext,
.s-zeitstrahl.is-dark .s-zs-intro { color: #f5f2ed; }
.s-zeitstrahl.is-dark .s-zs-strahl::before { background-color: rgba(255, 255, 255, .45); }

/* Ab Tablet steht das Bild oben, ab Desktop bleibt es beim Scrollen stehen.
   Beide Werte sind aus "Text + Querformat-Bild" übernommen. */
@media (min-width: 768px) {
  .s-zeitstrahl .s-zs-bild { align-self: flex-start; margin-block-start: 24px; }
}

@media (min-width: 1025px) {
  .s-zeitstrahl .s-zs-bild { position: sticky; top: 104px; margin-block-end: 16px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .s-zeitstrahl .s-zs-bild { position: sticky; top: 104px; }
  .s-zeitstrahl .s-zs-kopf { padding-block-start: 80px; padding-inline: 64px 32px; }
  .s-zeitstrahl .s-zs-texte { padding-inline: 64px 32px; padding-block: 20px 80px; }
  .s-zeitstrahl .s-zs-strahl { margin-block-start: 60px; }
  .s-zeitstrahl .s-zs-heading { font-size: 36px; }
  .s-zeitstrahl .s-zs-tag { font-size: 24px; }
  .s-zeitstrahl .s-zs-marke { font-size: 18px; }
}

/* Der Umbruch in der Überschrift greift nur dort, wo genug Breite da ist. */
@media (max-width: 767px) {
  .s-zeitstrahl .s-zs-br { display: none; }

  .s-zeitstrahl .s-zs-kopf { max-width: none; padding-block-start: 48px; padding-inline: 24px; }
  .s-zeitstrahl .s-zs-heading { font-size: 30px; }
  .s-zeitstrahl .s-zs-tag { font-size: 24px; margin-block-end: 20px; padding-inline-start: 30px; }

  .s-zeitstrahl .s-zs-body { flex-direction: column; }

  /* Auf schmalen Bildschirmen steht das Bild ueber dem Ablauf, so wie in
     "Text + Querformat-Bild". Es braucht order -1, weil es im Markup hinter der
     Textspalte steht, order 0 wuerde es dort belassen. */
  .s-zeitstrahl .s-zs-bild { order: -1; flex: 0 0 auto; align-self: stretch; margin-block-end: 40px; }

  .s-zeitstrahl .s-zs-texte { max-width: none; padding-inline: 24px; padding-block: 20px 56px; }
  .s-zeitstrahl .s-zs-strahl { margin-block-start: 40px; }
  .s-zeitstrahl .s-zs-strahl::before { left: 0; }

  .s-zeitstrahl .s-zs-stationen { grid-template-columns: 1fr; column-gap: 0; }
  .s-zeitstrahl .s-zs-marke,
  .s-zeitstrahl .s-zs-stext { grid-column: 1; padding-inline: 30px 0; text-align: left; }
  .s-zeitstrahl .s-zs-marke { padding-block-end: 6px; font-size: 19px; }
  .s-zeitstrahl .s-zs-stext { padding-block-end: 30px; }
  .s-zeitstrahl .s-zs-abschnitt + .s-zs-abschnitt { margin-block-start: 38px; }
}

/* ------------------------------------- Abstände der neuen Sektionen */

/* Dieselbe Staffelung wie in _abstaende.css: Desktop 133, Tablet 100, Mobil 70.
   Steht hier und nicht dort, damit die main.css unberührt bleibt. Die Startseite
   ist wie überall ausgenommen, sie trägt eigene Abstände.
   Der Zeitstrahl steht bewusst nicht in dieser Liste: seine Abstände sitzen im
   Textbereich, genau wie bei "Text + Querformat-Bild", damit die Bildspalte über
   die volle Höhe der Sektion laufen kann. */
body:not(.home) .s-tagesplan { padding-block: 133px; }

@media (max-width: 1024px) {
  body:not(.home) .s-tagesplan { padding-block: 100px; }
}

@media (max-width: 767px) {
  body:not(.home) .s-tagesplan { padding-block: 70px; }
}

/* --------------------------------------------------------------- Fußnote */

/* Kleine graue Zeile unter einer Aussage, die eine Einschränkung braucht, etwa
   einen Sternchen-Hinweis. Steht in jedem Textfeld zur Verfügung. */
.elementor .art-fussnote {
  display: block;
  margin-block-start: 26px;
  font-family: Ubuntu, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: #6d7c83;
}

.is-dark .art-fussnote,
.s-faq .art-fussnote { color: #b9c3c7; }

/* Kleingedrucktes unter dem Buchungsformular (Feld "Hinweis unter dem
   Buchungsformular"). Sitzt hinter dem Warenkorb-Knopf, damit der Rechtshinweis
   nicht das Letzte ist, was vor dem Klick gelesen wird. Ton und Groesse wie
   die Rechtszeile im Fliesstext. */
.elementor .s-tb-nachtext {
  margin-block-start: 26px;
  max-width: 470px;
}
.elementor .s-tb-nachtext p {
  margin: 0;
  font-family: Ubuntu, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #6d7c83;
}
.elementor .s-tb-nachtext p + p { margin-block-start: 8px; }

/* Im Buchungsblock steht der Bewertungsbaustein zwischen Fliesstext und
   Teilnahmegebuehr. Er bekommt nach oben denselben Abstand, den er nach unten
   zur Gebuehr hat (32 Pixel), damit er frei steht statt am Satz zu kleben. */
.elementor .s-terminbuchung .art-bw { margin-block-start: 32px; }
.elementor .s-tb-nachtext a {
  color: #6d7c83;
  text-decoration: none;
  border-block-end: 1px solid #f8b236;
  padding-block-end: 1px;
}
.elementor .s-tb-nachtext a:hover,
.elementor .s-tb-nachtext a:focus-visible { color: #25333a; }

.elementor .s-terminbuchung.is-dark .s-tb-nachtext p { color: #b9c3c7; }
.elementor .s-terminbuchung.is-dark .s-tb-nachtext a { color: #b9c3c7; }
.elementor .s-terminbuchung.is-dark .s-tb-nachtext a:hover,
.elementor .s-terminbuchung.is-dark .s-tb-nachtext a:focus-visible { color: #ffffff; }

/* ------------------------------------------------- Buchungsknopf im Modul */

/* Gold statt Petrol: Die wichtigste Handlung der Seite trug als einzige nicht die
   Aktionsfarbe des Hauses. Das Buchen-Band, der Menue-Knopf "Bewerbung" und der
   Kassen-Knopf sind gold, der Buchungsknopf war blau. Dazu etwas mehr Hoehe und
   Schrift. Die Regeln in der main.css arbeiten mit !important, deshalb hier ein
   Selektor mit drei Klassen und ebenfalls !important. */
.elementor .s-terminbuchung .s-tb-form .single_add_to_cart_button {
  background-color: #f8b236 !important;
  color: #25333a !important;
  font-size: 20px;
  padding-block-start: 18px;
  padding-block-end: 18px;
  padding-inline-start: 38px;
  padding-inline-end: 38px;
}
.elementor .s-terminbuchung .s-tb-form .single_add_to_cart_button:hover,
.elementor .s-terminbuchung .s-tb-form .single_add_to_cart_button:focus-visible {
  background-color: #186881 !important;
  color: #f5f2ed !important;
}

@media (max-width: 767px) {
  .elementor .s-terminbuchung .s-tb-form .single_add_to_cart_button {
    font-size: 20px;
    padding-block-start: 18px;
    padding-block-end: 18px;
  }
}

/* --------------------------------------- Buchen-Band, mitlaufend auf Desktop */

/* Das Band bleibt beim Scrollen unter der Navigation stehen, damit der Knopf auf
   langen Seiten erreichbar bleibt. Reines CSS, kein Scroll-Listener: der Browser
   rechnet position:sticky im Compositor, die Seite wird dadurch nicht langsamer.
   Nur ab 1025 Pixeln, auf schmalen Bildschirmen uebernimmt das der mitlaufende
   Balken am unteren Rand (art_buchen_balken in inc/buchen.php).

   Die Hoehen stehen als Variablen, weil zwei Regeln sie brauchen:
   Navigation 88 Pixel (.s-site-header), Band 103 Pixel bei einzeiliger
   Ueberschrift. Traegt ein Band einmal mehr Text, hier nachziehen.

   z-index 800 haelt das Band ueber dem Inhalt, aber unter der Navigation (9999)
   und unter dem mitlaufenden Balken (900). */
@media (min-width: 1025px) {
  :root {
    --art-kopf-h: 88px;
    --art-band-h: 103px;
  }

  .s-buchband {
    position: sticky;
    top: var(--art-kopf-h);
    z-index: 800;
  }

  /* Bilder unterhalb des Bandes rasten unter dem Band ein statt unter der
     Navigation, mit denselben 16 Pixeln Luft. Bilder oberhalb bleiben bei 104.
     Fuenf Klassen im Selektor, damit er die Theme-Regel mit ihren vier
     Klassen schlaegt. */
  .elementor .s-buchband ~ .s-textabschnitt.has-bild .s-textabschnitt-bild,
  .elementor .s-buchband ~ .s-terminbuchung.has-bild .s-textabschnitt-bild {
    top: calc(var(--art-kopf-h) + var(--art-band-h) + 16px);
  }

  .elementor .s-buchband ~ .s-zeitstrahl .s-zs-bild {
    top: calc(var(--art-kopf-h) + var(--art-band-h) + 16px);
  }

  /* Ab dem Buchungsblock schiebt sich der Inhalt ueber das Band. Dort steht der
     echte Kaufknopf, ein zweiter Aufruf daneben waere doppelt, und der Block
     bekommt so die volle Bildhoehe. 801 liegt knapp ueber dem Band (800) und
     bleibt unter dem mitlaufenden Balken (900) und der Navigation (9999).
     Kein Scroll-Listener noetig: der Deckel gilt ab der Sektion selbst. */
  .elementor .s-buchband ~ .s-terminbuchung,
  .elementor .s-buchband ~ .s-terminbuchung ~ * {
    position: relative;
    z-index: 801;
  }
}