/*!
 * Leistungs- und Ortsseiten.
 *
 * Die Bestandsseiten bauen ihr Layout aus zwei Teilen: dem Raster aus
 * site.css (.grid-container / .grid-item-* / .photo / .img-tile) und einem
 * Divi-Block pro Seite, der nur Farben, Rahmen und Innenabstaende der
 * einzelnen Kacheln setzt. Diese Datei ist genau dieser zweite Teil - einmal
 * geschrieben statt pro Seite generiert.
 *
 * Wichtig: hier stehen KEINE Schriftgroessen fuer h1/h2/h3/p. Die kommen aus
 * site.css samt seiner Breakpoint-Staffel, damit eine Ortsseite dieselbe Typo
 * hat wie /fliesenhandwerk/ - vorher hat dieser Block sie ueberschrieben und
 * die Seiten sahen dadurch fremd aus.
 */

:root {
  --ff-dark: #27201d;
  --ff-mid: #342927;
  --ff-mid-2: #665856;
  --ff-light: #c3bcbb;
}

/* ------------------------------------------------------------------ Raster */
/* Die helle Sektionsfarbe ist die Fuge zwischen den Kacheln, nicht der
   Hintergrund des Inhalts - genauso wie auf den Bestandsseiten. */
.cluster .et_pb_section.grid-container {
  background-color: var(--ff-light) !important;
  border-top: 4px solid var(--ff-light);
}
/* Erste Sektion unter dem Header traegt den 5px-Absatz des Originals. */
.cluster .et_pb_section.grid-container.first {
  border-top-width: 5px;
}
/* Bild-an-Text-Sektionen laufen ohne Fuge, wie .et_pb_section_2 im Original. */
.cluster .et_pb_section.grid-container.tight {
  gap: 0 !important;
}
/* Wie im Original: der 100px-Absatz laeuft im dunklen Seitenhintergrund, ohne
   Trennlinie darueber. */
.cluster .et_pb_section.grid-container.mt100 {
  margin-top: 100px;
  border-top: 0;
}

/* Textkacheln: 100px oben/unten aus site.css, 75px seitlich wie im Original.
   Viertelkacheln, Fotos und Bildkacheln sind per :not() ausgenommen, damit ihr
   Seitenabstand aus der site.css-Staffel kommt - ein "padding: unset" wuerde
   sie wegen der hoeheren Spezifitaet dieser Regel auf 0 setzen, sobald der
   site.css-Wert ohne !important kommt (alle Breiten ab 1481px). */
.cluster .grid-container.et_pb_section .et_pb_row:not(.grid-item-25):not(.photo):not(.img-tile) {
  padding-left: 75px;
  padding-right: 75px;
}
.cluster .grid-container.et_pb_section .et_pb_row.photo,
.cluster .grid-container.et_pb_section .et_pb_row.img-tile {
  padding: 0 !important;
  overflow: hidden;
}

.cluster .et_pb_row.tile-dark {
  background-color: var(--ff-dark);
}
.cluster .et_pb_row.tile-gradient {
  background-image: linear-gradient(90deg, var(--ff-mid) 0%, var(--ff-mid-2) 100%);
}

/* ------------------------------------------------------------------- Fotos */
.cluster .et_pb_row.photo,
.cluster .et_pb_row.img-tile {
  min-height: 320px;
}
.cluster .et_pb_row.photo .et_pb_column,
.cluster .et_pb_row.img-tile .et_pb_column {
  width: 100%;
  height: 100%;
}
/* Divi gibt jedem Modul einen Aussenabstand - in einer Bildkachel wuerde daraus
   ein dunkler Streifen unter dem Foto. */
.cluster .et_pb_row.photo .et_pb_module,
.cluster .et_pb_row.img-tile .et_pb_module {
  margin: 0 !important;
  height: 100%;
  line-height: 0;
}
.cluster .et_pb_row.photo img,
.cluster .et_pb_row.img-tile img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}

/* ------------------------------------------------------------------- Farbe */
.cluster .et_pb_text_inner,
.cluster .et_pb_text_inner p,
.cluster .et_pb_text_inner li {
  color: var(--ff-light);
}
.cluster .et_pb_text_inner h1,
.cluster .et_pb_text_inner h2,
.cluster .et_pb_text_inner h3,
.cluster .et_pb_text_inner ff-h2,
.cluster .et_pb_text_inner ff-h3 {
  color: #fff;
}

/* Auf den Bestandsseiten sitzen Ueberschrift und Text in getrennten
   Divi-Modulen und bekommen deren 30px-Abstand. Hier stehen sie im selben
   Modul, also muss der Abstand von Hand kommen. */
.cluster .et_pb_text_inner h2, .cluster .et_pb_text_inner ff-h2 {
  margin-bottom: 26px;
}
.cluster .et_pb_text_inner h3, .cluster .et_pb_text_inner ff-h3 {
  margin-bottom: 12px;
}
.cluster .et_pb_row.grid-item-25 .et_pb_text_inner h3, .cluster .et_pb_row.grid-item-25 .et_pb_text_inner ff-h3 {
  margin-bottom: 8px;
}

/* Die Bestandsseiten setzen den Abstand der Sidebar-Liste inline (40px). */
.cluster .grid-sidebar ul {
  margin-top: 40px;
}

