/*!
 * Leistungs- und Ortsseiten.
 *
 * Baut auf dem Raster auf, das die Bestandsseiten schon benutzen
 * (.grid-container / .grid-item-*) und verwendet dieselben Farbwerte wie das
 * Divi-Customizer-CSS - #27201D, #C3BCBB und der Verlauf #342927 -> #665856.
 * Dadurch sehen die neuen Seiten aus wie die alten, ohne dass fuer jede Seite
 * ein eigener Divi-Stylesheet-Block erzeugt werden muss.
 */

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

/* ---------------------------------------------------------------- Grundraster */
.cluster .et_pb_section {
  border-top: 4px solid var(--ff-light);
}
.cluster .et_pb_section.is-light {
  background-color: var(--ff-light) !important;
}
.cluster .et_pb_section.is-dark {
  background-color: var(--ff-dark) !important;
}
.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%);
}
.cluster .et_pb_row.tile-image {
  padding: 0 !important;
  overflow: hidden;
}
.cluster .et_pb_row.tile-image img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}

/* -------------------------------------------------------------------- Typo */
.cluster h1 {
  font-size: 40px;
  line-height: 52px;
  letter-spacing: 2px;
}
.cluster h2 {
  font-size: 30px;
  line-height: 42px;
  letter-spacing: 2px;
  margin-bottom: 18px;
}
.cluster h3 {
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.cluster p {
  font-size: 18px;
  line-height: 32px;
  letter-spacing: 0.5px;
}
.cluster .lead p {
  font-size: 21px;
  line-height: 36px;
}

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

/* ------------------------------------------------------------------ Kacheln */
.ff-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 4px;
  margin-top: 26px;
}
.ff-card {
  display: block;
  padding: 30px 28px;
  background-image: linear-gradient(90deg, var(--ff-mid) 0%, var(--ff-mid-2) 100%);
  color: #fff !important;
  text-decoration: none !important;
  transition: filter 0.25s ease;
}
.ff-card:hover {
  filter: brightness(1.18);
}
.ff-card h3 {
  color: #fff;
  margin-bottom: 10px;
}
.ff-card p {
  font-size: 16px;
  line-height: 27px;
  margin: 0;
}
.ff-card .ff-price {
  display: block;
  margin-top: 14px;
  font-family: 'KlavikaBold', Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
}
.ff-card .ff-more {
  display: inline-block;
  margin-top: 16px;
  font-family: 'KlavikaBold', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------- 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: 40px;
  letter-spacing: 2px;
  line-height: 1.2;
}
.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 54px !important;
  margin: 0 !important;
}
.ff-steps li:before {
  content: counter(step, decimal-leading-zero) !important;
  position: absolute;
  left: 0;
  top: 2px;
  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;
}

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

/* ------------------------------------------------------- Links / Breadcrumb */
.ff-crumbs {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 18px;
  opacity: 0.75;
}
.ff-crumbs a {
  text-decoration: none;
}
.ff-linklist {
  list-style: none !important;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 34px;
}
.ff-linklist li {
  margin: 0 0 12px !important;
  padding: 0 !important;
  break-inside: avoid;
}
.ff-linklist li:before {
  display: none !important;
}
.ff-cta {
  display: inline-block;
  margin-top: 8px;
  padding: 15px 34px;
  border: 2px solid currentColor;
  font-family: 'KlavikaBold', Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 3px;
  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;
}
/* Inhalt sitzt immer auf dunklen Kacheln - die helle Sektionsfarbe ist nur die
   Fuge dazwischen, genau wie auf den Bestandsseiten. */
.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 {
  color: #fff;
}

@media only screen and (max-width: 980px) {
  .cluster h1 { font-size: 32px; line-height: 44px; }
  .cluster h2 { font-size: 26px; line-height: 36px; }
  .ff-linklist { columns: 1; }
}
@media only screen and (max-width: 767px) {
  .cluster h1 { font-size: 27px; line-height: 38px; }
  .cluster .lead p { font-size: 19px; line-height: 32px; }
  .ff-price-box .amount { font-size: 32px; }
}