/* Okular-Finder 2.0 fuer Sterngucker.de
   Jeder Selektor beginnt mit .okf. Das Werkzeug steht im Artikeltext der
   Okular-Ratgeberseite, also mitten im Theme -- ein einziger nackter Selektor
   (button, select, h3) wuerde die ganze Seite umfaerben.
   Breite statt Viewport: der Inhaltsbereich ist wegen der Sidebar nur rund
   723 px breit. Container-Queries messen den Kasten selbst, Media-Queries
   wuerden bei 800 px Fensterbreite ein Layout waehlen, das hier nicht passt. */

.okf{
  --okf-rand:#cdd9f2; --okf-flaeche:#f6f8fb; --okf-tinte:#10193a;
  --okf-dunkel:#1e2b57; --okf-akzent:#3b5bdb; --okf-fokus:#f2b84c;
  container-type:inline-size;
  border:1px solid var(--okf-rand); border-radius:10px;
  background:var(--okf-flaeche); color:var(--okf-tinte);
  padding:20px; margin:28px 0;
  font-size:16px; line-height:1.5;
}
.okf *{box-sizing:border-box}
/* Muss sein: .okf-manuell setzt display:flex und wuerde sonst das hidden-Attribut
   ueberstimmen -- die Eingabefelder blieben sichtbar und mit Tab erreichbar,
   obwohl sie gar nicht gebraucht werden. */
.okf [hidden]{display:none !important}

/* Der dreifache Klassenname ist kein Versehen. GeneratePress setzt
   ".separate-containers .site-main *{margin-bottom:20px}" -- zwei Klassen, also
   staerker als ein schlichtes ".okf p". Dadurch bekam im Werkzeug jeder Absatz
   und jede Karte 20 px Abstand nach unten, die Karten wurden unterschiedlich
   hoch und die Knoepfe standen nicht mehr auf einer Linie. Drei Klassen gewinnen
   unabhaengig von der Ladereihenfolge; Abstaende im Werkzeug regeln ausschliesslich
   die Regeln darunter (gap im Raster, eigene Randangaben). */
.okf.okf.okf *{margin-bottom:0}
.okf.okf.okf p{margin-top:0}

.okf-wahl{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end}
.okf-wahl label{display:block; font-weight:600; font-size:.95em; flex:1 1 260px; min-width:0}
.okf-wahl select,.okf-wahl input{
  display:block; width:100%; margin-top:5px; padding:9px 10px;
  border:1px solid var(--okf-rand); border-radius:6px; background:#fff;
  color:var(--okf-tinte); font:inherit; font-weight:400;
}
.okf select:focus-visible,.okf input:focus-visible,.okf a:focus-visible{
  outline:3px solid var(--okf-fokus); outline-offset:2px;
}
.okf.okf.okf .okf-manuell{display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; width:100%}
.okf-manuell label{flex:1 1 150px}

.okf.okf.okf .okf-daten{
  margin:16px 0 0; padding:10px 12px; border-left:4px solid var(--okf-akzent);
  background:#fff; border-radius:0 6px 6px 0; font-size:.95em;
}
.okf-daten strong{color:var(--okf-dunkel)}

.okf.okf.okf .okf-karten{display:grid; gap:14px; margin-top:16px}
@container (min-width:560px){ .okf-karten{grid-template-columns:repeat(3,1fr)} }
@supports not (container-type:inline-size){
  @media (min-width:860px){ .okf-karten{grid-template-columns:repeat(3,1fr)} }
}

/* margin:0 ist Absicht: GeneratePress gibt jedem <article> 20 px Abstand nach unten,
   ausser dem letzten. Im Raster sind die Karten dadurch unterschiedlich hoch, und die
   Knoepfe stehen nicht auf einer Linie. */
.okf-karte{
  display:flex; flex-direction:column; gap:8px; margin:0;
  border:1px solid var(--okf-rand); border-radius:8px; background:#fff; padding:14px;
}
.okf-rolle{
  align-self:flex-start; font-size:.72em; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#fff; background:var(--okf-dunkel);
  border-radius:4px; padding:3px 8px;
}
.okf-bild{text-align:center}
.okf-bild img{max-width:100%; height:auto; margin-left:auto; margin-right:auto}
.okf-name{font-weight:600; line-height:1.35}
.okf-name a{color:var(--okf-dunkel)}
.okf-zahlen{font-size:.95em; margin:0}
.okf-zahlen b{color:var(--okf-akzent); font-size:1.15em}
.okf-warum{font-size:.92em; margin:0; color:#3a4460}
.okf-preis{margin:0; font-weight:600}
.okf-ampel{font-size:.88em; margin:0}
.okf-punkt{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle}
.okf.okf.okf .okf-knopf{
  margin-top:auto; display:block; text-align:center; text-decoration:none;
  background:var(--okf-akzent); color:#fff !important; font-weight:600;
  border-radius:6px; padding:10px 12px;
}
.okf-knopf:hover,.okf-knopf:focus{background:var(--okf-dunkel); color:#fff !important}

.okf.okf.okf .okf-fuss{margin-top:14px; font-size:.92em; color:#3a4460}
.okf.okf.okf .okf-leer{margin-top:14px; font-size:.95em}
.okf-tabelle{width:100%; border-collapse:collapse; margin-top:14px; font-size:.93em}
.okf-tabelle th,.okf-tabelle td{border:1px solid var(--okf-rand); padding:7px 9px; text-align:left}
.okf-tabelle th{background:#fff; font-weight:600}

/* Ohne JavaScript bleibt der Kartenvorrat versteckt; sichtbar ist dann nur der
   Hinweis. Der Vorrat ist keine Ausgabe, sondern das Lager, aus dem das Skript
   die passenden drei Karten holt. */
.okf-vorrat{display:none}