/* Referenzprojekt-Seiten */
/* Design-Tokens */
.fp-page{
  --fp-green:        #00ab32;   /* Primärfarbe */
  --fp-green-dark:   #008f2a;   /* Hover / Links */
  --fp-mark:         #c9f0d4;   /* Marker hinter Überschriften und Häkchen-Punkte */
  --fp-ink:          #020101;   /* Text / Überschriften */
  --fp-white:        #ffffff;
  --fp-soft:         #f4f6f4;   /* ruhiger Sektionshintergrund */
  --fp-line:         #90909040; /* Trennlinien */
  --fp-muted:        #5b5f5c;
 
  --fp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
 
  --fp-wrap: 1250px;
  --fp-gap: 24px;
}
 
/* ---------- Reset / Grundlagen ---------- */
*,*::before,*::after{ box-sizing:border-box; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
a{ color:var(--fp-green-dark); }
 
.fp-wrap{ width:100%; max-width:var(--fp-wrap); margin-inline:auto; padding-inline:20px; }
.fp-section{ padding-block:72px; }
.fp-section--soft{ background:var(--fp-soft); }
.fp-section--tight{ padding-block:48px; }
 
/* ---------- Überschriften-System (Website-Stil) ---------- */
 
/* Eyebrow: grüne Versalien mit vorangestelltem Strich */
.fp-eyebrow{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 18px;
  font-size:15px;
  font-weight:700;
  letter-spacing:1.6px;
  line-height:1.3;
  text-transform:uppercase;
  color:var(--fp-green);
}
.fp-eyebrow::before{
  content:"";
  flex:0 0 auto;
  width:44px;
  height:3px;
  background:var(--fp-green);
}
 
/* H1 / H2 – Inter 700–800, enge Laufweite, 1.15em Zeilenhöhe */
.fp-h1,.fp-h2{
  margin:0 0 22px;
  font-weight:800;
  line-height:1.13;
  letter-spacing:-0.022em;
  color:var(--fp-ink);
  text-wrap:balance;
}
.fp-h1{ font-size:clamp(34px, 6.2vw, 62px); }
.fp-h2{ font-size:clamp(28px, 4.4vw, 46px); }
 
.fp-h3{
  margin:0 0 12px;
  font-size:clamp(21px, 2.4vw, 26px);
  font-weight:700;
  line-height:1.3;
  letter-spacing:-0.012em;
}
.fp-h4{
  margin:0 0 8px;
  font-size:19px;
  font-weight:700;
  line-height:1.35;
}
 
/* Grüner Marker hinter einzelnen Wörtern – wie auf der Startseite */
.fp-mark{
  background-image:linear-gradient(transparent 64%, var(--fp-mark) 64%);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  padding:0 .06em;
}
 
.fp-lead{
  font-size:clamp(17px, 1.6vw, 20px);
  line-height:1.6;
  color:var(--fp-ink);
  max-width:70ch;
}
.fp-section p{ max-width:72ch; }
.fp-section p:last-child{ margin-bottom:0; }
 
/* ---------- Hero ---------- */
.fp-hero{ padding-block:64px 40px; }
.fp-hero__meta{
  display:flex; flex-wrap:wrap; gap:10px 26px;
  margin-top:26px; padding-top:22px;
  border-top:1px solid var(--fp-line);
  font-size:15px; font-weight:600; color:var(--fp-muted);
}
 
/* ---------- Video ---------- */
.fp-video{
  position:relative;
  max-width:760px;          /* kompaktere Einbindung */
  aspect-ratio:16/9;
  /* Dasselbe Bild als Hintergrund: falls das Theme dem <img> Ecken
     rundet, schaut hier das Motiv durch statt einer dunklen Fläche. */
  background:#0d100e url("/assets/bilder/referenz_fassadenreinigung-bielefeld_thumbnail.webp") center/cover no-repeat;
  overflow:hidden;
}
/* Design-Tokens */
.fp-video,
.fp-video__facade,
.fp-video__poster,
.fp-video iframe{ border-radius:0 !important; }
.fp-video iframe,.fp-video video{
  position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover;
}
/* Klick-zum-Laden-Fassade */
.fp-video__facade{
  position:absolute; inset:0;
  width:100%; height:100%; padding:0; margin:0;
  border:0; cursor:pointer;
  background:#0d100e url("/assets/bilder/referenz_fassadenreinigung-bielefeld_thumbnail.webp") center/cover no-repeat;
  display:block; overflow:hidden;
  font-family:inherit; color:#fff;
  -webkit-appearance:none; appearance:none;
}
.fp-video__poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  transition:transform .4s ease, filter .25s ease;
}
.fp-video__facade::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(2,1,1,.10) 0%, rgba(2,1,1,.05) 45%, rgba(2,1,1,.62) 100%);
}
.fp-video__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:2;
  width:86px; height:86px; border-radius:50%;
  background:var(--fp-green);
  box-shadow:0 6px 26px rgba(0,0,0,.35);
  display:grid; place-items:center;
  transition:transform .2s ease, background-color .2s ease;
}
.fp-video__play svg{ width:32px; height:32px; margin-left:5px; fill:#fff; }
.fp-video__hint{
  position:absolute; left:0; right:0; bottom:22px; z-index:2;
  padding-inline:24px; text-align:center;
  font-size:16px; font-weight:700; line-height:1.45;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.fp-video__hint small{ font-size:13.5px; font-weight:500; opacity:.85; }
.fp-video__facade:hover .fp-video__play,
.fp-video__facade:focus-visible .fp-video__play{
  transform:translate(-50%,-50%) scale(1.07);
  background:var(--fp-green-dark);
}
.fp-video__facade:hover .fp-video__poster{ transform:scale(1.02); }
.fp-video__facade:focus-visible{ outline:3px solid var(--fp-green); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .fp-video__poster,.fp-video__play{ transition:none; }
  .fp-video__facade:hover .fp-video__poster{ transform:none; }
  .fp-video__facade:hover .fp-video__play{ transform:translate(-50%,-50%); }
}
@media (max-width:520px){
  .fp-video__play{ width:66px; height:66px; }
  .fp-video__play svg{ width:26px; height:26px; }
  .fp-video__hint{ font-size:14.5px; bottom:16px; }
  .fp-video__hint small{ font-size:12.5px; }
}
.fp-caption{
  margin:12px 0 0;
  font-size:14.5px; line-height:1.5; color:var(--fp-muted);
}
 
/* ---------- Video + Übersicht nebeneinander ---------- */
.fp-videorow{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:44px;
  align-items:start;
}
.fp-videorow .fp-video{ max-width:none; }
 
.fp-overview{
  border-top:3px solid var(--fp-green);
  padding-top:20px;
}
.fp-overview__title{
  margin:0 0 16px;
  font-size:16px; font-weight:800; line-height:1.3;
  letter-spacing:-0.012em; color:var(--fp-ink);
}
.fp-overview__list{ margin:0; }
.fp-overview__list dt{
  font-size:13px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase;
  color:var(--fp-green);
}
.fp-overview__list dd{
  margin:2px 0 0; padding-bottom:13px;
  font-size:16px; font-weight:600; line-height:1.45;
  border-bottom:1px solid var(--fp-line);
}
.fp-overview__list dd + dt{ margin-top:13px; }
.fp-overview__list dd:last-of-type{ border-bottom:0; padding-bottom:0; }
 
/* ---------- Kennzahlen ---------- */
.fp-facts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--fp-line);
  border:1px solid var(--fp-line);
  border-radius:6px;
  overflow:hidden;
}
.fp-fact{ background:var(--fp-white); padding:26px 22px; }
.fp-fact__value{
  font-size:clamp(28px, 3.4vw, 40px); font-weight:800; line-height:1;
  letter-spacing:-0.03em; color:var(--fp-ink);
}
.fp-fact__value small{ font-size:.5em; font-weight:700; margin-left:3px; letter-spacing:0; }
.fp-fact__label{ margin-top:9px; font-size:14.5px; font-weight:600; color:var(--fp-muted); }
 
