/* ============================================================
   cartoso — Kachelschicht

   Eine Form für alles, was man auswählt, umschaltet oder aufklappt.
   Bisher entstand die Kacheloptik nur in @media (max-width: 640px);
   auf dem Desktop waren dieselben Elemente Pillen und Zeilen. Hier ist
   die Kachel der Normalfall — die Breite ändert nur noch die Spaltenzahl.

   Lädt nach tokens.css und base.css, vor den seitenspezifischen Dateien.
   Kennt keine Farbe: alles kommt aus der Token-Schicht.

   Die Altklassen (.caradag-tab-btn, .caradag-channel-toggle, …) stehen
   bewusst in denselben Selektorlisten. Solange saas-portal.css eigene
   Definitionen dafür mitbringt, gewinnt die später geladene Datei —
   diese hier greift erst, wenn die Altregeln dort entfallen. Der Umbau
   ist damit eine Folge von Löschungen, kein Spezifitätswettlauf.

   Ersetzt design-system.css. Von deren 418 Zeilen hatte die gesamte
   .cts-*-Komponentenschicht in Markup und JS keinen einzigen Aufrufer;
   die drei wirksamen Regeln stehen jetzt in base.css.
   ============================================================ */

/* ============================================================
   Raster
   Die Spaltenzahl steht in einer Variablen statt in je einem
   Breakpoint pro Raster — sonst wächst die Datei mit jedem neuen
   Kachelfeld um eine weitere Media-Query.
   ============================================================ */
.cts-tiles,
.caradag-tab-nav,
.caradag-channel-toggles,
.caradag-post-style-options,
.caradag-credit-packages,
.caradag-autopost-day-grid,
.caradag-switch-tiles {
  --cts-tiles-cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--cts-tiles-cols), minmax(0, 1fr));
  gap: 8px;
  /* Als <fieldset> verwendet: Themes geben Fieldsets Rahmen und
     Innenabstand mit. Das Raster ist keine sichtbare Gruppe. */
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.cts-tiles--1,
.caradag-switch-tiles { --cts-tiles-cols: 1; }
.cts-tiles--2,
.caradag-post-style-options { --cts-tiles-cols: 2; }
.cts-tiles--4 { --cts-tiles-cols: 4; }
.cts-tiles--6,
.caradag-tab-nav { --cts-tiles-cols: 6; }
.cts-tiles--7,
.caradag-autopost-day-grid { --cts-tiles-cols: 7; }

/* ============================================================
   Die Kachel
   ============================================================ */
.cts-tile,
.caradag-tab-btn,
.caradag-channel-toggle,
.caradag-post-style-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  box-sizing: border-box;
  min-height: 88px;
  padding: 12px 8px;
  border: 1px solid var(--cartoso-border-strong);
  border-radius: var(--cartoso-radius);
  background: var(--cartoso-surface);
  color: var(--cartoso-text);
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

/* Das Bedienelement bleibt im Baum — es trägt Wert, Name, Tastatur und
   Screenreader-Ansage. Nur sichtbar ist es nicht; gezeichnet wird die
   Kachel darum herum. display:none oder visibility:hidden nähmen es aus
   der Tastaturreihenfolge. */
.cts-tile > input[type='radio'] {
  position: absolute;
  /* min-height und border explizit zurücksetzen: Formularregeln wie
     .caradag-saas-form input dehnen jede Eingabe auf 44px mit Rahmen. */
  width: 1px;
  min-width: 0;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  appearance: none;
}

/* Sichtbare Gruppenbeschriftung — als Rasterelement über die volle Breite. */
.cts-tiles-legend {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  padding: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--cartoso-text);
}

.cts-tile-icon,
.caradag-choice-icon,
.caradag-tab-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  opacity: 0.7;
}

.cts-tile-text,
.caradag-choice-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cts-tile-text strong,
.caradag-choice-text strong,
.caradag-tab-label {
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.25;
}

.cts-tile-text span,
.caradag-choice-text span {
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--cartoso-text-muted);
}

.cts-tile:hover,
.caradag-tab-btn:hover,
.caradag-channel-toggle:hover,
.caradag-post-style-option:hover {
  border-color: var(--cartoso-action);
}

