/* Lernlabor „Wer sieht was? — Zuhause“: nur die Abweichungen zu visibility-lab.css,
   das die Seite vorher lädt. Keine neuen Farben; Grün bleibt wie im ersten
   Lernlabor allein dem Zustand „Im Modell verborgen“ vorbehalten. Einheiten in rem. */

/* Fünf Geräte statt drei Wege. Die Auswahl hier wiegt (0,2,0) und schlägt damit
   die Umbrüche aus visibility-lab.css (0,1,0) - deshalb stehen sie unten neu. */
.zuhause-main .visibility-routes{grid-template-columns:repeat(5,minmax(0,1fr))}
.zuhause-main .visibility-route strong{padding-right:1.5rem}
/* Lange zusammengesetzte Wörter brechen an ihren Bindestrichen, nie über den Rand. */
.zuhause-main .visibility-option strong,.zuhause-main .visibility-option small,.zuhause-main .visibility-station-label{overflow-wrap:anywhere}
#zuhause-observer-heading:focus{outline:none}

/* Steckbrief des Labors: Lernziel, Vorwissen, Schwierigkeit, Dauer, Isolation,
   Zurücksetzen und Bedienung ohne Maus (Pflichtteile laut Seitenplan). */
.zuhause-steckbrief{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.875rem 1.75rem;margin:0 0 1.875rem;padding:0}
.zuhause-steckbrief>div{border-top:1px solid var(--line);padding-top:.625rem;min-width:0}
.zuhause-steckbrief dt{font-size:.875rem;line-height:1.5;font-weight:600;color:var(--text)}
.zuhause-steckbrief dd{margin:.25rem 0 0;font-size:.9375rem;line-height:1.7;color:var(--muted)}

/* Was für das gewählte Gerät nicht einstellbar ist, und warum. */
.zuhause-ohne{margin-top:1.125rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.9375rem;line-height:1.7;color:var(--muted)}
.zuhause-ohne>p{margin:0;font-size:.9375rem;color:var(--text);font-weight:600}
.zuhause-ohne ul{margin:.375rem 0 0;padding-left:1.25rem}
.zuhause-ohne li{font-size:.9375rem;line-height:1.7}
.zuhause-ohne li+li{margin-top:.375rem}
.zuhause-ohne strong{color:var(--text);font-weight:600}

/* Die Stellen außerhalb des Weges: vier Gruppen unter dem Pfad. */
.zuhause-gruppen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 1.75rem;margin-top:1.75rem;padding-top:1.5rem;border-top:1px dashed var(--border)}
.zuhause-gruppe{min-width:0}
.zuhause-gruppe h3{font-size:1rem;line-height:1.5;margin:0 0 .25rem;color:var(--text)}
.zuhause-gruppe>p{font-size:.9375rem;line-height:1.7;margin:0 0 .75rem}
.zuhause-gruppe-liste{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.zuhause-gruppe-liste .visibility-station{min-height:4.25rem;flex-direction:row;align-items:center;gap:.875rem;padding:.9375rem 1.1875rem}
.zuhause-gruppe-liste .visibility-station-label{flex:1}
.zuhause-gruppe-liste .visibility-station-number{min-width:1.375rem}
.zuhause-gruppe-liste .visibility-station-selected{margin:0}

/* Je Karte: Grundlage und Quellen. Die Auswahl wiegt (0,2,0), weil
   visibility-lab.css Absätze in den Karten mit (0,1,1) setzt. */
.visibility-observation .zuhause-grundlage{margin-top:.875rem;font-size:.875rem;line-height:1.6;color:var(--muted)}
.zuhause-grundlage-titel{font-weight:600;color:var(--text)}
.zuhause-quellen{list-style:none;margin:.75rem 0 0;padding:.75rem 0 0;border-top:1px solid var(--line)}
.zuhause-quellen li{font-size:.875rem;line-height:1.6;color:var(--muted)}
.zuhause-quellen li+li{margin-top:.375rem}
.zuhause-quellen a{color:var(--action);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}

/* Hinweis bei Mitnutzern und Kontoangreifern auf den Abschnitt zum Umfeld. */
.visibility-observer-advice .zuhause-umfeld-hinweis{margin-top:.625rem;font-size:.9375rem}

/* Wenn jemand aus dem Umfeld mitsieht: ruhig, mit Kante und Wort, ohne Alarmfarbe. */
.zuhause-umfeld{margin:0 0 1.875rem;padding:1.25rem 1.375rem;border:1px solid var(--line);border-left:3px solid var(--info);background:var(--info-bg);border-radius:7px;max-width:100ch}
.zuhause-umfeld h3{font-size:1.0625rem;line-height:1.45;margin:0 0 .5rem}
.zuhause-umfeld p{font-size:.9375rem;line-height:1.8}
.zuhause-umfeld p+p{margin-top:.625rem}
.zuhause-umfeld a{color:var(--action);text-decoration:underline;text-underline-offset:3px}

.zuhause-main .visibility-table th:first-child{width:24%}

@media(max-width:1280px){
  .zuhause-main .visibility-routes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1100px){
  .zuhause-gruppen{grid-template-columns:1fr}
}
@media(max-width:760px){
  .zuhause-main .visibility-routes{grid-template-columns:1fr}
  .zuhause-steckbrief{gap:.75rem}
}
@media(forced-colors:active){
  .zuhause-umfeld{border:1px solid CanvasText;border-left-width:3px}
}

/* Druck: Palette, Ränder und das Ausblenden der Bedienung regeln styles.css und
   visibility-lab.css. Hier nur, was dieses Labor zusätzlich braucht. Muss am Ende
   der Datei stehen. */
@media print{
  .zuhause-gruppen,.zuhause-steckbrief{display:block}
  .zuhause-gruppe,.zuhause-steckbrief>div,.zuhause-umfeld{break-inside:avoid;margin-bottom:.75rem}
  .zuhause-quellen li{break-inside:avoid}
}