/* Bausteine der öffentlichen Produktdarstellung von BOS Select (Startseite, /info,
   /berater-anbieter, /wissen). Nur Klassen mit Präfix ps-, damit sie neben den
   seiteneigenen Stilen der Startseite (finder.html) und oeffentlich.css stehen
   können. Farben über dieselben Variablen (--lime, --ink, --line …). */
.ps-abschnitt { padding-top:46px; padding-bottom:6px; }
.ps-abschnitt > h2, .ps-kopf h2 { font-size:25px; line-height:1.25; margin-bottom:8px; }
.ps-abschnitt .ps-sub { color:var(--muted); font-size:17px; max-width:720px; margin-bottom:22px; }
.ps-mitte { text-align:center; }
.ps-mitte .ps-sub { margin-left:auto; margin-right:auto; }
.ps-eyebrow { color:var(--lime-dk); font-size:14px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; margin-bottom:8px; }

/* Kennzahlen */
.ps-zahlen { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.ps-zahl { background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px 18px; }
.ps-zahl b { display:block; font-size:27px; line-height:1.1; color:var(--ink); }
.ps-zahl span { display:block; font-size:15px; color:var(--muted); margin-top:5px; }

/* Karten allgemein */
.ps-karten { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ps-karten.vier { grid-template-columns:repeat(4,1fr); }
.ps-karten.zwei { grid-template-columns:repeat(2,1fr); }
.ps-karte { background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px 18px 16px; display:flex; flex-direction:column; }
.ps-karte h3 { font-size:17.5px; margin-bottom:6px; line-height:1.3; }
.ps-karte p { font-size:15.5px; color:var(--muted); }
.ps-karte .ps-mehr { margin-top:auto; padding-top:10px; font-weight:700; font-size:15.5px; }
.ps-karte .ps-stationen { font-size:14px; font-weight:700; color:var(--lime-dk); letter-spacing:.3px; margin-bottom:6px; text-transform:uppercase; }
a.ps-karte { color:inherit; text-decoration:none; transition:border-color .15s, box-shadow .15s; }
a.ps-karte:hover { border-color:var(--lime); box-shadow:0 4px 16px rgba(241,140,0,.15); text-decoration:none; }

/* Bildschirmansichten */
.ps-figur { margin:0; }
.ps-figur a { display:block; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; box-shadow:0 6px 22px rgba(22,26,15,.10); }
.ps-figur img { display:block; width:100%; height:auto; }
.ps-figur figcaption { font-size:15px; color:var(--muted); margin-top:9px; line-height:1.5; }
.ps-figur figcaption b { color:var(--ink); }
.ps-bilder { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:16px; }
.ps-bilder.eins { grid-template-columns:1fr; max-width:900px; }
.ps-demo-hinweis { font-size:14.5px; color:var(--muted); background:#fff; border:1px dashed var(--line); border-radius:8px; padding:9px 12px; margin-top:14px; }

/* Expertensystem */
.ps-hybrid { display:grid; grid-template-columns:1.05fr 1fr; gap:22px; align-items:start; }
.ps-liste { list-style:none; margin:0; padding:0; }
.ps-liste li { position:relative; padding:7px 0 7px 26px; font-size:16px; border-bottom:1px solid var(--line); }
.ps-liste li:last-child { border-bottom:0; }
.ps-liste li::before { content:''; position:absolute; left:4px; top:15px; width:10px; height:10px; border-radius:3px; background:var(--lime); }
.ps-nicht { background:var(--dark); color:#e8eddc; border-radius:10px; padding:18px 20px; }
.ps-nicht h3 { color:#fff; font-size:17.5px; margin-bottom:8px; }
.ps-nicht ul { margin:0 0 0 18px; font-size:15.5px; }
.ps-nicht li + li { margin-top:4px; }
.ps-nicht p { font-size:15.5px; margin-top:10px; color:#cdd6bd; }

/* Vergleichstabelle */
.ps-tabelle { width:100%; min-width:640px; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; font-size:15.5px; }
.ps-tabelle th, .ps-tabelle td { text-align:left; vertical-align:top; padding:11px 14px; border-bottom:1px solid var(--line); }
.ps-tabelle th { background:#fafcf4; font-size:14.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.ps-tabelle td:first-child { font-weight:700; width:22%; }
.ps-tabelle td.ps-wir { background:var(--lime-bg); }
.ps-tabelle-rahmen { overflow-x:auto; }

/* Stationen des BOS Wegs */
.ps-phase { margin-top:34px; }
.ps-phase > h3 { font-size:15px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); border-bottom:2px solid var(--lime); padding-bottom:6px; margin-bottom:6px; }
.ps-phase > p { font-size:16px; color:var(--muted); margin-bottom:6px; }
.ps-station { background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin-top:14px; scroll-margin-top:16px; }
.ps-station h4 { font-size:20px; margin-bottom:12px; }
.ps-station h4 span { color:var(--lime-dk); margin-right:10px; }
.ps-dreier { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ps-dreier div { background:#fafcf4; border-radius:8px; padding:11px 13px; }
.ps-dreier b { display:block; font-size:13.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--lime-dk); margin-bottom:3px; }
.ps-dreier p { font-size:15.5px; color:#2b2d27; }

/* Sprungleiste */
.ps-sprung { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.ps-sprung a { font-size:14.5px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 11px; color:var(--ink); }
.ps-sprung a:hover { border-color:var(--lime); text-decoration:none; }

/* Hinweis- und Kontaktboxen */
.ps-hinweis { background:var(--lime-bg); border:1px solid #f3d3a3; border-radius:10px; padding:14px 16px; font-size:16px; }
.ps-kontakt { background:var(--dark); color:#e8eddc; border-radius:12px; padding:24px 26px; display:grid; grid-template-columns:1.3fr 1fr; gap:22px; align-items:center; }
.ps-kontakt h2 { color:#fff; font-size:23px; margin-bottom:8px; }
.ps-kontakt p { color:#cdd6bd; font-size:16.5px; }
.ps-kontakt dl { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:16px; }
.ps-kontakt dt { color:#aab597; }
.ps-kontakt a { color:var(--lime-lt); }
.ps-kontakt a.ps-knopf { color:var(--ink); }
.ps-knopf { display:inline-block; background:var(--lime); color:var(--ink); font-weight:800; padding:11px 20px; border-radius:8px; font-size:16.5px; margin-top:14px; }
.ps-knopf:hover { background:var(--lime-lt); text-decoration:none; }
.ps-knopf.hell { background:#fff; border:1.5px solid var(--line); }

/* Selbsttest */
.ps-test { background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px 22px; }
.ps-frage { padding:13px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; }
.ps-frage:last-of-type { border-bottom:0; }
.ps-frage p { font-size:16.5px; }
.ps-frage small { display:block; color:var(--muted); font-size:14.5px; margin-top:2px; }
.ps-wahl { display:flex; gap:6px; }
.ps-wahl button { font:inherit; font-size:15px; font-weight:700; border:1.5px solid var(--line); background:#fafcf4; border-radius:7px; padding:7px 12px; cursor:pointer; color:var(--ink); }
.ps-wahl button.an { background:var(--lime); border-color:var(--lime); }
.ps-ergebnis { margin-top:16px; }
.ps-ergebnis[hidden] { display:none; }

@media (max-width:860px){
  .ps-zahlen, .ps-karten.vier { grid-template-columns:repeat(2,1fr); }
  .ps-karten, .ps-hybrid, .ps-bilder, .ps-dreier, .ps-kontakt, .ps-karten.zwei { grid-template-columns:1fr; }
}
@media (max-width:520px){
  .ps-zahlen, .ps-karten.vier { grid-template-columns:1fr; }
  .ps-frage { grid-template-columns:1fr; }
  .ps-station { padding:16px; }
}