/* ==============================================================
   stimmen.css  ·  Besitzer: P4 Start-Bausteine  ·  v4 „Passer“ (25.09.2026)
   Plan 8.3 K25 Stimmen-Buehne. Markup: includes/bewertungen.php (eine
   Quelle fuer Start, Zuhause, Leistungs-, Staedte-, Referenz-, Regionsseite).
   Nur Tokens. Die Buehne ist .schild (dunkler Token-Satz, tokens.css);
   die Zettel sind .bogen (K02) und bekommen dort den hellen „Zettel“-Satz.
   Der v3-Altbestand (.band, .bewertung-kopf, .stimme, Gold-Sterne) ist
   zurueckgebaut - keine Seite benutzt ihn mehr.
   ============================================================== */

/* Die eine dunkle Inhaltsflaeche: etwas mehr Luft als die kleine Stufe. */
.sb.st{padding-block:clamp(3rem, 2rem + 3vw, 5rem)}
.st-raster{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.5rem, 1rem + 2.5vw, 3.75rem);align-items:start;
}
@media (min-width:64rem){
  .st-raster{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center}
}
.st-kopf{min-width:0}
.st-kopf .kicker{margin-bottom:.75rem}
.st-kopf h2{margin:0 0 .55rem}
.st-kopf .sub{margin:0}

/* 4,9 von 5 + Sterne + Anzahl/Stand */
.st-wert{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;
  margin:clamp(1.25rem, 1rem + 1vw, 2rem) 0 .8rem;
}
.st-zahl{display:flex;align-items:baseline;gap:.55rem;margin:0}
.st-von{
  font-family:var(--schrift-titel);font-weight:620;font-stretch:96%;
  font-size:1rem;line-height:1.2;color:var(--muted);
}
.st-meta{display:grid;gap:.3rem;min-width:0}
.st-sterne{display:flex;gap:2px;color:var(--cyan)}
.st-sterne svg{flex:0 0 auto}
.st-anzahl{margin:0;font-size:1rem;line-height:1.45;color:var(--muted)}
.st-anzahl strong{color:var(--text);font-weight:600}
/* Hinweis nach § 5b UWG - wortgleich, gut lesbar, nicht versteckt */
.st-hinweis{margin:0;max-width:52ch;font-size:.9375rem;line-height:1.5;color:var(--muted)}
.st-links{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(1.25rem, 1rem + 1vw, 1.75rem)}
.st-micro{margin:.75rem 0 0;font-size:.875rem;line-height:1.45;color:var(--muted)}

/* ---- Zettel: drei Google-Stimmen im Bogen-Material ------------------
   .bogen liefert weissen Rand, Cyan-Platte, Magenta-Haarlinie, die
   Drehung (data-dreh) und „gerade beim Zeigen“ (nur Maus). */
.st-reihe{min-width:0}
.st-liste{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.1rem, .7rem + 1.2vw, 1.75rem)}
.sb.st .st-zettel{
  padding:clamp(1.1rem, .9rem + .6vw, 1.5rem) clamp(1.15rem, .9rem + .9vw, 1.75rem);
  min-width:0;
}
.st-zettel blockquote{margin:0;position:relative;padding-top:1.35rem}
/* Anfuehrungszeichen als Druckzeichen, nur Deko (leerer Alternativtext) */
.st-zettel blockquote::before{
  content:"\201E" / "";position:absolute;left:-.05em;top:-1.95rem;
  font-family:var(--schrift-titel);font-weight:800;font-size:3rem;line-height:1;
  color:var(--platte);
}
.st-zettel blockquote p{
  margin:0;font-size:clamp(1rem, .96rem + .2vw, 1.125rem);line-height:1.55;
  font-weight:420;color:var(--text);
}
.sb.st .st-wer{
  margin:.75rem 0 0;font-family:var(--schrift-titel);font-weight:660;font-stretch:96%;
  font-size:1rem;line-height:1.3;color:var(--accent-text);
}
.sb.st .st-wer span{margin-left:.35rem;font-family:var(--schrift-lauf);font-weight:400;font-size:.9375rem;color:var(--muted)}

/* Ab 48rem: gestapelt, leicht versetzt - ein Stapel Zettel, kein Raster. */
@media (min-width:48rem){
  .st-zettel:nth-child(2){margin-left:clamp(1.5rem, 5vw, 4rem)}
  .st-zettel:nth-child(3){margin-left:clamp(.5rem, 2vw, 1.5rem)}
}

/* Unter 48rem: Wischreihe. Die Reihe selbst ist fokussierbar (tabindex="0",
   role="region" mit Namen im Markup), damit sie per Tastatur scrollbar ist
   (WCAG 2.1.1, axe scrollable-region-focusable). Ohne Drehung. */
@media (max-width:47.99rem){
  .st-reihe{
    margin-inline:calc(var(--gut) * -1);
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gut);
    scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
  }
  .st-liste{
    grid-auto-flow:column;grid-auto-columns:min(80vw, 21rem);
    padding:.75rem var(--gut) 1.25rem;width:max-content;
  }
  .sb.st .st-zettel{rotate:none;scroll-snap-align:start}
  .st-links .btn{flex:1 1 16rem}
}
.st-reihe:focus-visible{outline-offset:-3px}