/* TB2B Anfrage (13.10.2026)
   Abschnitt mit Kontaktformular. Felder, Fokus und Absenden stehen in
   @section formulare (Projekt-CSS), die nummerierten Schritte in
   .kontakt-steps ebenda. Hier nur Aufbau und Flaeche.

   Weisser Grund: die Abschnitte davor und danach liegen auf --panel und
   --paper, Weiss setzt das Formular davon ab, ohne eine dritte dunkle
   Flaeche auf die Seite zu bringen. Die Formularkarte liegt auf --paper,
   damit die weissen Eingabefelder eine Kante haben. */

:is(.bklp, body) .anfrage { background: #fff; }

:is(.bklp, body) .anfrage .anfrage-raster {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 5vw, 80px);
  row-gap: 0;
  align-items: start;
}
/* Formular rechts ueber beide Zeilen, Belege links unter dem Text. */
:is(.bklp, body) .anfrage .anfrage-formular { grid-column: 2; grid-row: 1 / span 2; }
:is(.bklp, body) .anfrage .anfrage-text { grid-column: 1; grid-row: 1; }
:is(.bklp, body) .anfrage .anfrage-belege { grid-column: 1; grid-row: 2; }

:is(.bklp, body) .anfrage .anfrage-text h2 { margin-top: 16px; }
:is(.bklp, body) .anfrage .anfrage-lead {
  margin: 20px 0 0;
  max-width: 46ch;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--grey);
}

:is(.bklp, body) .anfrage .anfrage-zwischen {
  margin: 40px 0 16px;
  font-size: 1rem;
  color: var(--ink);
}

:is(.bklp, body) .anfrage .anfrage-alt {
  margin: 32px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
  font-size: 0.97rem;
  color: var(--grey);
}
:is(.bklp, body) .anfrage .anfrage-alt a {
  white-space: nowrap;
  font-weight: 600;
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
:is(.bklp, body) .anfrage .anfrage-alt a:hover { color: var(--ink); }

:is(.bklp, body) .anfrage .anfrage-formular {
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--hair);
  border-radius: var(--r-m);
  background: var(--paper);
}
:is(.bklp, body) .anfrage .anfrage-formular-titel {
  margin: 0 0 20px;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
}

:is(.bklp, body) .anfrage .anfrage-hinweis {
  margin: 12px 0 0;
  font-size: 0.88rem;
  text-align: center;
  color: var(--grey);
}

/* Belege als ein Block: oben ein dunkles Band mit Sternen und Zahl (Oliver
   13.10.2026: „make it more bold? dark blue background?“), darunter Person
   und Zitat auf Weiss (UIUX: Zitat auf weissem Grund, nicht auf dunkler Flaeche). */
