/* ==========================================================================
   BookTo — Dialog „Als Seitenset sichern" (js/seitenset-dialog.js)

   Drei grosse Programm-Kacheln, darunter Lesewege und Vorschau
   nebeneinander, unten die Schritte. Alle Ziele mindestens 72 px hoch
   (Verweil-Mindestmass 64 px, siehe .check in studio.css).

   Die Vorschau zeigt eine Talker-Seite — ihre Farben sind die des
   Seitensets (gridset.js / seitenmodell.js), nicht die des App-Farbschemas.
   Das ist Absicht: Sie zeigt, wie es im anderen Programm aussehen wird.
   ========================================================================== */

.modal__box.ss { width: 1040px; }

.ss__koerper { display: flex; flex-direction: column; gap: var(--space-5); }

.ss__frage {
  display: flex; align-items: center; gap: var(--space-3);
  margin: 0 0 var(--space-3);
  font-family: var(--font-label); font-weight: 600; font-size: 1.25rem;
  color: var(--color-text);
}
.ss__nr {
  flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary-bg); color: var(--color-primary-deep);
  font-size: 1.05rem;
}
.ss__nr svg { width: 20px; height: 20px; }

/* ── 1 · Programm ─────────────────────────────────────────────────────── */
.ss__apps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.ss__app {
  position: relative;
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  min-height: 120px;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.ss__app:hover { border-color: var(--color-primary-light); }
.ss__app:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.ss__app.is-on {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  box-shadow: inset 0 0 0 2px var(--color-primary);
}
.ss__app[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.ss__app-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ss__app-name { font-family: var(--font-label); font-weight: 600; font-size: 1.375rem; line-height: 1.2; }
.ss__app-haken {
  flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-border-strong);
  color: transparent;
}
.ss__app-haken svg { width: 20px; height: 20px; }
.ss__app.is-on .ss__app-haken {
  background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse);
}
.ss__app-firma { font-size: .95rem; color: var(--color-text-secondary); }
.ss__app-datei {
  align-self: flex-start;
  margin-top: auto;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  font-family: 'DM Mono', 'Consolas', monospace;
  font-size: .95rem;
}
.ss__app-nicht { font-size: .9rem; color: var(--color-warning); font-weight: 600; }

/* ── 2 · Lesewege + Vorschau ─────────────────────────────────────────── */
.ss__zwei {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.ss__weg {
  display: flex; align-items: flex-start; gap: var(--space-3);
  min-height: 72px;
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-2);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
}
.ss__weg:first-of-type { margin-top: 0; }
.ss__weg:focus-within { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.ss__weg input { width: 28px; height: 28px; margin: 2px 0 0; flex: none; accent-color: var(--color-primary); }
.ss__weg:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-bg); }
.ss__weg-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss__weg-titel { font-weight: 700; font-size: 1.1rem; }
.ss__weg-erkl { color: var(--color-text-secondary); font-size: .95rem; }

/* ── Reiter „Lesen" / „Aussehen" ──────────────────────────────────────
   Zwei Reiter statt einer langen Spalte: auf 1024 x 768 rollte der Dialog
   schon mit den Lesewegen allein. */
