/*
 * CF Über mich v5.28.3
 * Zweck: Layout/CSS im Theme, Inhalte im WordPress-HTML-Editor.
 * Lädt nur auf /ueber-mich/ bzw. Template CF Über mich Story.
 */
.cf-about-clean{
  --cf-about-blue:#0b57d0;
  --cf-about-green:#34a853;
  --cf-about-yellow:#f9ab00;
  --cf-about-red:#ea4335;
  --cf-about-dark:#101b35;
  --cf-about-text:#2b3650;
  --cf-about-border:#dfe7f2;
  color:var(--cf-about-text);
}
.cf-about-clean,
.cf-about-clean *{box-sizing:border-box;}
.cf-about-clean img{display:block;max-width:100%;height:auto;}
.cf-about-clean-page{
  background:linear-gradient(135deg,#eef5ff 0%,#ffffff 48%,#eefaf2 100%);
  padding:48px 18px 72px;
}
.cf-about-clean-wrap{
  width:min(100%,1500px);
  margin:0 auto;
  background:#fff;
  border:1px solid var(--cf-about-border,#dfe7f2);
  border-radius:28px;
  box-shadow:0 24px 70px rgba(15,35,70,.10);
  padding:52px 44px 58px;
  overflow:hidden;
}
.cf-about-editor-content > :first-child{margin-top:0;}
.cf-about-editor-content > :last-child{margin-bottom:0;}
.cf-about-clean-hero{
  text-align:center;
  max-width:920px;
  margin:0 auto 56px;
}
.cf-about-clean-kicker{
  color:var(--cf-about-blue);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:0 0 14px;
}
.cf-about-clean-hero h1{
  color:var(--cf-about-dark);
  font-size:clamp(42px,5vw,66px);
  line-height:1.06;
  letter-spacing:-.04em;
  margin:0 0 22px;
}
.cf-about-clean-lead{
  font-size:clamp(18px,2vw,24px);
  line-height:1.55;
  max-width:760px;
  margin:0 auto;
}
.cf-about-clean-timeline{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
  margin:30px 0 64px;
}
.cf-about-clean-timeline::before{
  content:"";
  position:absolute;
  top:44px;
  left:8%;
  right:8%;
  height:2px;
  border-top:2px dotted #9fc2ff;
  z-index:0;
}
.cf-about-clean-step{position:relative;z-index:1;min-width:0;}
.cf-about-clean-year{
  text-align:center;
  font-weight:900;
  color:var(--cf-about-blue);
  margin:0 0 14px;
}
.cf-about-clean-dot{
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--cf-about-blue);
  margin:0 auto 28px;
  box-shadow:0 0 0 8px #e8f0fe;
}
.cf-about-clean-step:nth-child(3) .cf-about-clean-year,
.cf-about-clean-step:nth-child(3) .cf-about-clean-title{color:var(--cf-about-green);}
.cf-about-clean-step:nth-child(3) .cf-about-clean-dot{background:var(--cf-about-green);box-shadow:0 0 0 8px #e7f5ed;}
.cf-about-clean-step:nth-child(4) .cf-about-clean-year,
.cf-about-clean-step:nth-child(4) .cf-about-clean-title{color:var(--cf-about-yellow);}
.cf-about-clean-step:nth-child(4) .cf-about-clean-dot{background:var(--cf-about-yellow);box-shadow:0 0 0 8px #fff4db;}
.cf-about-clean-card{min-height:100%;}
.cf-about-clean-graphic{
  background:linear-gradient(145deg,#eef6ff,#ffffff);
  border-radius:16px;
  height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 28px;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(15,35,70,.06);
}
.cf-about-clean-graphic img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  border-radius:16px;
}
.cf-about-clean-title{
  color:var(--cf-about-blue);
  font-size:24px;
  line-height:1.2;
  margin:0 0 14px;
}
.cf-about-clean-card p{
  margin:0;
  line-height:1.75;
  font-size:16px;
}
.cf-about-clean-quote{
  max-width:1180px;
  margin:0 auto 64px;
  padding:34px 42px;
  background:linear-gradient(135deg,#eef6ff,#ffffff);
  border:1px solid #dbe7fb;
  border-radius:22px;
  box-shadow:0 18px 45px rgba(15,35,70,.06);
}
.cf-about-clean-quote blockquote{
  margin:0 0 14px;
  color:var(--cf-about-dark);
  font-size:clamp(24px,3vw,38px);
  line-height:1.15;
  font-weight:900;
  letter-spacing:-.03em;
}
.cf-about-clean-quote p{
  margin:0;
  font-size:18px;
  line-height:1.7;
}
.cf-about-clean-values{
  margin:0 -44px;
  padding:62px 44px;
  background:linear-gradient(180deg,#f6faff,#ffffff);
}
.cf-about-clean-section-head{
  text-align:center;
  max-width:760px;
  margin:0 auto 36px;
}
.cf-about-clean-section-head span{
  color:var(--cf-about-blue);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.cf-about-clean-section-head h2{
  color:var(--cf-about-dark);
  font-size:clamp(30px,4vw,46px);
  line-height:1.12;
  margin:12px 0 0;
}
.cf-about-clean-value-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px;
}
.cf-about-clean-value{
  background:#fff;
  border:1px solid #e2eaf6;
  border-radius:20px;
  padding:30px 22px;
  text-align:center;
  box-shadow:0 18px 45px rgba(15,35,70,.06);
}
.cf-about-clean-icon{
  width:74px;
  height:74px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 20px;
  color:#fff;
  font-size:30px;
  font-weight:900;
}
.cf-about-clean-value h3{
  margin:0 0 14px;
  font-size:20px;
  line-height:1.2;
}
.cf-about-clean-value p{margin:0;line-height:1.7;}
.cf-about-clean-partner{
  margin-top:58px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:38px;
  align-items:center;
}
.cf-about-clean-partner h2{
  color:var(--cf-about-dark);
  font-size:clamp(32px,4vw,52px);
  line-height:1.08;
  margin:0 0 20px;
}
.cf-about-clean-partner p{
  font-size:18px;
  line-height:1.7;
  margin:0 0 18px;
}
.cf-about-clean-proof{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:24px;
  align-items:center;
}
.cf-about-clean-google-badge{
  overflow:hidden;
  background:#fff;
  border:1px solid #dbe5f2;
  border-radius:18px;
  padding:28px 22px;
  text-align:center;
  box-shadow:0 18px 45px rgba(15,35,70,.08);
}
.cf-about-clean-google-word{
  margin:0 0 14px;
  font-size:32px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.08em;
}
.cf-about-clean-google-word span:nth-child(1),
.cf-about-clean-google-word span:nth-child(4){color:#4285f4;}
.cf-about-clean-google-word span:nth-child(2),
.cf-about-clean-google-word span:nth-child(6){color:#ea4335;}
.cf-about-clean-google-word span:nth-child(3){color:#fbbc04;}
.cf-about-clean-google-word span:nth-child(5){color:#34a853;}
.cf-about-clean-google-badge strong{
  display:block;
  color:#5f6368;
  font-size:22px;
  margin:0 0 8px;
}
.cf-about-clean-google-badge small{
  display:block;
  background:#5f6368;
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:12px;
  margin:18px -22px -28px;
}
.cf-about-clean-checks{
  list-style:none!important;
  margin:0!important;
  padding:0!important;
}
.cf-about-clean-checks li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin:0 0 14px;
  font-weight:700;
  color:var(--cf-about-dark);
}
.cf-about-clean-checks li::before{
  content:"✓";
  flex:0 0 26px;
  width:26px;
  height:26px;
  border-radius:50%;
  background:#e8f0fe;
  color:var(--cf-about-blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}
.cf-about-clean-claim{
  margin-top:56px;
  background:linear-gradient(135deg,#eef6ff,#ffffff);
  border:1px solid #e2eaf6;
  border-radius:22px;
  padding:44px;
  display:grid;
  grid-template-columns:1.18fr .82fr;
  gap:36px;
  align-items:center;
}
.cf-about-clean-claim h2{
  color:var(--cf-about-dark);
  font-size:clamp(32px,4vw,52px);
  line-height:1.08;
  margin:0 0 20px;
}
.cf-about-clean-claim p{
  font-size:18px;
  line-height:1.7;
  margin:0 0 28px;
}
.cf-about-clean-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--cf-about-green);
  color:#fff!important;
  text-decoration:none;
  font-weight:800;
  padding:15px 28px;
  border-radius:10px;
  box-shadow:0 12px 24px rgba(52,168,83,.24);
}
.cf-about-clean-claim-graphic img{width:100%;border-radius:16px;}
@media(max-width:1180px){
  .cf-about-clean-timeline{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cf-about-clean-timeline::before{display:none;}
  .cf-about-clean-value-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cf-about-clean-partner,
  .cf-about-clean-proof,
  .cf-about-clean-claim{grid-template-columns:1fr;}
}
@media(max-width:680px){
  .cf-about-clean-page{padding:24px 10px 48px;}
  .cf-about-clean-wrap{border-radius:22px;padding:34px 18px 42px;}
  .cf-about-clean-timeline,
  .cf-about-clean-value-grid{grid-template-columns:1fr;}
  .cf-about-clean-year{text-align:left;}
  .cf-about-clean-dot{margin:0 0 20px;}
  .cf-about-clean-graphic{height:240px;}
  .cf-about-clean-values{margin:0 -18px;padding:46px 18px;}
  .cf-about-clean-quote,
  .cf-about-clean-claim{padding:28px 22px;}
}


/* v5.29.2 Werte-Icons: konsistente Symbolsprache
 * Änderung nur im Wertebereich der Über-mich-Seite:
 * - Persönliche Betreuung: Handschlag statt Punkt
 * - Nachhaltige Ergebnisse: weißer Pfeil ohne blaues Quadrat/Emoji-Hintergrund
 */
.cf-about-clean-value-grid .cf-about-clean-value:nth-child(1) .cf-about-clean-icon,
.cf-about-clean-value-grid .cf-about-clean-value:nth-child(4) .cf-about-clean-icon{
  font-size:0!important;
  line-height:0!important;
  position:relative;
}

.cf-about-clean-value-grid .cf-about-clean-value:nth-child(1) .cf-about-clean-icon::before,
.cf-about-clean-value-grid .cf-about-clean-value:nth-child(4) .cf-about-clean-icon::before{
  content:"";
  display:block;
  width:42px;
  height:42px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

.cf-about-clean-value-grid .cf-about-clean-value:nth-child(1) .cf-about-clean-icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='white' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 37l11-11c3-3 8-3 11 0l3 3'/%3E%3Cpath d='M56 37L45 26c-3-3-8-3-11 0l-9 9c-2 2-2 5 0 7s5 2 7 0l5-5'/%3E%3Cpath d='M29 42l7 7c2 2 5 2 7 0l8-8'/%3E%3Cpath d='M17 39l10 10'/%3E%3Cpath d='M23 33l13 13'/%3E%3C/svg%3E");
}

.cf-about-clean-value-grid .cf-about-clean-value:nth-child(4) .cf-about-clean-icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='white' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 45l15-15 10 10 16-22'/%3E%3Cpath d='M40 18h13v13'/%3E%3C/svg%3E");
}


/* v5.29.8 Roadmap-Bilder: object-fit contain verhindert Beschnitt der neuen Querformat-Bilder. */

/* v5.30.1: Roadmap-Bilder einheitlich mit runden Ecken darstellen */
.cf-about-clean .cf-about-clean-graphic{
  border-radius:16px;
  overflow:hidden;
}
.cf-about-clean .cf-about-clean-graphic img{
  border-radius:16px;
  clip-path:inset(0 round 16px);
}

/* v5.32.0 Roadmap-Bilder: finale personalisierte 16:9-Grafiken ohne Verzerrung.
 * Zweck: Desktop und Mobile nutzen ein stabiles Seitenverhältnis; die 1536x864px-Bilder
 * werden vollflächig, scharf und mit konsistenten runden Ecken dargestellt.
 */
.cf-about-clean .cf-about-clean-graphic{
  height:auto;
  aspect-ratio:16/9;
  background:#eef6ff;
}
.cf-about-clean .cf-about-clean-graphic img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
@media(max-width:680px){
  .cf-about-clean .cf-about-clean-graphic{
    height:auto!important;
    aspect-ratio:16/9!important;
  }
  .cf-about-clean .cf-about-clean-graphic img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
  }
}

/* v5.33.5 Wertebereich: CSS-only Layout für 6 Vorteile als kompaktes 2x3-Grid auf Mobile.
 * Inhalt wird bewusst im WordPress-Editor gepflegt, nicht per Theme-Filter injiziert.
 */
.cf-about-clean-value-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.cf-about-clean-value-grid .cf-about-clean-value:nth-child(1) .cf-about-clean-icon{background:var(--cf-about-blue);}
.cf-about-clean-value-grid .cf-about-clean-value:nth-child(2) .cf-about-clean-icon{background:var(--cf-about-green);}
.cf-about-clean-value-grid .cf-about-clean-value:nth-child(3) .cf-about-clean-icon{background:var(--cf-about-yellow);}
.cf-about-clean-value-grid .cf-about-clean-value:nth-child(4) .cf-about-clean-icon{background:var(--cf-about-red);}
.cf-about-clean-value-grid .cf-about-clean-value:nth-child(5) .cf-about-clean-icon{background:var(--cf-about-blue);}
.cf-about-clean-value-grid .cf-about-clean-value:nth-child(6) .cf-about-clean-icon{background:var(--cf-about-dark);}

@media(max-width:680px){
  .cf-about-clean-values{
    margin:0 -18px!important;
    padding:38px 14px!important;
  }
  .cf-about-clean-values .cf-about-clean-section-head{
    margin-bottom:24px!important;
  }
  .cf-about-clean-values .cf-about-clean-section-head span{
    font-size:12px!important;
    letter-spacing:.07em!important;
  }
  .cf-about-clean-values .cf-about-clean-section-head h2{
    font-size:32px!important;
    line-height:1.1!important;
  }
  .cf-about-clean-value-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
  .cf-about-clean-value{
    min-height:100%!important;
    border-radius:18px!important;
    padding:18px 10px 16px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    box-shadow:0 12px 28px rgba(15,35,70,.055)!important;
  }
  .cf-about-clean-icon{
    width:52px!important;
    height:52px!important;
    margin:0 auto 12px!important;
    font-size:22px!important;
  }
  .cf-about-clean-value-grid .cf-about-clean-value:nth-child(1) .cf-about-clean-icon::before,
  .cf-about-clean-value-grid .cf-about-clean-value:nth-child(4) .cf-about-clean-icon::before{
    width:30px!important;
    height:30px!important;
  }
  .cf-about-clean-value h3{
    font-size:16px!important;
    line-height:1.15!important;
    margin:0 0 8px!important;
  }
  .cf-about-clean-value p{
    font-size:13.5px!important;
    line-height:1.5!important;
    margin:0!important;
  }
}