/* =====================================================================
   Braunschweiger Schlüsselfuchs — reviews.css (sf-rev__)
   Uses tokens from main.css. Element names avoid the home-page
   review block classes (head, intro, card, stars, body, meta, ava ...).
   ===================================================================== */

/* ---------- Hero ---------- */
.sf-rev__hero { background: var(--sf-ink); padding: 54px 0 56px; position: relative; overflow: hidden; }
@media (min-width: 1025px) {
  .sf-rev__hero::after { content: ""; position: absolute; right: -80px; top: 0; bottom: 0; width: 320px; background: var(--sf-green); opacity: 0.1; transform: skewX(-18deg); pointer-events: none; }
}
.sf-rev__hero .sf-wrap { position: relative; z-index: 1; }
.sf-rev__crumbs { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; font-size: 14px; color: var(--sf-on-dark); }
.sf-rev__crumbs a { color: var(--sf-white); font-weight: 600; transition: color 0.3s ease; }
.sf-rev__crumbs a:hover, .sf-rev__crumbs a:focus-visible { color: var(--sf-green); text-decoration: underline; }
.sf-rev__crumbs-sep { opacity: 0.5; }
.sf-rev__hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.sf-rev__hero-text, .sf-rev__score { min-width: 0; }
.sf-rev__kicker { display: inline-block; padding-bottom: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--sf-green); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-white); }
.sf-rev__title { font-family: var(--sf-head); font-size: clamp(28px, 3.6vw, 46px); line-height: 1.2; font-weight: 700; color: #fff; margin-bottom: 18px; }
.sf-rev__title em { font-style: normal; color: var(--sf-green); }
.sf-rev__sub { max-width: 640px; font-size: 17px; line-height: 1.7; color: var(--sf-on-dark); }
.sf-rev__score { padding: 30px 32px; background: var(--sf-ink-2); border: 1px solid rgba(255, 255, 255, 0.1); border-left: 3px solid var(--sf-green); border-radius: var(--sf-r); }
.sf-rev__score-stars { display: block; font-size: 26px; line-height: 1; letter-spacing: 4px; color: var(--sf-green); margin-bottom: 12px; }
.sf-rev__score-line { display: block; font-size: 16px; color: var(--sf-on-dark); }
.sf-rev__score-line strong { font-family: var(--sf-head); font-size: 22px; color: #fff; }
.sf-rev__stats { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.sf-rev__stat { display: flex; flex-direction: column; min-width: 0; }
.sf-rev__stat-value { font-family: var(--sf-head); font-size: 28px; font-weight: 700; line-height: 1; color: #fff; }
.sf-rev__stat-label { margin-top: 6px; font-size: 13px; color: var(--sf-on-dark); }

/* ---------- Review list ---------- */
.sf-rev__main { padding: 80px 0 90px; background: var(--sf-white); }
.sf-rev__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.sf-rev__tile { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 32px 30px; background: var(--sf-panel); border: 1px solid transparent; border-radius: var(--sf-r); transition: box-shadow var(--sf-ease), border-color var(--sf-ease), background-color var(--sf-ease); }
.sf-rev__tile:hover { background: var(--sf-white); border-color: var(--sf-green); box-shadow: var(--sf-sh); }
.sf-rev__tile > * { min-width: 0; }
.sf-rev__tile-top { display: flex; align-items: center; gap: 14px; }
.sf-rev__letter { display: block; flex: 0 0 auto; width: 46px; height: 46px; line-height: 46px; text-align: center; border-radius: 50%; background: var(--sf-ink); color: #fff; font-family: var(--sf-head); font-size: 18px; font-weight: 700; }
.sf-rev__who { min-width: 0; }
.sf-rev__name { font-size: 18px; line-height: 1.3; color: var(--sf-ink); overflow-wrap: anywhere; }
.sf-rev__rate { display: block; margin-top: 3px; font-size: 17px; line-height: 1; letter-spacing: 2px; color: var(--sf-green); }
.sf-rev__svc { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; max-width: 100%; padding: 5px 12px; background: var(--sf-white); border: 1px solid var(--sf-line); border-radius: var(--sf-r); font-size: 14px; font-weight: 700; color: var(--sf-ink); }
.sf-rev__svc img { flex: 0 0 auto; width: 14px; height: 14px; }
.sf-rev__svc span { min-width: 0; overflow-wrap: anywhere; }
.sf-rev__text { flex-grow: 1; font-size: 16px; line-height: 1.7; color: var(--sf-text); overflow-wrap: anywhere; }

/* ---------- Pagination ---------- */
.sf-rev__pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 54px; }
.sf-rev__pbtn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; background: var(--sf-white); border: 1px solid var(--sf-line); border-radius: var(--sf-r); font-family: var(--sf-head); font-size: 15px; font-weight: 600; color: var(--sf-ink); cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.sf-rev__pbtn:hover, .sf-rev__pbtn:focus-visible { background: var(--sf-green); border-color: var(--sf-green); color: var(--sf-ink); text-decoration: none; }
.sf-rev__pbtn img { width: 16px; height: 16px; }
.sf-rev__pbtn--prev img { transform: rotate(180deg); }
.sf-rev__pnums { display: flex; align-items: center; gap: 6px; }
.sf-rev__pnum { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 6px; background: var(--sf-white); border: 1px solid var(--sf-line); border-radius: var(--sf-r); font-family: var(--sf-head); font-weight: 600; color: var(--sf-text); cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
a.sf-rev__pnum:hover, a.sf-rev__pnum:focus-visible { border-color: var(--sf-green); color: var(--sf-ink); text-decoration: none; }
.sf-rev__pnum--active { background: var(--sf-ink); border-color: var(--sf-ink); color: #fff; cursor: default; }
.sf-rev__pdots { padding: 0 4px; color: var(--sf-muted); }

/* ---------- Review form ---------- */
.sf-rev__formsec { padding: 90px 0; background: var(--sf-panel); }
.sf-rev__formbox { max-width: 760px; margin: 0 auto; padding: 44px 44px 46px; background: var(--sf-white); border: 1px solid var(--sf-line); border-radius: var(--sf-r); box-shadow: var(--sf-sh); }
.sf-rev__formhead { margin-bottom: 28px; }
.sf-rev__formtitle { margin-top: 10px; font-family: var(--sf-head); font-size: 26px; line-height: 1.35; font-weight: 700; color: var(--sf-ink); }
.sf-rev__formtitle::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 16px; background: var(--sf-green); border-radius: 2px; }
.sf-rev__formtext { margin-top: 18px; font-size: 16px; line-height: 1.7; color: var(--sf-text); }
.sf-rev__form input[type="text"], .sf-rev__form textarea { display: block; width: 100%; min-width: 0; margin-bottom: 6px; padding: 14px 16px; background: var(--sf-white); border: 1px solid var(--sf-line); border-radius: var(--sf-r); font-family: var(--sf-body); font-size: 16px; color: var(--sf-ink); transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.sf-rev__form input[type="text"]::placeholder, .sf-rev__form textarea::placeholder { color: var(--sf-muted); }
.sf-rev__form input[type="text"]:focus, .sf-rev__form textarea:focus { outline: none; border-color: var(--sf-green); box-shadow: 0 0 0 3px rgba(81, 172, 90, 0.2); }
.sf-rev__form textarea { min-height: 130px; resize: vertical; }
.sf-rev__starlabel { display: block; margin: 16px 0 6px; }
.sf-rev__starcap { display: block; margin-bottom: 6px; font-family: var(--sf-head); font-size: 15px; font-weight: 600; color: var(--sf-ink); }
.sf-rev__form .jqr_star-rating { display: inline-flex; gap: 6px; font-size: 26px; line-height: 1; cursor: pointer; }
.sf-rev__form .jqr_star-rating .fa-star, .sf-rev__form .jqr_star-rating .text-warning { color: var(--sf-green) !important; }
.sf-rev__form .jqr_error-message { margin-bottom: 8px; font-size: 14px; color: #c0392b; }
.sf-rev__form button#jqr_submit { display: block; width: 100%; margin-top: 16px; padding: 16px 30px 14px; background: var(--sf-green); border: 1px solid var(--sf-green); border-radius: var(--sf-r); font-family: var(--sf-head); font-size: 16px; font-weight: 600; color: var(--sf-ink); cursor: pointer; transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; }
.sf-rev__form button#jqr_submit:hover, .sf-rev__form button#jqr_submit:focus-visible { background: var(--sf-ink); border-color: var(--sf-ink); color: #fff; box-shadow: 0 8px 24px rgba(20, 22, 19, 0.25); }

/* ---------- CTA (light, sits above the dark footer) ---------- */
.sf-rev__cta { padding: 80px 0; background: var(--sf-white); }
.sf-rev__ctabox { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 38px 44px; background: var(--sf-panel); border-left: 3px solid var(--sf-green); border-radius: var(--sf-r); }
.sf-rev__ctatext { flex: 1 1 480px; min-width: 0; }
.sf-rev__ctatitle { font-family: var(--sf-head); font-size: 24px; line-height: 1.35; font-weight: 700; color: var(--sf-ink); margin-bottom: 10px; }
.sf-rev__ctap { font-size: 16px; line-height: 1.7; color: var(--sf-text); }
.sf-rev__ctaact { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 15px; }
.sf-rev__call:hover, .sf-rev__call:focus-visible { text-decoration: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .sf-rev__hero-grid { gap: 40px; }
  .sf-rev__list { gap: 22px; }
  .sf-rev__tile { padding: 28px 24px; }
  .sf-rev__ctabox { padding: 34px 34px; gap: 30px; }
}
@media (max-width: 1024px) {
  .sf-rev__hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sf-rev__score { max-width: 520px; }
  .sf-rev__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-rev__main { padding: 64px 0 72px; }
  .sf-rev__formsec, .sf-rev__cta { padding: 70px 0; }
}
@media (max-width: 768px) {
  .sf-rev__hero { padding: 40px 0 44px; }
  .sf-rev__crumbs { margin-bottom: 20px; }
  .sf-rev__sub { font-size: 16px; }
  .sf-rev__main { padding: 52px 0 60px; }
  .sf-rev__formsec, .sf-rev__cta { padding: 56px 0; }
  .sf-rev__formbox { padding: 32px 26px 34px; }
  .sf-rev__ctabox { flex-direction: column; align-items: stretch; gap: 22px; padding: 30px 26px; }
  .sf-rev__ctatext { flex: 0 1 auto; }
  .sf-rev__ctaact { flex: 0 1 auto; width: 100%; }
  .sf-rev__ctaact .sf-btn { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .sf-rev__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .sf-rev__hero { padding: 40px 0 40px; }
  .sf-rev__score { padding: 24px 20px; }
  .sf-rev__stats { gap: 14px 24px; }
  .sf-rev__tile { padding: 26px 20px; }
  .sf-rev__text { font-size: 15px; }
  .sf-rev__formbox { padding: 26px 18px 28px; }
  .sf-rev__formtitle, .sf-rev__ctatitle { font-size: 22px; }
  .sf-rev__ctabox { padding: 26px 18px; }
  .sf-rev__ctaact { flex-direction: column; }
  .sf-rev__ctaact .sf-btn { width: 100%; flex: 0 1 auto; }
  .sf-rev__pbtn span { display: none; }
  .sf-rev__pbtn { padding: 11px 14px; }
}
@media (max-width: 375px) {
  .sf-rev__title { font-size: 26px; }
  .sf-rev__stat-value { font-size: 24px; }
  .sf-rev__pnum { min-width: 38px; height: 38px; }
  .sf-rev__form .jqr_star-rating { font-size: 24px; }
}