/* deine-bewertung.css — passt zu fg-/ueber-mich-Pattern */

.fg-shell { background: var(--white); }
.fg-page { color: var(--black); background: var(--white); font-family: var(--font-main); }
.fg-page * { box-sizing: border-box; }
.fg-page a { color: var(--brand); text-decoration: none; }
.fg-page a:hover { text-decoration: underline; }
.fg-page img { max-width: 100%; height: auto; display: block; }

/* HERO */
.fg-hero-wrap { background: var(--white); border-bottom: 1px solid var(--border); margin: 0 -24px; padding: 0 24px; }
.fg-hero { padding: 72px 0 56px; }
.fg-hero-inner { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 48px; align-items: flex-start; }
.fg-hero-eyebrow { display: block; font-family: var(--font-sub); font-size: 17px; color: var(--brand); margin-bottom: 18px; line-height: 1.2; }
.fg-hero-h1 { font-family: var(--font-headers); font-weight: 900; font-size: clamp(30px,4vw,52px); line-height: 1.08; color: var(--black); margin: 0 0 22px; letter-spacing: -0.02em; }
.fg-hero-h1 span { color: var(--brand); }
.fg-hero-sub { font-family: var(--font-main); font-size: 18px; line-height: 1.7; color: #4a4a4a; max-width: 660px; margin: 0 0 22px; }
.fg-hero-sub strong { color: var(--black); font-weight: 700; }
.fg-hero-proof { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }
.fg-hero-proof-stars { color: #FBBC04; font-size: 14px; letter-spacing: 0.08em; }
.fg-hero-proof-text { font-family: var(--font-main); font-size: 14px; color: #595959; }
.fg-hero-proof-text strong { color: var(--black); font-weight: 700; }
.fg-hero-btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Hero-Portrait klein, rund, freundlich (kein Quote-Strip wie ueber-mich) */
.fg-hero-portrait-wrap { position: relative; align-self: flex-start; max-width: 320px; width: 100%; }
.fg-hero-portrait { width: 220px; height: 220px; margin: 0 auto; border-radius: 50%; overflow: hidden; border: 4px solid var(--white); box-shadow: 0 14px 38px rgba(40,40,52,0.14); }
.fg-hero-portrait img { width: 100%; height: 100%; object-fit: cover; }
.fg-hero-portrait-stars { text-align: center; margin-top: 18px; color: #FBBC04; font-size: 22px; letter-spacing: 4px; line-height: 1; }
.fg-hero-portrait-cap { text-align: center; margin-top: 12px; font-family: var(--font-headers); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #767676; }

/* TRUSTBAR (rot, identisch zum ueber-mich-Pattern) */
.fg-trustbar-band { background: var(--brand); width: 100%; }
.fg-trustbar { max-width: 1040px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: center; flex-wrap: wrap; }
.fg-trustbar-item { flex: 1 1 0; min-width: 160px; max-width: 260px; text-align: center; padding: 28px 20px; border-right: 1px solid rgba(255,255,255,.2); display: flex; flex-direction: column; align-items: center; gap: 7px; }
.fg-trustbar-item:last-child { border-right: none; }
.fg-trustbar-icon svg { display: block; }
.fg-trustbar-num { font-family: var(--font-headers); font-weight: 900; font-size: 26px; color: var(--white); line-height: 1; }
.fg-trustbar-label { font-family: var(--font-main); font-size: 13px; color: rgba(255,255,255,1); line-height: 1.4; }

/* SECTION-WRAPPER (gleich wie fg-wrap) */
.fg-wrap { padding: 80px 0; }
.fg-section-bg { background: transparent; }
.fg-label { font-family: var(--font-sub); font-size: 16px; color: var(--brand); margin-bottom: 10px; display: block; }
.fg-h2 { font-family: var(--font-headers); font-weight: 900; font-size: clamp(26px,3.5vw,44px); line-height: 1.2; color: var(--black); margin: 0 0 18px; }
.fg-lead { font-family: var(--font-main); font-size: 17px; line-height: 1.7; color: #4a4a4a; max-width: 760px; margin: 0; }

/* PLATTFORM-KARTEN PRIMÄR (Google, Trustpilot, ProvenExpert) */
.fg-platforms-primary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.fg-pcard { display: flex; flex-direction: column; padding: 32px 28px; background: var(--white); border: 1px solid var(--border); border-radius: 14px; transition: border-color .2s, transform .2s, box-shadow .2s; text-decoration: none !important; }
.fg-pcard:hover { border-color: rgba(220,39,81,.40); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(40,40,52,0.08); text-decoration: none !important; }
.fg-pcard-logo { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--white); flex-shrink: 0; padding: 10px; box-sizing: border-box; }
.fg-pcard-logo svg { width: 100%; height: 100%; display: block; }
.fg-pcard-logo--google { background: #ffffff; border: 1.5px solid var(--border); }
.fg-pcard-logo--trust { background: #00B67A; }
.fg-pcard-logo--prov { background: #F39200; }
.fg-pcard-tag { font-family: var(--font-headers); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); margin: 0 0 8px; }
.fg-pcard-title { font-family: var(--font-headers); font-weight: 700; font-size: 19px; color: var(--black); margin: 0 0 12px; line-height: 1.3; }
.fg-pcard-text { font-family: var(--font-main); font-size: 15px; line-height: 1.65; color: #4a4a4a; margin: 0 0 22px; flex: 1; }
.fg-pcard-action { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-headers); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); align-self: flex-start; }
.fg-pcard-action svg { width: 14px; height: 14px; transition: transform .2s; }
.fg-pcard:hover .fg-pcard-action svg { transform: translateX(4px); }

/* SEKUNDÄR-PLATTFORMEN (11880, Facebook, Yelp) */
.fg-platforms-secondary-wrap { margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--border); }
.fg-platforms-secondary-label { display: block; text-align: center; font-family: var(--font-headers); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #767676; margin-bottom: 18px; }
.fg-platforms-secondary { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.fg-spill { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; border: 1.5px solid #d8d8de; background: var(--white); color: var(--black) !important; font-family: var(--font-headers); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none !important; transition: border-color .2s, color .2s, background .2s, transform .2s; }
.fg-spill:hover { border-color: var(--brand); color: var(--brand) !important; background: #fff8fa; text-decoration: none !important; transform: translateY(-1px); }
.fg-spill-ico { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; }
.fg-spill-ico svg { width: 100%; height: 100%; }

/* BENEFITS-GRID (wie fg-values-grid) */
.fg-benefits-intro { max-width: 760px; margin-bottom: 48px; }
.fg-benefits-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--border); border-radius: 14px; overflow: hidden; }
.fg-benefit-card { background: var(--white); padding: 36px 30px; transition: background .18s; }
.fg-benefit-card:hover { background: #f4f4f6; }
.fg-benefit-icon { margin-bottom: 16px; color: var(--brand); }
.fg-benefit-icon svg { display: block; }
.fg-benefit-title { font-family: var(--font-headers); font-weight: 700; font-size: 17px; color: var(--brand); margin: 0 0 10px; }
.fg-benefit-text { font-family: var(--font-main); font-size: 15px; line-height: 1.65; color: #4a4a4a; margin: 0; }

/* FAQ - Pattern aus ueber-mich uebernommen, weisser Hintergrund + Karten-Optik */
.fg-bw-faq { margin-top: 44px; max-width: 860px; }
.fg-bw-faq-item { background: var(--white); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; transition: border-color .2s, box-shadow .2s; overflow: hidden; }
.fg-bw-faq-item:hover { border-color: rgba(220,39,81,.30); box-shadow: 0 4px 14px rgba(40,40,52,0.06); }
.fg-bw-faq-q { width: 100%; background: var(--white); border: none; padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; cursor: pointer; font-family: var(--font-headers); font-weight: 700; font-size: 16px; color: var(--black); line-height: 1.4; transition: color .2s; }
.fg-bw-faq-q:hover, .fg-bw-faq-q:focus, .fg-bw-faq-q:active, .fg-bw-faq-q:focus-visible { background: var(--white) !important; color: var(--brand); outline: none; box-shadow: none; }
.fg-bw-faq-icon { flex-shrink: 0; color: var(--brand); transition: transform .35s cubic-bezier(.4,0,.2,1); }
.fg-bw-faq-item.fg-open .fg-bw-faq-icon { transform: rotate(45deg); }
.fg-bw-faq-item.fg-open .fg-bw-faq-q { color: var(--brand); }
.fg-bw-faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.4,0,.2,1); background: var(--white); }
.fg-bw-faq-item.fg-open .fg-bw-faq-body { grid-template-rows: 1fr; }
.fg-bw-faq-body-inner { overflow: hidden; background: var(--white); }
.fg-bw-faq-a { padding: 0 26px 22px; font-family: var(--font-main); font-size: 15px; line-height: 1.75; color: #4a4a4a; max-width: 720px; margin: 0; }

/* SOCIAL */
.fg-bw-social { text-align: center; }
.fg-bw-social-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.fg-bw-social-link { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--white); border: 1.5px solid #d8d8de; color: var(--black); transition: all .2s; text-decoration: none !important; }
.fg-bw-social-link svg { width: 18px; height: 18px; }
.fg-bw-social-link:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); text-decoration: none !important; }

/* FINAL-BAND (rot, wie fg-musiker-band aber rot statt schwarz) */
.fg-bw-final-band { background: var(--brand); width: 100%; }
.fg-bw-final { max-width: 880px; margin: 0 auto; padding: 80px 24px; text-align: center; }
.fg-bw-final-label { font-family: var(--font-sub); font-size: 17px; color: rgba(255,255,255,.85); display: block; margin-bottom: 14px; }
.fg-bw-final-h2 { font-family: var(--font-headers); font-weight: 900; font-size: clamp(26px,3.5vw,42px); color: var(--white); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 20px; }
.fg-bw-final-text { font-family: var(--font-main); font-size: 16.5px; line-height: 1.85; color: rgba(255,255,255,.92); max-width: 660px; margin: 0 auto 32px; }
.fg-bw-final-text strong { color: var(--white); font-weight: 700; }
.fg-bw-final-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* RESPONSIVE */
@media (max-width: 980px) {
  .fg-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .fg-hero-portrait-wrap { max-width: 100%; order: -1; }
  .fg-hero-portrait { margin: 0 auto; }
  .fg-platforms-primary { grid-template-columns: 1fr; }
  .fg-benefits-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .fg-hero { padding: 56px 0 44px; }
  .fg-wrap { padding: 64px 0; }
  .fg-bw-final { padding: 64px 22px; }
  .fg-trustbar-item { flex: 1 1 50%; max-width: 50%; border-right: none; border-bottom: 1px solid rgba(255,255,255,.2); }
  .fg-trustbar-item:nth-child(even) { border-right: none; }
  .fg-pcard { padding: 28px 22px; }
  .fg-bw-faq-item summary { font-size: 15px; padding: 20px 60px 20px 22px; }
}
@media (max-width: 480px) {
  .fg-hero-portrait { width: 180px; height: 180px; }
  .fg-bw-final-actions { flex-direction: column; }
  .fg-bw-final-actions a { width: 100%; }
  .fg-spill { padding: 11px 18px; font-size: 11px; }
}

/* CONTAINER (max-width wie ueber-mich, kommt sonst von ausserhalb) */
.fg-page { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.fg-trustbar-band, .fg-bw-final-band { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }

/* BUTTONS aus ueber-mich.css uebernehmen (lokal, sonst kollidieren wir nicht) */
.fg-btn { display: inline-block; font-family: var(--font-headers); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; padding: 18px 32px; border-radius: 32px; background: var(--brand); color: var(--white) !important; border: 2px solid var(--brand); transition: background .2s, color .2s, transform .15s; text-decoration: none !important; }
.fg-btn:hover { background: rgba(220,39,81,0.08); color: var(--brand) !important; border-color: var(--brand) !important; transform: translateY(-2px); }
.fg-btn-outline { background: transparent; color: var(--black) !important; border-color: #ccc; }
.fg-btn-outline:hover { background: var(--black); color: var(--white) !important; border-color: var(--black); }
.fg-btn-white { display: inline-block; font-family: var(--font-headers); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; padding: 18px 40px; border-radius: 32px; background: var(--white); color: var(--brand) !important; border: 2px solid var(--white); transition: background .2s, color .2s, transform .15s; text-decoration: none !important; }
.fg-btn-white:hover { background: rgba(255,255,255,0.12); color: var(--white) !important; border-color: rgba(255,255,255,0.7) !important; transform: translateY(-2px); }
.fg-btn-ghost-white { display: inline-block; font-family: var(--font-headers); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; padding: 18px 40px; border-radius: 32px; background: transparent; color: var(--white) !important; border: 2px solid rgba(255,255,255,.6); transition: background .2s, color .2s, transform .15s; text-decoration: none !important; }
.fg-btn-ghost-white:hover { background: var(--white); color: var(--brand) !important; transform: translateY(-2px); }

/* Helper: zentrierter Lead-Text (statt inline style) */
.fg-lead-center { margin: 0 auto !important; }