.fp-figure{ margin:0; }
 
/* ---------- Zweispalter Text/Bild ---------- */
.fp-split{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
.fp-split--reverse .fp-split__media{ order:-1; }
 
/* Sektion, die die volle Spaltenbreite ausnutzt */
.fp-section--full p{ max-width:none; }
.fp-section--full .fp-check{
  max-width:none;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 44px;
}
 
/* ---------- Checkliste ---------- */
.fp-check{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:14px; max-width:70ch; }
.fp-check li{ position:relative; padding-left:38px; font-size:17px; }
.fp-check li::before{
  content:""; position:absolute; left:0; top:2px;
  width:24px; height:24px; border-radius:50%; background:var(--fp-mark);
}
.fp-check li::after{
  content:""; position:absolute; left:8px; top:9px;
  width:8px; height:4px; border-left:2.5px solid var(--fp-green-dark); border-bottom:2.5px solid var(--fp-green-dark);
  transform:rotate(-45deg);
}
 
/* ---------- FAQ ---------- */
.fp-faq{ margin-top:34px; border-top:1px solid var(--fp-line); }
.fp-faq details{ border-bottom:1px solid var(--fp-line); }
.fp-faq summary{
  cursor:pointer; list-style:none; padding:22px 44px 22px 0; position:relative;
  font-size:18.5px; font-weight:700; line-height:1.4;
}
.fp-faq summary::-webkit-details-marker{ display:none; }
.fp-faq summary::after{
  content:""; position:absolute; right:6px; top:50%;
  width:11px; height:11px; margin-top:-8px;
  border-right:2.5px solid var(--fp-green); border-bottom:2.5px solid var(--fp-green);
  transform:rotate(45deg); transition:transform .2s ease;
}
.fp-faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; }
.fp-faq details p{ margin:0 0 22px; font-size:16.5px; color:#26302a; }
@media (prefers-reduced-motion: reduce){ .fp-faq summary::after{ transition:none; } }
 
.fp-section--headonly{ padding-bottom:26px; }
 
/* ---------- Responsive ---------- */
@media (max-width:900px){
  .fp-videorow{ grid-template-columns:1fr; gap:34px; }
  .fp-videorow .fp-video{ max-width:760px; }
  .fp-section--full .fp-check{ grid-template-columns:1fr; gap:14px; }
  .fp-split{ grid-template-columns:1fr; gap:32px; }
  .fp-split--reverse .fp-split__media{ order:0; }
  .fp-facts{ grid-template-columns:repeat(2,1fr); }
  .fp-section{ padding-block:54px; }
}
@media (max-width:520px){
  .fp-facts{ grid-template-columns:1fr; }
  .fp-hero{ padding-block:44px 30px; }
}
/* Design-Tokens */
.fp-page{
  --fp-green:        #00ab32;   /* Primärfarbe */
  --fp-green-dark:   #008f2a;   /* Hover / Links */
  --fp-mark:         #c9f0d4;   /* Marker hinter Überschriften und Häkchen-Punkte */
  --fp-ink:          #020101;   /* Text / Überschriften */
  --fp-white:        #ffffff;
  --fp-soft:         #f4f6f4;   /* ruhiger Sektionshintergrund */
  --fp-line:         #90909040; /* Trennlinien */
  --fp-muted:        #5b5f5c;
 
  --fp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
 
  --fp-wrap: 1250px;
  --fp-gap: 24px;
}
 
/* ---------- Reset / Grundlagen ---------- */
*,*::before,*::after{ box-sizing:border-box; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
a{ color:var(--fp-green-dark); }
 
.fp-wrap{ width:100%; max-width:var(--fp-wrap); margin-inline:auto; padding-inline:20px; }
.fp-section{ padding-block:72px; }
.fp-section--soft{ background:var(--fp-soft); }
.fp-section--tight{ padding-block:48px; }
 
/* ---------- Überschriften-System (Website-Stil) ---------- */
 
/* Eyebrow: grüne Versalien mit vorangestelltem Strich */
.fp-eyebrow{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 18px;
  font-size:15px;
  font-weight:700;
  letter-spacing:1.6px;
  line-height:1.3;
  text-transform:uppercase;
  color:var(--fp-green);
}
.fp-eyebrow::before{
  content:"";
  flex:0 0 auto;
  width:44px;
  height:3px;
  background:var(--fp-green);
}
 
/* H1 / H2 – Inter 700–800, enge Laufweite, 1.15em Zeilenhöhe */
.fp-h1,.fp-h2{
  margin:0 0 22px;
  font-weight:800;
  line-height:1.13;
  letter-spacing:-0.022em;
  color:var(--fp-ink);
  text-wrap:balance;
}
.fp-h1{ font-size:clamp(34px, 6.2vw, 62px); }
.fp-h2{ font-size:clamp(28px, 4.4vw, 46px); }
 
.fp-h3{
  margin:0 0 12px;
  font-size:clamp(21px, 2.4vw, 26px);
  font-weight:700;
  line-height:1.3;
  letter-spacing:-0.012em;
}
.fp-h4{
  margin:0 0 8px;
  font-size:19px;
  font-weight:700;
  line-height:1.35;
}
 
/* Grüner Marker hinter einzelnen Wörtern – wie auf der Startseite */
.fp-mark{
  background-image:linear-gradient(transparent 64%, var(--fp-mark) 64%);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  padding:0 .06em;
}
 
.fp-lead{
  font-size:clamp(17px, 1.6vw, 20px);
  line-height:1.6;
  color:var(--fp-ink);
  max-width:70ch;
}
.fp-section p{ max-width:72ch; }
.fp-section p:last-child{ margin-bottom:0; }
 
/* ---------- Hero ---------- */
.fp-hero{ padding-block:64px 40px; }
.fp-hero__meta{
  display:flex; flex-wrap:wrap; gap:10px 26px;
  margin-top:26px; padding-top:22px;
  border-top:1px solid var(--fp-line);
  font-size:15px; font-weight:600; color:var(--fp-muted);
}
 
/* ---------- Video ---------- */
.fp-video{
  position:relative;
  max-width:760px;          /* kompaktere Einbindung */
  aspect-ratio:16/9;
  background:#0d100e;
  border-radius:0;
  overflow:hidden;
}
.fp-video iframe,.fp-video video{
  position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover;
}
/* Klick-zum-Laden-Fassade */
.fp-video__facade{
  position:absolute; inset:0;
  width:100%; height:100%; padding:0; margin:0;
  border:0; cursor:pointer; background:#0d100e;
  display:block; overflow:hidden;
  font-family:inherit; color:#fff;
  -webkit-appearance:none; appearance:none;
}
.fp-video__poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  transition:transform .4s ease, filter .25s ease;
}
.fp-video__facade::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(2,1,1,.10) 0%, rgba(2,1,1,.05) 45%, rgba(2,1,1,.62) 100%);
}
.fp-video__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:2;
  width:86px; height:86px; border-radius:50%;
  background:var(--fp-green);
  box-shadow:0 6px 26px rgba(0,0,0,.35);
  display:grid; place-items:center;
  transition:transform .2s ease, background-color .2s ease;
}
.fp-video__play svg{ width:32px; height:32px; margin-left:5px; fill:#fff; }
.fp-video__hint{
  position:absolute; left:0; right:0; bottom:22px; z-index:2;
  padding-inline:24px; text-align:center;
  font-size:16px; font-weight:700; line-height:1.45;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.fp-video__hint small{ font-size:13.5px; font-weight:500; opacity:.85; }
.fp-video__facade:hover .fp-video__play,
.fp-video__facade:focus-visible .fp-video__play{
  transform:translate(-50%,-50%) scale(1.07);
  background:var(--fp-green-dark);
}
.fp-video__facade:hover .fp-video__poster{ transform:scale(1.02); }
.fp-video__facade:focus-visible{ outline:3px solid var(--fp-green); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .fp-video__poster,.fp-video__play{ transition:none; }
  .fp-video__facade:hover .fp-video__poster{ transform:none; }
  .fp-video__facade:hover .fp-video__play{ transform:translate(-50%,-50%); }
}
@media (max-width:520px){
  .fp-video__play{ width:66px; height:66px; }
  .fp-video__play svg{ width:26px; height:26px; }
  .fp-video__hint{ font-size:14.5px; bottom:16px; }
  .fp-video__hint small{ font-size:12.5px; }
}
.fp-caption{
  margin:12px 0 0;
  font-size:14.5px; line-height:1.5; color:var(--fp-muted);
}
 
/* ---------- Video + Übersicht nebeneinander ---------- */
.fp-videorow{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:44px;
  align-items:start;
}
.fp-videorow .fp-video{ max-width:none; }
 
.fp-overview{
  border-top:3px solid var(--fp-green);
  padding-top:20px;
}
.fp-overview__title{
  margin:0 0 16px;
  font-size:16px; font-weight:800; line-height:1.3;
  letter-spacing:-0.012em; color:var(--fp-ink);
}
.fp-overview__list{ margin:0; }
.fp-overview__list dt{
  font-size:13px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase;
  color:var(--fp-green);
}
.fp-overview__list dd{
  margin:2px 0 0; padding-bottom:13px;
  font-size:16px; font-weight:600; line-height:1.45;
  border-bottom:1px solid var(--fp-line);
}
.fp-overview__list dd + dt{ margin-top:13px; }
.fp-overview__list dd:last-of-type{ border-bottom:0; padding-bottom:0; }
 
/* ---------- Kennzahlen ---------- */
.fp-facts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--fp-line);
  border:1px solid var(--fp-line);
  border-radius:6px;
  overflow:hidden;
}
.fp-fact{ background:var(--fp-white); padding:26px 22px; }
.fp-fact__value{
  font-size:clamp(28px, 3.4vw, 40px); font-weight:800; line-height:1;
  letter-spacing:-0.03em; color:var(--fp-ink);
}
.fp-fact__value small{ font-size:.5em; font-weight:700; margin-left:3px; letter-spacing:0; }
.fp-fact__label{ margin-top:9px; font-size:14.5px; font-weight:600; color:var(--fp-muted); }
 