/* ------------------------------------------------------------------ Fakten */
.ff-facts {
  list-style: none !important;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 22px 30px;
}
.ff-facts li {
  margin: 0 !important;
  padding: 0 !important;
}
.ff-facts li:before {
  display: none !important;
}
.ff-facts .k {
  display: block;
  font-family: 'KlavikaBold', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  line-height: 18px;
  opacity: 0.65;
  margin-bottom: 4px;
}
.ff-facts .v {
  display: block;
  font-family: 'KlavikaRegular', Arial, sans-serif;
  font-size: 17px;
  line-height: 26px;
  letter-spacing: 1px;
}

/* ----------------------------------------------------------------- Kacheln */
/* Preis- und Weiterlesen-Zeile in den Viertelkacheln. */
.ff-price {
  display: block;
  margin-top: 16px;
  font-family: 'KlavikaBold', Arial, sans-serif;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 2px;
}
.ff-more {
  display: inline-block;
  margin-top: 18px;
  font-family: 'KlavikaBold', Arial, sans-serif;
  font-size: 11px;
  line-height: 18px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* Kachel als Ganzes klickbar - die Zeile ist bereits position:relative, der
   Weiterlesen-Link legt sich unsichtbar darueber. */
.cluster .et_pb_row.ff-tile {
  transition: filter 0.25s ease;
}
.cluster .et_pb_row.ff-tile:hover {
  filter: brightness(1.15);
}
.cluster .et_pb_row.ff-tile .ff-more:after {
  content: '';
  position: absolute;
  inset: 0;
}

/* ------------------------------------------------------------------- Preis */
.ff-price-box {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin: 6px 0 14px;
}
.ff-price-box .amount {
  font-family: 'KlavikaBold', Arial, sans-serif;
  font-size: 34px;
  letter-spacing: 2px;
  line-height: 1.25;
}
.ff-price-box .unit {
  font-size: 15px;
  letter-spacing: 2px;
  opacity: 0.8;
}

/* ------------------------------------------------------------------ Ablauf */
.ff-steps {
  list-style: none !important;
  counter-reset: step;
  margin: 0;
  padding: 0;
}
.ff-steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 26px 58px !important;
  margin: 0 !important;
}
.ff-steps li:before {
  content: counter(step, decimal-leading-zero) !important;
  position: absolute;
  left: 0;
  top: 4px;
  width: auto !important;
  height: auto !important;
  background: none !important;
  float: none !important;
  margin: 0 !important;
  font-family: 'KlavikaBold', Arial, sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
  opacity: 0.6;
}
.ff-steps li:last-child {
  padding-bottom: 0 !important;
}
.ff-steps p {
  font-family: 'KlavikaRegular', Arial, sans-serif;
  font-size: 17px;
  line-height: 28px;
  letter-spacing: 1px;
}

/* --------------------------------------------------------------------- FAQ */
.ff-faq {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  margin-top: 10px;
}
.ff-faq details {
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.ff-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 40px 22px 0;
  position: relative;
  font-family: 'KlavikaMedium', Arial, sans-serif;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 1px;
  color: #fff;
}
.ff-faq summary::-webkit-details-marker {
  display: none;
}
.ff-faq summary:after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 20px;
  font-size: 26px;
  line-height: 1;
  transition: transform 0.2s ease;
}
.ff-faq details[open] summary:after {
  transform: rotate(45deg);
}
.ff-faq .answer {
  padding: 0 0 24px;
}
.ff-faq .answer p {
  margin: 0;
  font-family: 'KlavikaRegular', Arial, sans-serif;
  font-size: 18px;
  line-height: 32px;
  letter-spacing: 1px;
}

/* ------------------------------------------------------- Links / Breadcrumb */
.ff-crumbs {
  font-family: 'KlavikaBold', Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 20px !important;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 20px;
  opacity: 0.75;
}
.ff-crumbs a {
  text-decoration: none;
}
.ff-linklist {
  list-style: none !important;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 40px;
}
.ff-linklist li {
  margin: 0 0 14px !important;
  padding: 0 !important;
  break-inside: avoid;
  font-family: 'KlavikaRegular', Arial, sans-serif;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 1px;
}
.ff-linklist li:before {
  display: none !important;
}
.ff-cta {
  display: inline-block;
  margin-top: 8px;
  padding: 16px 36px;
  border: 2px solid currentColor;
  font-family: 'KlavikaBold', Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 3px;
  line-height: 20px;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.ff-cta:hover {
  background-color: #fff;
  color: var(--ff-dark) !important;
}

/* ------------------------------------------------------------------- Mobil */
/* Ab 1024px stapelt site.css alle Kacheln auf volle Breite. Die Fotokacheln
   duerfen dann nicht mehr die Hoehe der Textkachel erben, sonst entstehen
   bildschirmfuellende Bilder. */
@media only screen and (max-width: 1024px) {
  .cluster .et_pb_row.photo,
  .cluster .et_pb_row.img-tile {
    min-height: 0;
  }
  .cluster .et_pb_row.photo img,
  .cluster .et_pb_row.img-tile img {
    min-height: 0;
    height: auto;
    aspect-ratio: 4 / 3;
  }
}
@media only screen and (max-width: 980px) {
  .ff-linklist {
    columns: 1;
  }
}
@media only screen and (max-width: 768px) {
  .ff-facts {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
  /* Auf dem Handy passt die Strasse sonst nicht in eine Spalte und bricht
     dreizeilig um. */
  @media (max-width: 520px) {
    .ff-facts {
      grid-template-columns: 1fr;
      gap: 18px;
    }
  }
  .ff-faq summary {
    font-size: 18px;
    line-height: 28px;
  }
  .ff-price-box .amount {
    font-size: 28px;
  }
}