/* ==========================================================================
   idf-segment-group - mehrere Bedienelemente als EIN Block
   ==========================================================================

   Was fachlich zusammengehoert, teilt einen Rahmen und wird innen durch
   Haarlinien getrennt, statt als Reihe einzeln gerahmter Kaesten
   dazustehen. Aus sechs Dingen in der Filterleiste werden zwei Bloecke:
   der Blick zaehlt Gruppen, nicht Knoepfe.

   Die Gruppe bringt KEINE eigene Geometrie mit. Hoehe, Schrift, Padding
   und Zustaende kommen weiter aus dem jeweiligen Kind (`.idf-list-toggle`,
   `.idf-btn`, ein Icon-Knopf). Die Gruppe nimmt den Kindern nur Rahmen und
   Radius ab und setzt beides aussen einmal neu. Damit funktioniert sie mit
   jedem Baustein, der 36 px hoch ist, und erbt automatisch dessen
   Aktiv-Zustand (Ink-Flaeche, weisse Schrift).

   Gedacht fuer 2 bis 4 Segmente. Eine Gruppe bricht NICHT um (ein halber
   Rahmen ueber zwei Zeilen waere kaputt) - wer zehn Knoepfe hat, bildet
   mehrere Gruppen nach Bedeutung, statt eine lange zu bauen.

   Nicht geeignet fuer Elemente mit aufklappendem Popup (Combobox): deren
   Dropdown haengt an der eigenen Box, und in der Gruppe verliert es seinen
   Bezugsrahmen. Comboboxen stehen weiter einzeln in der Leiste.

   Laedt IMMER (wie buttons und hint): Grundvokabular und winzig.

   Konsumenten: siehe README.
   ========================================================================== */

/* Die Kontur ist ein `box-shadow`, KEIN `border` - und das ist eine
   Layout-Entscheidung, keine Optik: ein Rahmen legt oben und unten je 1 px
   auf die Aussenhoehe, eine Gruppe aus 36-px-Segmenten waere also 38 px hoch
   und staende sichtbar hoeher als jeder einzelne Knopf derselben Leiste
   (Joerg hat genau das am 10.08. gesehen). Ein Schatten nimmt keinen Platz
   im Layout, sieht aber identisch aus.

   Folgerichtig ist der Radius der Kinder derselbe wie der der Gruppe: ohne
   Rahmen gibt es keine Differenz zwischen aussen und innen mehr. */