.fp-figure{ margin:0; }
 
/* ---------- Zweispalter Text/Bild ---------- */
.fp-split{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
.fp-split--reverse .fp-split__media{ order:-1; }
 
/* Sektion, die die volle Spaltenbreite ausnutzt */
.fp-section--full p{ max-width:none; }
.fp-section--full .fp-check{
  max-width:none;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 44px;
}
 
/* ---------- Checkliste ---------- */
.fp-check{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:14px; max-width:70ch; }
.fp-check li{ position:relative; padding-left:38px; font-size:17px; }
.fp-check li::before{
  content:""; position:absolute; left:0; top:2px;
  width:24px; height:24px; border-radius:50%; background:var(--fp-mark);
}
.fp-check li::after{
  content:""; position:absolute; left:8px; top:9px;
  width:8px; height:4px; border-left:2.5px solid var(--fp-green-dark); border-bottom:2.5px solid var(--fp-green-dark);
  transform:rotate(-45deg);
}
 
/* ---------- FAQ ---------- */
.fp-faq{ margin-top:34px; border-top:1px solid var(--fp-line); }
.fp-faq details{ border-bottom:1px solid var(--fp-line); }
.fp-faq summary{
  cursor:pointer; list-style:none; padding:22px 44px 22px 0; position:relative;
  font-size:18.5px; font-weight:700; line-height:1.4;
}
.fp-faq summary::-webkit-details-marker{ display:none; }
.fp-faq summary::after{
  content:""; position:absolute; right:6px; top:50%;
  width:11px; height:11px; margin-top:-8px;
  border-right:2.5px solid var(--fp-green); border-bottom:2.5px solid var(--fp-green);
  transform:rotate(45deg); transition:transform .2s ease;
}
.fp-faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; }
.fp-faq details p{ margin:0 0 22px; font-size:16.5px; color:#26302a; }
@media (prefers-reduced-motion: reduce){ .fp-faq summary::after{ transition:none; } }
 
.fp-section--headonly{ padding-bottom:26px; }
 
/* ---------- Responsive ---------- */
@media (max-width:900px){
  .fp-videorow{ grid-template-columns:1fr; gap:34px; }
  .fp-videorow .fp-video{ max-width:760px; }
  .fp-section--full .fp-check{ grid-template-columns:1fr; gap:14px; }
  .fp-split{ grid-template-columns:1fr; gap:32px; }
  .fp-split--reverse .fp-split__media{ order:0; }
  .fp-facts{ grid-template-columns:repeat(2,1fr); }
  .fp-section{ padding-block:54px; }
}
@media (max-width:520px){
  .fp-facts{ grid-template-columns:1fr; }
  .fp-hero{ padding-block:44px 30px; }
}