.ss__links { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.ss__reiter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.ss__tab {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 72px; padding: 0 var(--space-3);
  border: 2px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  font: inherit; font-family: var(--font-label); font-weight: 600; font-size: 1.2rem;
  cursor: pointer;
}
.ss__tab.is-on { border-color: var(--color-primary); background: var(--color-primary-bg); box-shadow: inset 0 0 0 2px var(--color-primary); }
.ss__tab:focus-visible, .ss__layout:focus-visible, .ss__farbe:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
/* Die Zwischenueberschriften stehen nur fuer Screenreader da: Skizzen und
   Farbfelder erklaeren sich selbst, und jede sichtbare Zeile kostete auf
   1024 x 768 den Platz, in dem sonst „Wortarten farbig" ohne Rollen steht. */
.ss__unterfrage { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ss__layouts, .ss__farben { margin-bottom: var(--space-3); }

.ss__layouts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.ss__layout {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 72px; padding: var(--space-2) 4px;
  border: 2px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  font: inherit; font-size: .9rem; font-weight: 600; line-height: 1.15; text-align: center;
  cursor: pointer;
}
.ss__layout.is-on, .ss__farbe.is-on { border-color: var(--color-primary); box-shadow: inset 0 0 0 2px var(--color-primary); }
.ss__layout.is-on { background: var(--color-primary-bg); }
/* Die Aufteilung als Skizze: Woerter (hell mit Rand) und Bild (dunkel). */
.ss__mini {
  display: grid; gap: 2px; width: 48px; height: 32px; padding: 2px;
  border-radius: 3px; background: var(--color-surface-alt);
  grid-template-columns: 1fr 1fr; grid-template-areas: "w b";
}
.ss__mini i { display: block; border-radius: 2px; }
.ss__mini-w { grid-area: w; border: 1.5px solid var(--color-text-secondary);
  background: repeating-linear-gradient(to bottom, transparent 0 4px, var(--color-text-secondary) 4px 5px); }
.ss__mini-b { grid-area: b; background: var(--color-primary); }
.ss__mini--links { grid-template-areas: "b w"; }
.ss__mini--oben { grid-template-columns: 1fr; grid-template-rows: 3fr 2fr; grid-template-areas: "b" "w"; }
.ss__mini--gross .ss__mini-w { background: repeating-linear-gradient(to bottom, transparent 0 7px, var(--color-text-secondary) 7px 8px); }
/* Ohne Bild: nur Woerter ueber die ganze Breite. */
.ss__mini--ohne { grid-template-columns: 1fr; grid-template-areas: "w"; }
.ss__mini--ohne .ss__mini-b { display: none; }

/* Farbfelder zeigen das Schema selbst: Grund, Flaeche, Schrift, Knopf. */
/* Vier je Reihe: sieben nebeneinander waeren 56 px breit - unter den 64 px,
   die ein Verweil-Ziel braucht. */
.ss__farben { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.ss__farbe {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 3px;
  min-height: 72px; padding: 5px;
  border: 2px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--ssv-grund); cursor: pointer; font: inherit;
}
.ss__farbe-muster {
  flex: 1; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ssv-rand); border-bottom: 6px solid var(--ssv-nav); border-radius: 4px;
  background: var(--ssv-blatt); color: var(--ssv-schrift);
  font-weight: 700; font-size: 1.05rem;
}
.ss__farbe-name {
  color: var(--ssv-schrift); font-size: .72rem; font-weight: 600; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}

/* Die Talker-Seite im Kleinen. Farben und Aufteilung des gewaehlten
   Seitensets (gridset.js SCHEMATA/LAYOUTS) kommen als Variablen und Klasse
   aus dem Skript; ohne sie gilt „Creme, Bild rechts". */
.ssv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 5fr 1fr;
  grid-template-areas: "woerter bild" "leiste leiste";
  gap: 4px;
  aspect-ratio: 16 / 10;
  padding: 6px;
  border-radius: var(--radius-sm);
  background: var(--ssv-grund, #F4ECD8);
  box-shadow: var(--shadow-sm);
  color: var(--ssv-schrift, #3B2A12);
}
.ssv--links { grid-template-areas: "bild woerter" "leiste leiste"; }
.ssv--oben { grid-template-columns: 1fr; grid-template-rows: 3fr 2fr 1fr; grid-template-areas: "bild" "woerter" "leiste"; }
.ssv__woerter {
  grid-area: woerter;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 3px; min-height: 0;
}
.ssv--oben .ssv__woerter { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.ssv--ohne { grid-template-columns: 1fr; grid-template-areas: "woerter" "leiste"; }
.ssv--ohne .ssv__woerter { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 3 von 10 Rasterreihen je Wort: die zehnte Reihe bleibt links frei. */
.ssv--gross .ssv__woerter { grid-template-rows: repeat(3, minmax(0, 1fr)); padding-bottom: 10%; }
.ssv--gross .ssv__wort { font-size: .95rem; }
.ssv__wort, .ssv__ganz, .ssv__bild {
  background: var(--ssv-blatt, #FDF6E3); border: 1px solid var(--ssv-rand, #A89A7B); border-radius: 4px; min-width: 0; min-height: 0;
  color: var(--ssv-schrift, #3B2A12);
}
.ssv__wort {
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  font-weight: 700; font-size: .8rem; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ssv__wort--leer { opacity: .4; }
.ssv__ganz { grid-area: woerter; padding: 6px; font-size: .78rem; line-height: 1.35; overflow: hidden; }
.ssv__bild { grid-area: bild; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ssv__bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ssv__bild svg { width: 40%; height: 40%; color: var(--ssv-rand, #A89A7B); }
/* Snap/Communicator: Zurueck 2 · Startseite 2 · Seite 4 · Weiter 2 Spalten (seitenmodell.js) */
.ssv__leiste { grid-area: leiste; display: grid; grid-template-columns: 2fr 2fr 4fr 2fr; gap: 3px; min-height: 0; }
/* Grid 3 auf Buchseiten: Zurueck 5 · Titel 5 · Seite 5 · Weiter 5 Spalten
   (gridset.js navLeiste, seit 15.09.2026 ohne „Meine Seiten") */
.ssv--grid .ssv__leiste { grid-template-columns: 1fr 1fr 1fr 1fr; }
.ssv__nav--sym { flex-direction: column; gap: 1px; }
.ssv__nav--sym svg { width: 1.1rem; height: 1.1rem; flex: none; }
.ssv__nav--sym span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ssv__nav, .ssv__marke {
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; border-radius: 4px;
  font-size: .68rem; font-weight: 700; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.ssv__nav { background: var(--ssv-nav, #3A5A7C); color: var(--ssv-navschrift, #FFFFFF); border: 1px solid var(--ssv-navrand, #1A3A6A); }
.ssv__marke { background: var(--ssv-still, #EEE4CD); color: var(--ssv-schrift, #3B2A12); border: 1px solid var(--ssv-rand, #A89A7B); font-weight: 400; }
.ss__vorschau-unter { margin: var(--space-2) 0 0; font-size: .9rem; color: var(--color-text-secondary); }

/* ── So kommt es hinein ───────────────────────────────────────────────── */
.ss__hilfe {
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-primary-bg);
}
.ss__hilfe-titel {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-family: var(--font-label); font-weight: 600; font-size: 1.15rem;
  color: var(--color-primary-deep);
}
.ss__hilfe-titel svg { width: 22px; height: 22px; }
/* base.css setzt Listen ohne Zeichen — die Schritte brauchen ihre Nummern. */
.ss__schritte { margin: 0 0 var(--space-3); padding-left: 1.75rem; list-style: decimal; }
.ss__schritte li::marker { font-weight: 700; color: var(--color-primary-deep); }
.ss__schritte li { margin-bottom: var(--space-1); line-height: 1.45; }
.ss__notiz { margin: 0; color: var(--color-text-secondary); font-size: .95rem; }

/* ── Schmal: alles untereinander ─────────────────────────────────────── */
@media (max-width: 820px) {
  .ss__apps { grid-template-columns: minmax(0, 1fr); }
  /* Untereinander: Name und Haken oben, Hersteller und Dateiart in einer
     Zeile darunter — die Kachel bleibt flach, der Haken rechts aussen. */
  .ss__app { min-height: 80px; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--space-3); }
  .ss__app-kopf { flex: 1 0 100%; }
  .ss__app-datei { margin-top: 0; align-self: center; }
  .ss__zwei { grid-template-columns: minmax(0, 1fr); }
  .ss__layouts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ss__farben { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Telefon: Die zwei Reiter teilen sich rund 300 px — „2 Aussehen" lief um
   16 px über (Layout-Prüfung 17.09.2026, 390 × 844). Die Nummer steht dort
   über dem Wort. In der Vorschau werden die Wörter kleiner statt gekürzt. */
@media (max-width: 480px) {
  .ss__tab { flex-direction: column; gap: 2px; padding: var(--space-1) var(--space-2); font-size: 1.05rem; line-height: 1.15; text-align: center; hyphens: auto; overflow-wrap: break-word; }
  .ssv__wort { font-size: .68rem; padding: 0 1px; }
  .ssv__nav, .ssv__marke { font-size: .58rem; padding: 0 1px; }
}

/* Reiter-Beschriftung darf umbrechen, die Nummer steht dann darueber
   (Comic Sans MS, sehr große Schrift, 1024 px: „2 Aussehen" lief 6 px ueber). */
.ss__tab { flex-wrap: wrap; text-align: center; line-height: 1.15; hyphens: auto; overflow-wrap: break-word; }

/* GoTalk NOW (.obz): zwei gleich grosse Felder — die Seite als EINE Taste
   mit Bild und Text, daneben Weiter (js/export-obf.js). */
.ssv--gotalk { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; grid-template-areas: none; }
.ssv__seite {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 0; overflow: hidden;
  padding: 4px; border-radius: 4px;
  background: var(--ssv-blatt, #FDF6E3); border: 1px solid var(--ssv-rand, #A89A7B); color: var(--ssv-schrift, #3B2A12);
}
.ssv__seite img { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: contain; display: block; }
.ssv__seite svg { flex: 1 1 auto; min-height: 0; width: 40%; align-self: center; color: var(--ssv-rand, #A89A7B); }
.ssv__seite span { flex: none; font-size: .7rem; line-height: 1.3; max-height: 4em; overflow: hidden; }
.ssv--gotalk .ssv__nav { font-size: .8rem; }