.idf-segment-group {
  display: inline-flex;
  align-items: stretch;
  flex-wrap: nowrap;
  /* Nicht schrumpfen. Als Flex-Kind einer Leiste wuerde die Gruppe sonst
     lieber schmaler werden als umzubrechen - und weil sie innen `nowrap`
     ist, laeuft dabei ihr Inhalt aus dem Rahmen heraus statt sich
     anzupassen. Mit `0 0 auto` wandert sie stattdessen als Ganzes in die
     naechste Zeile, was bei einem Block, der zusammenbleiben MUSS, die
     einzig richtige Reaktion ist. */
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--radius-md, 6px);
  box-shadow: 0 0 0 1px var(--line, #e5e5e5);
  background: var(--white, #fff);
  box-sizing: border-box;
}

/* Die Kinder geben Rahmen und Radius ab - beides traegt jetzt die Gruppe.
   Ohne das Abraeumen laege unter dem Gruppenrahmen ein zweiter Rand, und
   die Ink-Flaeche eines aktiven Segments haette einen hellen Saum.

   WARUM `!important`: Das hier ist ein Layout-Moduswechsel, kein
   Geschmacks-Override - die Gruppe funktioniert nur, wenn die Kinder ihren
   Rahmen WIRKLICH abgeben. `.idf-segment-group > *` ist (0,1,0) und
   verliert gegen jeden Kind-Selektor mit zwei Klassen: `.idf-list-toggle`
   (0,1,0) ging gut, `.idf-list-bar .idf-list-filter-date` (0,2,0) nicht -
   die Zeitraum-Box behielt ihren Rand, und `is-active` faerbte ihn ink
   (gefunden 10.08.2026 im Screenshot, nachdem eine Messung nur
   `borderTopWidth` der Chips gelesen hatte).
   Die Alternative waere ein Wettruesten, das beim naechsten noch tieferen
   Selektor wieder bricht. `background` bleibt bewusst OHNE `!important`:
   die Ink-Flaeche eines aktiven Segments muss durchkommen. */
.idf-segment-group > * {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none;
}

/* Getrennt wird durch eine Haarlinie am linken Nachbarn, nicht durch
   Abstand. Der Trenner sitzt bewusst am Kind und nicht als Pseudo-Element
   an der Gruppe: so verschiebt er sich mit, wenn ein Segment per JS
   ein- oder ausgeblendet wird. */
.idf-segment-group > * + * {
  border-left: 1px solid var(--line, #e5e5e5) !important;
}

/* Aussenecken: dieselbe Rundung wie die Gruppe. Weil deren Kontur ein
   Schatten ist und kein Rahmen, gibt es keine Differenz zwischen aussen und
   innen - ein aktives Randsegment fuellt die Ecke exakt aus. `!important`
   aus demselben Grund wie oben, und weil sonst das `border-radius: 0
   !important` der Basis-Regel diese Ecken schluege. */
.idf-segment-group > *:first-child {
  border-top-left-radius: var(--radius-md, 6px) !important;
  border-bottom-left-radius: var(--radius-md, 6px) !important;
}
.idf-segment-group > *:last-child {
  border-top-right-radius: var(--radius-md, 6px) !important;
  border-bottom-right-radius: var(--radius-md, 6px) !important;
}

/* --- Senkrechte Variante -------------------------------------------------
   Dieselbe Gruppe, gestapelt: fuer schmale Flaechen, in denen vier Segmente
   nebeneinander auf je 60 px zusammenschrumpften und ihre Labels nicht mehr
   lesbar waeren (Filter-Flaeche der Listen-Bar). Der Trenner wandert von
   links nach oben, die Rundungen von links/rechts nach oben/unten - sonst
   bliebe die Gruppe waagerecht gedacht. */
.idf-segment-group.is-vertical {
  flex-direction: column;
}
.idf-segment-group.is-vertical > * + * {
  border-left: 0 !important;
  border-top: 1px solid var(--line, #e5e5e5) !important;
}
.idf-segment-group.is-vertical > *:first-child {
  border-radius: var(--radius-md, 6px) var(--radius-md, 6px) 0 0 !important;
}
.idf-segment-group.is-vertical > *:last-child {
  border-radius: 0 0 var(--radius-md, 6px) var(--radius-md, 6px) !important;
}
/* Genau EIN Segment: rundum. Sonst schluege die last-child-Regel die
   first-child-Regel und die oberen Ecken blieben eckig. */
.idf-segment-group.is-vertical > *:only-child {
  border-radius: var(--radius-md, 6px) !important;
}

/* Hover: das Kind hat seinen Rahmen abgegeben, sein border-color-Hover
   laeuft also ins Leere. Ersatz ist eine Flaechen-Toenung - bewusst
   --shade-08 statt des 15-Prozent-Pillen-Standards, weil ein Segment mit
   Text deutlich breiter ist als eine 28-px-Icon-Pille und 15 Prozent auf
   dieser Flaeche wie ein gedrueckter Zustand wirken. */
.idf-segment-group > *:hover:not(.is-active):not(:disabled) {
  background: var(--shade-08, rgba(0, 0, 0, 0.08));
}

/* Fokus-Ring nach innen holen: aussen wuerde ihn der Nachbar ueberdecken. */
.idf-segment-group > *:focus-visible {
  outline: 2px solid var(--accent, #167ea0);
  outline-offset: -2px;
}

/* Touch: 44 px Mindesthoehe wie ueberall. Die Kinder tragen eine feste
   `height` (36 px), die das `align-items: stretch` der Gruppe schlaegt -
   deshalb hier beides setzen, nicht nur an der Gruppe. */
html[data-input-mode="touch"] .idf-segment-group > * {
  height: auto;
  min-height: 44px;
}