.cts-tile.is-disabled,
.cts-tile:has(> input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================
   Aktivzustand — zwei Signale, nicht nur Farbe

   WCAG 2.2, 1.4.1: Farbe darf nicht der einzige Träger einer
   Information sein. Deshalb Häkchen (Form) plus Innenring (Kontur)
   zusätzlich zur Tönung.

   Der Innenring per box-shadow statt border-width: 2px — ein dickerer
   Rahmen verschöbe den Inhalt um 1px und ließe die ganze Reihe beim
   Anklicken zucken.
   ============================================================ */
.cts-tile.is-active,
.cts-tile:has(> input:checked),
[open] > .cts-tile,
.caradag-tab-btn.is-active,
.caradag-channel-toggle.is-active,
.caradag-post-style-option.is-active {
  border-color: var(--cartoso-action);
  background: var(--cartoso-action-tint);
  box-shadow: inset 0 0 0 1px var(--cartoso-action);
}

.cts-tile.is-active .cts-tile-icon,
.cts-tile:has(> input:checked) .cts-tile-icon,
[open] > .cts-tile .cts-tile-icon,
.caradag-tab-btn.is-active .caradag-tab-icon,
.caradag-channel-toggle.is-active .caradag-choice-icon,
.caradag-post-style-option.is-active .caradag-choice-icon {
  opacity: 1;
  color: var(--cartoso-action-text);
}

/* Häkchen auf ::before — ::after ist beim Aufklapper der Chevron. */
.cts-tile.is-active::before,
.cts-tile:has(> input:checked)::before,
.caradag-channel-toggle.is-active::before,
.caradag-post-style-option.is-active::before {
  content: '✓';
  position: absolute;
  top: 5px;
  right: 8px;
  font-size: 0.74rem;
  line-height: 1;
  font-weight: 700;
  color: var(--cartoso-action-text);
}

/* Fokus wie in base.css, aber am Label gezeichnet: Das Feld selbst ist
   1×1px, sein Ring wäre unsichtbar. :focus deckt den programmatischen
   Fall ab (ctlFocus in saas-account.js), :focus-visible den Tastaturfall. */
.cts-tile:has(> input:focus-visible),
.cts-tile:has(> input:focus) {
  outline: none;
  box-shadow:
    0 0 0 2px var(--cartoso-surface),
    0 0 0 4px var(--cartoso-focus);
}

.cts-tile:has(> input:checked):has(> input:focus) {
  box-shadow:
    inset 0 0 0 1px var(--cartoso-action),
    0 0 0 2px var(--cartoso-surface),
    0 0 0 4px var(--cartoso-focus);
}

/* ============================================================
   Variante: Schalterkachel
   Zeile statt Quadrat — der Schalter rechts ist selbst das sichtbare
   Signal, ein zusätzliches Häkchen wäre doppelt.
   ============================================================ */
/* Vollständig ausgeschrieben, nicht als Aufsatz auf .cts-tile: Die
   Altklasse .caradag-switch-tile steht nicht in der Basisliste, und eine
   Variante, die nur die Abweichung nennt, ließe sie ohne display, Rahmen
   und Fläche zurück. */
.cts-tile--switch,
.caradag-switch-tile {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  box-sizing: border-box;
  min-height: 64px;
  padding: 14px 16px;
  border: 1px solid var(--cartoso-border-strong);
  border-radius: var(--cartoso-radius);
  background: var(--cartoso-surface);
  color: var(--cartoso-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.cts-tile--switch .cts-tile-text,
.caradag-switch-tile .caradag-choice-text {
  flex: 1 1 auto;
}

.cts-tile--switch::before,
.caradag-switch-tile::before {
  content: none;
}

/* Der Schalter rechts. Bewusst kein natives Kästchen: Formularregeln
   dehnen Eingaben auf volle Breite und 44px Höhe, und ein gedehntes
   Kontrollkästchen sieht in keiner anderen Kachel so aus. */
.cts-tile--switch > input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  margin-left: auto;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  height: 26px;
  min-height: 26px;
  max-height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--cartoso-radius-pill);
  background: var(--cartoso-border-strong);
  cursor: pointer;
  transition: background-color 0.16s ease;
}

.cts-tile--switch > input[type='checkbox']::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cartoso-surface);
  box-shadow: var(--cartoso-shadow-sm);
  transition: transform 0.16s ease;
}

.cts-tile--switch > input[type='checkbox']:checked {
  background: var(--cartoso-action);
}