:is(.bklp, body) .anfrage .anfrage-belege {
  margin: 40px 0 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: var(--r-m);
  background: #fff;
  text-align: left; /* figure/figcaption sind im Bestand zentriert */
}
:is(.bklp, body) .anfrage .anfrage-belege > * { margin-block: 0; }
:is(.bklp, body) .anfrage .anfrage-bewertung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: clamp(20px, 2.2vw, 26px) clamp(22px, 2.4vw, 30px);
  background: var(--ink);
  color: #c9d3e2;
  text-decoration: none;
}
:is(.bklp, body) .anfrage .anfrage-bewertung .tb-stars {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  line-height: 1;
}
:is(.bklp, body) .anfrage .anfrage-bewertung-text { font-size: 1.08rem; line-height: 1.4; }
:is(.bklp, body) .anfrage .anfrage-bewertung-text strong { color: #fff; font-family: var(--display); font-weight: 700; font-size: 1.25em; }
:is(.bklp, body) .anfrage .anfrage-bewertung:hover .anfrage-bewertung-text,
:is(.bklp, body) .anfrage .anfrage-bewertung:focus-visible .anfrage-bewertung-text { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
:is(.bklp, body) .anfrage .anfrage-bewertung:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

:is(.bklp, body) .anfrage .anfrage-person {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 !important;
  padding: 22px clamp(22px, 2.4vw, 30px) 12px;
  text-align: left;
}
:is(.bklp, body) .anfrage .anfrage-person img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
:is(.bklp, body) .anfrage .anfrage-person strong { display: block; font-family: var(--display); font-size: 1rem; color: var(--ink); }
:is(.bklp, body) .anfrage .anfrage-person-rolle { display: block; font-size: 0.88rem; color: var(--grey); }
:is(.bklp, body) .anfrage .anfrage-zitat { margin: 0; padding: 0 clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 28px); border: 0; background: none; }
:is(.bklp, body) .anfrage .anfrage-zitat p { margin: 0; font-size: 1rem; line-height: 1.6; font-style: normal; color: var(--ink); }

@media (max-width: 900px) {
  :is(.bklp, body) .anfrage .anfrage-raster { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 40px; }
  :is(.bklp, body) .anfrage :is(.anfrage-text, .anfrage-formular, .anfrage-belege) { grid-column: 1; grid-row: auto; }
  :is(.bklp, body) .anfrage .anfrage-belege { margin-top: 0; }
}

/* Hierarchie umgedreht (13.10.2026, Oliver: „fokus should be the right part“, „visual hierarchy is off“,
   „make it like the email newsletter cta“): Formular als dunkle Karte wie die Newsletter-Box,
   Bewertung links hell und ruhig als Beleg, Sterne gelb. */
:is(.bklp, body) .anfrage .anfrage-formular{background:var(--ink,#0b1c30) !important;border-color:var(--ink,#0b1c30) !important;color:#E7ECF5}
:is(.bklp, body) .anfrage .anfrage-formular-titel{color:#fff !important}
:is(.bklp, body) .anfrage .anfrage-formular :is(label,.wsf-label,legend){color:#E7ECF5 !important}
:is(.bklp, body) .anfrage .anfrage-formular :is(.wsf-help,.wsf-text,p,.wsf-invalid-feedback){color:#AEB9CC !important}
:is(.bklp, body) .anfrage .anfrage-formular a{color:#C7D7FF !important}
:is(.bklp, body) .anfrage .anfrage-formular :is(input[type=text],input[type=email],input[type=tel],textarea,select){background:#fff !important;border-color:transparent !important;color:#0F172A !important;border-radius:6px}
:is(.bklp, body) .anfrage .anfrage-formular :is(input,textarea)::placeholder{color:#64748B !important;opacity:1}
:is(.bklp, body) .anfrage .anfrage-formular :is(input,textarea,select,button):focus-visible{outline:2px solid #8FB0FF !important;outline-offset:2px}
:is(.bklp, body) .anfrage .anfrage-formular .anfrage-hinweis{color:#AEB9CC !important}

:is(.bklp, body) .anfrage .anfrage-belege{border-color:var(--hair,#c3c5d9) !important}
:is(.bklp, body) .anfrage .anfrage-bewertung{background:#fff !important;color:var(--grey,#434656) !important;padding:18px clamp(22px,2.4vw,30px) 14px;border-bottom:1px solid #E2E8F0;gap:4px 14px}
:is(.bklp, body) .anfrage .anfrage-bewertung .tb-stars{color:#F5B301 !important;font-size:1.05rem;letter-spacing:.12em}
:is(.bklp, body) .anfrage .anfrage-bewertung-text{font-size:.98rem;color:var(--grey,#434656) !important}
:is(.bklp, body) .anfrage .anfrage-bewertung-text strong{color:var(--ink,#0b1c30) !important;font-size:1.12em}
:is(.bklp, body) .anfrage .anfrage-bewertung:hover .anfrage-bewertung-text{color:var(--ink,#0b1c30) !important}
:is(.bklp, body) .anfrage .anfrage-bewertung:focus-visible{outline-color:var(--signal,#0052ff)}
:is(.bklp, body) .anfrage .anfrage-bewertung-trenner{margin:0 4px;opacity:.6}

/* Bewertung wie in der Vertrauensleiste (13.10.2026, Oliver: „i like these two a lot, it looks very refined“):
   Google-G, Schnitt mit gelben Sternen, darunter „Google · 45 Bewertungen ↗“. */
:is(.bklp, body) .anfrage .anfrage-bewertung{display:flex;flex-wrap:nowrap;align-items:center;gap:14px;padding:18px clamp(22px,2.4vw,30px)}
:is(.bklp, body) .anfrage .anfrage-bewertung .tb-logo{width:34px;height:34px}
:is(.bklp, body) .anfrage .anfrage-bewertung-text{display:flex;flex-direction:column;gap:2px}
:is(.bklp, body) .anfrage .anfrage-bewertung .tb-value{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:1.25rem;line-height:1.2;color:var(--ink,#0b1c30) !important}
:is(.bklp, body) .anfrage .anfrage-bewertung .tb-stars{font-size:1.15rem;letter-spacing:.06em;color:#F5B301 !important}
:is(.bklp, body) .anfrage .anfrage-bewertung .tb-caption{font-size:.92rem;color:var(--grey,#434656) !important}

/* Angebots- und Stadtseiten: Kopfbereich füllt den ersten Bildschirm, Logoleiste sitzt an der Unterkante wie auf der Startseite
   (13.10.2026, Oliver: „logo bar isn't at the bottom of the screen here“). Gleiche Werte wie body.home in projekt.css. */
body:not(.home) .bklp header.hero:has(+ .logos.proof-band){min-height:calc(100svh - 264px);justify-content:center}
body.admin-bar:not(.home) .bklp header.hero:has(+ .logos.proof-band){min-height:calc(100svh - 296px)}

/* Firmenlogo statt Portrait in der Kundenstimme (13.10.2026): nicht rund, feste Hoehe.
   max-height, weil unter 820px ".bklp img { height: auto !important }" (Projekt-CSS) die Hoehe aufhebt;
   ohne Grenze stand das Logo in Originalgroesse da und quetschte Name und Zitat auf eine Buchstabenbreite. */
:is(.bklp, body) .anfrage .anfrage-person img.anfrage-person-logo{width:auto;height:28px;max-height:28px;border-radius:0;object-fit:contain;flex:none}

/* Erfolgsmeldung nach dem Absenden (13.10.2026, Oliver: „make the contrast better for form sent“,
   „full white on green?“). WS Form rendert sie als .wsf-alert(-success): sattes Gruen, weisse Schrift, Kontrast ca. 5,3:1. */
:is(.bklp, body) .anfrage .wsf-alert,
:is(.bklp, body) .anfrage .wsf-alert-success,
:is(.bklp, body) .anfrage [class*="wsf-alert"][role="alert"],
:is(.bklp, body) .anfrage .wsf-message{
  background:#0f7a55 !important;border:0 !important;border-radius:8px;
  color:#fff !important;font-size:1rem;font-weight:500;line-height:1.55;padding:16px 18px !important}
:is(.bklp, body) .anfrage .wsf-alert *,
:is(.bklp, body) .anfrage .wsf-message *{color:#fff !important;background:transparent !important;border:0 !important}

/* Quellenhinweis zur Kundenstimme leiser in eigener Zeile (Oliver: „make this in lighter grey underneath“) */
:is(.bklp, body) .anfrage .anfrage-person-hinweis{display:block;margin-top:2px;font-size:.78rem;color:#9aa3b5}
/* Pflichtfeld-Stern sichtbar (13.10.2026, Oliver: „pflichtfeld should be in blue or easier to read“):
   WS Form faerbt ihn dunkelgrau (wsf-text-danger), auf der dunklen Karte kaum zu sehen. */
:is(.bklp, body) .anfrage .wsf-required-wrapper .wsf-text-danger{color:#8fb0ff !important;font-weight:700}