.cts-tile--switch > input[type='checkbox']:checked::after {
  transform: translateX(18px);
}

/* ============================================================
   Variante: Aufklappkachel (<summary>)
   ============================================================ */
/* Ohne eigenen Rahmen und ohne eigene Fläche: Die Aufklappkachel ist der
   Kopf eines <details>, und der Kasten drumherum trägt beides schon. Ein
   zweiter Rahmen läge exakt auf dem ersten. */
.cts-tile--row,
.caradag-service-tile,
.caradag-help-tile {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  box-sizing: border-box;
  min-height: 56px;
  padding: 14px 16px;
  color: var(--cartoso-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  list-style: none;
}

.cts-tile--row::-webkit-details-marker,
.caradag-service-tile::-webkit-details-marker,
.caradag-help-tile::-webkit-details-marker {
  display: none;
}

.cts-tile--row .cts-tile-text,
.caradag-service-tile .caradag-choice-text,
.caradag-help-tile .caradag-choice-text {
  flex: 1 1 auto;
}

/* Chevron rechts, gedreht beim Aufklappen. */
.cts-tile--row::after {
  content: '';
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-right: 2px solid var(--cartoso-text-muted);
  border-bottom: 2px solid var(--cartoso-text-muted);
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}

[open] > .cts-tile--row::after {
  transform: rotate(-135deg);
}

.cts-tile--row::before {
  content: none;
}

/* ============================================================
   Variante: Anzeigekachel
   Kein Bedienelement — deshalb der Deko-Rahmen, kein Zeigefinger,
   keine Zustände. Löst fünf parallele Kartenvokabulare mit vier
   verschiedenen Radien ab.
   ============================================================ */
/* Bewusst OHNE display, flex-direction und align-items: Diese Klassen
   umschließen fremdes Markup — Überschriften, Absätze, Tabellen. Ein
   erzwungenes display:flex machte aus jedem Kind ein Flex-Element und
   zerlegte die Innenlayouts. Die Anzeigekachel ist der Rahmen, nicht
   das Layout darin. */
.cts-tile--static,
.caradag-block-tile,
.caradag-billing-card,
.caradag-credit-package,
.caradag-admin-card,
.caradag-partner-card,
.qhd-card,
.qhd-panel,
.qhd-metric,
.cld-stat,
.cld-queue-card {
  position: relative;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--cartoso-border);
  border-radius: var(--cartoso-radius);
  background: var(--cartoso-surface);
  color: var(--cartoso-text);
  cursor: default;
}

.cts-tile--static::before {
  content: none;
}

/* ============================================================
   Variante: Ziffernkachel
   Für Stunde und Minute. Kompaktes Ziffernraster statt Auswahlfeld:
   24 bzw. 12 Werte als Block, nicht als Liste. Aktiv wird zusätzlich
   fett — bei dieser Größe ist ein Häkchen nicht lesbar, der
   Schriftschnitt ist hier das Nicht-Farb-Signal.
   ============================================================ */
.cts-tiles--digit {
  --cts-tiles-cols: 6;
  gap: 6px;
}

.cts-tile--digit {
  display: grid;
  place-items: center;
  gap: 0;
  min-height: 44px;
  padding: 0 2px;
  border-radius: var(--cartoso-radius-sm);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.cts-tile--digit::before {
  content: none;
}

.cts-tile--digit.is-active,
.cts-tile--digit:has(> input:checked) {
  font-weight: 700;
}

/* ============================================================
   Breite
   Genau eine Media-Query: Unter 360px werden aus drei und mehr
   Spalten zwei. Die Ziffernraster bleiben sechsspaltig — dort gibt
   die Kachelbreite nach, die Höhe von 44px nicht.

   360 und nicht 400: Ein Telefon mit 390px Breite (iPhone 12–16)
   trägt drei Kanalkacheln nebeneinander gut. Bei 400 wären es dort
   zwei, und der zweite Kanal stünde allein in der nächsten Zeile.
   ============================================================ */
@media (max-width: 360px) {
  .cts-tiles:not(.cts-tiles--digit):not(.cts-tiles--1),
  .caradag-tab-nav,
  .caradag-channel-toggles,
  .caradag-post-style-options,
  .caradag-credit-packages,
  .caradag-autopost-day-grid {
    --cts-tiles-cols: 2;
  }
}