/* Local learning model. All result colours inherit the tested theme tokens. */
.visibility-main{--lab-gap:22px}
.visibility-main .section-index{font-size:.8125rem;letter-spacing:.075em}
.visibility-main h2{font-size:clamp(1.35rem,1.9vw,1.65rem);line-height:1.35}
.visibility-main h3{line-height:1.4}
.visibility-hero{padding-bottom:29px}
.visibility-hero h1{font-size:clamp(2.15rem,3.3vw,3.6rem);line-height:1.15}
.visibility-hero h1>span{color:var(--muted)}
.visibility-hero .hero-description{max-width:76ch;font-size:1.0625rem;line-height:1.8}
.visibility-example{display:flex;align-items:center;gap:16px;padding:16px 20px;border:1px solid var(--line);border-left:3px solid var(--action);background:var(--glow);border-radius:7px;margin-bottom:30px}
.visibility-example-tag{font-size:.8125rem;letter-spacing:.06em;font-weight:600;color:var(--action);flex-shrink:0}
.visibility-example p{font-size:.9375rem;line-height:1.7}
.visibility-example code,.visibility-origin code{color:var(--text)}
.visibility-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:15px}
.visibility-lead{font-size:1rem;line-height:1.75;max-width:82ch;margin:12px 0 22px}
.visibility-controls{padding:28px}
.visibility-route-fieldset,.visibility-routes{margin:0;padding:0;border:0;min-width:0}
.visibility-routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.visibility-route{display:flex;align-items:flex-start;gap:12px;padding:19px 16px;background:var(--canvas);border:1px solid var(--border);border-radius:7px;cursor:pointer;min-width:0;margin:0;position:relative}
.visibility-route input,.visibility-option input{width:20px;height:20px;min-height:20px;flex:0 0 20px;accent-color:var(--action);padding:0;margin:3px 0 0;cursor:pointer}
.visibility-route>span:not(.visibility-route-number){min-width:0}
.visibility-route strong{display:block;font-size:1.0625rem;line-height:1.45;padding-right:18px}
.visibility-route small{display:block;color:var(--muted);font-size:.9375rem;line-height:1.65;font-weight:400;margin-top:7px}
.visibility-route-number{color:var(--muted);font-size:.8125rem;font-weight:400;position:absolute;right:12px;top:13px}
.visibility-route:has(input:checked){border-color:var(--action);box-shadow:inset 0 0 0 1px var(--action);background:var(--glow)}
.visibility-route:has(input:checked) strong,.visibility-route:has(input:checked) .visibility-route-number{color:var(--action)}
.visibility-route:hover{background:var(--raised)}
.visibility-route:focus-within{outline:3px solid var(--focus);outline-offset:3px}
.visibility-route input:focus-visible{outline:none}
.visibility-options{display:flex;flex-wrap:wrap;gap:16px 30px;margin-top:25px;padding-top:24px;border-top:1px solid var(--line)}
.visibility-option{display:flex;align-items:flex-start;gap:12px;margin:0;cursor:pointer;flex:1 1 230px;padding:3px 0;min-width:0}
.visibility-option strong{font-size:1rem;line-height:1.6;display:block}
.visibility-option small{font-size:.875rem;font-weight:400;color:var(--muted);display:block;line-height:1.65;margin-top:4px}
.visibility-controls>.field-help{font-size:.9375rem;margin-top:23px;border-top:1px solid var(--line);padding-top:17px;max-width:none}
.visibility-controls button:disabled{cursor:not-allowed}
.visibility-load-note{margin-top:20px}
.visibility-experiment{padding-top:41px}
.visibility-scenario-summary{display:flex;align-items:center;justify-content:space-between;gap:32px;background:var(--surface);border:1px solid var(--line);border-radius:9px 9px 0 0;padding:24px 27px}
.visibility-scenario-tags{display:block;font-size:.875rem;line-height:1.65;color:var(--action);margin-bottom:10px}
.visibility-scenario-summary h3{font-size:1.375rem;margin-bottom:10px}
.visibility-scenario-summary p{font-size:1rem;line-height:1.8;max-width:82ch}
.visibility-model-mark{font-size:.8125rem;letter-spacing:.06em;line-height:1.7;text-align:right;color:var(--muted);flex-shrink:0}
.visibility-path-panel{padding:25px 27px 30px;border:1px solid var(--line);border-top:0;background:var(--canvas)}
.visibility-path-intro{font-size:.9375rem;line-height:1.8;margin-bottom:23px}
.visibility-path-intro strong{color:var(--text)}
.visibility-origin{display:flex;align-items:center;gap:12px;margin:0 0 24px;color:var(--muted)}
.visibility-origin-icon{color:var(--action);font-size:1.4rem;width:38px;height:38px;border:1px solid var(--line);border-radius:6px;text-align:center;flex-shrink:0}
.visibility-origin strong{font-size:.9375rem;font-weight:600;color:var(--text);display:block}
.visibility-origin div>span{font-size:.875rem;line-height:1.7;display:block}
.visibility-path{padding:0;margin:0;list-style:none;display:flex;gap:24px;align-items:stretch}
.visibility-path>li{flex:1 1 0;min-width:0;position:relative}
.visibility-path>li+li:before{content:"→";position:absolute;left:-24px;width:24px;top:36px;text-align:center;color:var(--muted);font-size:1.0625rem}
.visibility-station{width:100%;height:100%;min-height:120px;border:1px solid var(--border);border-radius:7px;background:var(--surface);text-align:left;padding:16px 13px;display:flex;align-items:flex-start;flex-direction:column;gap:9px;line-height:1.5}
.visibility-station:hover{background:var(--raised)}
.visibility-station[aria-pressed=true]{border-color:var(--action);box-shadow:inset 0 0 0 1px var(--action);background:var(--glow)}
.visibility-station-label{font-size:1rem;font-weight:600;overflow-wrap:anywhere}
.visibility-station-number{font-size:.8125rem;color:var(--muted);line-height:1.4}
.visibility-station-selected{font-size:.875rem;color:var(--action);margin-top:auto;font-weight:500}
.visibility-station[aria-pressed=false] .visibility-station-selected{visibility:hidden}
.visibility-operator-group{margin-top:24px;border-top:1px dashed var(--border);padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.visibility-operator-group>p{font-size:.9375rem;line-height:1.75;max-width:70ch}
.visibility-operator-group strong{color:var(--text)}
.visibility-operator-group>div{flex:0 0 230px}
.visibility-operator-group .visibility-station{min-height:100px}
.visibility-observer{padding:27px;background:var(--surface);border:1px solid var(--line);border-top:0;border-radius:0 0 9px 9px}
.visibility-observer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px}
.visibility-observer-head h3{font-size:1.5rem;margin:0 0 9px}
.visibility-observer-head p{font-size:1rem;line-height:1.8;max-width:80ch}
.visibility-observer-head .quiet-link{font-size:.875rem;flex-shrink:0}
#visibility-observer-heading:focus{outline:none}
.visibility-observations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.visibility-observation{border:1px solid var(--line);border-radius:7px;background:var(--canvas);padding:20px;min-width:0}
.visibility-observation-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.visibility-observation h4{font-size:1.0625rem;line-height:1.45;letter-spacing:0}
.visibility-observation p{font-size:1rem;line-height:1.8}
.visibility-state{display:inline-flex;gap:7px;align-items:center;border:1px solid transparent;font-size:.875rem;line-height:1.5;font-weight:600;border-radius:4px;padding:4px 8px;white-space:nowrap}
.visibility-state:before{width:6px;height:6px;border:1px solid currentColor;border-radius:50%;content:"";flex-shrink:0}
.visibility-state.visible{color:var(--warning);background:var(--warning-bg)}
.visibility-state.visible:before{background:currentColor}
.visibility-state.hidden{color:var(--success);background:var(--success-bg)}
.visibility-state.conditional{color:var(--info);background:var(--info-bg)}
.visibility-observer-advice{display:flex;gap:15px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.visibility-observer-advice>span{color:var(--action);font-size:1.3rem;flex-shrink:0}
.visibility-observer-advice h4{font-size:1rem;letter-spacing:0;margin-bottom:9px}
.visibility-observer-advice p{font-size:1rem;line-height:1.8;max-width:90ch}
.visibility-takeaways,.visibility-protection{padding-top:40px}
.visibility-insights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
.visibility-insight{padding:22px;border:1px solid var(--line);background:var(--surface);border-radius:8px;min-width:0;transition:border-color 150ms}
/* Nur der Rand: Diese Karten erklaeren, sie fuehren nirgendwohin. */
.visibility-insight:hover{border-color:var(--border)}
.visibility-insight-number{color:var(--action);font-size:.875rem;margin-bottom:13px;display:block}
.visibility-insight h3{font-size:1.125rem;margin-bottom:12px}
.visibility-insight p{font-size:1rem;line-height:1.8}
.visibility-matrix-panel{margin-top:36px}
.visibility-legend{display:flex;flex-wrap:wrap;list-style:none;margin:24px 0;padding:0;gap:14px 24px}
.visibility-legend li{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.visibility-legend li>span:last-child{font-size:.875rem;color:var(--muted)}
.visibility-table-scroll{position:relative;overflow-x:auto;max-width:100%;scrollbar-color:var(--border) var(--canvas);border:1px solid var(--line);border-radius:6px}
.visibility-table-scroll:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.visibility-table{border-collapse:collapse;width:100%;min-width:660px;font-size:.9375rem}
.visibility-table caption{text-align:left;font-size:.9375rem;padding:15px 17px;line-height:1.7;color:var(--muted);background:var(--canvas);border-bottom:1px solid var(--line)}
.visibility-table th,.visibility-table td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.visibility-table thead th{font-size:.875rem;line-height:1.6;color:var(--muted);font-weight:500;background:var(--canvas)}
.visibility-table th:first-child{width:25%}
.visibility-table tbody tr:last-child th,.visibility-table tbody tr:last-child td{border-bottom:0}
.visibility-table tbody tr[data-selected=true]{background:var(--glow)}
.visibility-table button{font-size:.9375rem;text-align:left;background:none;color:var(--action);padding:8px 0;min-height:44px;line-height:1.55;text-decoration:underline;text-underline-offset:4px}
.visibility-table .visibility-state{font-size:.875rem;padding:3px 6px}
.visibility-recommendations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));counter-reset:protection;list-style:none;padding:0;margin:22px 0 0;gap:16px}
.visibility-recommendations li{display:flex;gap:14px;border-top:1px solid var(--line);padding:20px 8px 0 0;color:var(--muted);font-size:1rem;line-height:1.8;counter-increment:protection}
.visibility-recommendations li:before{content:counter(protection,decimal-leading-zero);color:var(--action);font-size:.875rem;flex-shrink:0;margin-top:2px}
.visibility-foundations{margin-top:42px;padding-top:35px;border-top:1px solid var(--line)}
.visibility-foundation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:27px;margin:26px 0 30px}
.visibility-foundation-grid h3{font-size:1.0625rem;margin-bottom:13px}
.visibility-foundation-grid p{font-size:.9375rem;line-height:1.8}
.visibility-details{border-top:1px solid var(--line)}
.visibility-details:last-child{border-bottom:1px solid var(--line)}
.visibility-details summary{font-size:1rem;line-height:1.7;font-weight:600;cursor:pointer;padding:19px 4px;min-height:60px}
.visibility-details-body{padding:0 4px 24px;max-width:100ch}
.visibility-details-body p,.visibility-details-body li{font-size:.9375rem;line-height:1.8;color:var(--muted)}
.visibility-details-body h3{font-size:1rem;margin:24px 0 11px}
.visibility-details-body ul{padding-left:22px;margin:14px 0 22px}
.visibility-details-body li+li{margin-top:12px}
.visibility-details-body a{color:var(--action);text-decoration:underline;text-underline-offset:4px}
.visibility-next{display:flex;align-items:center;justify-content:space-between;gap:28px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:28px;margin-top:34px}
.visibility-next h2{font-size:1.375rem}
.visibility-next p{margin-top:12px;font-size:1rem;line-height:1.8;max-width:70ch}
.visibility-next .button{flex-shrink:0}
@media(max-width:1280px){.visibility-routes{grid-template-columns:1fr}.visibility-route{padding:16px 20px}.visibility-route strong{padding-right:25px}.visibility-route small{margin-top:3px}.visibility-insights{grid-template-columns:1fr}.visibility-insight{padding:23px}.visibility-model-mark{display:none}.visibility-observer-head{flex-direction:column;gap:8px}.visibility-next{align-items:flex-start;flex-direction:column}.visibility-path{gap:18px}.visibility-path>li+li:before{left:-18px;width:18px}.visibility-station{padding:13px 10px}.visibility-path>li+li:before{top:28px}}
@media(max-width:1100px){.visibility-path{flex-direction:column;gap:23px}.visibility-path>li+li:before{content:"↓";left:24px;top:-24px;width:20px}.visibility-station{min-height:68px;flex-direction:row;align-items:center;gap:14px;padding:15px 19px}.visibility-station-label{flex:1}.visibility-station-number{min-width:22px}.visibility-station-selected{margin:0}.visibility-operator-group .visibility-station{min-height:68px}.visibility-operator-group{align-items:stretch;flex-direction:column;gap:16px}.visibility-operator-group>div{flex:auto}.visibility-foundation-grid{grid-template-columns:1fr;gap:24px}.visibility-observations{grid-template-columns:1fr}.visibility-recommendations{grid-template-columns:1fr}.visibility-recommendations li{padding-top:17px}}
@media(max-width:760px){.visibility-controls{padding:23px}.visibility-options{gap:20px}.visibility-section-heading{flex-direction:column;align-items:flex-start;gap:10px}.visibility-section-heading>.button{padding-left:0;padding-right:0;min-height:44px}.visibility-example{align-items:flex-start;flex-direction:column;gap:8px}.visibility-scenario-summary{padding:23px}.visibility-path-panel{padding:23px}.visibility-observer{padding:23px}.visibility-experiment,.visibility-takeaways,.visibility-protection{padding-top:32px}.visibility-hero h1{font-size:clamp(2rem,6.4vw,3rem)}.visibility-observer-head .quiet-link{min-height:44px}.visibility-origin{align-items:flex-start}.visibility-next{padding:23px}}
@media(max-width:470px){.visibility-controls{padding:18px}.visibility-route{padding:16px 13px}.visibility-route strong{font-size:1rem}.visibility-options{margin-top:20px;padding-top:20px}.visibility-option{flex-basis:100%}.visibility-scenario-summary,.visibility-path-panel,.visibility-observer{padding:20px 17px}.visibility-scenario-summary h3{font-size:1.25rem}.visibility-station{padding:13px 12px;gap:9px;flex-wrap:wrap}.visibility-station-selected{font-size:.8125rem}.visibility-station-label{font-size:.9375rem}.visibility-observation{padding:17px}.visibility-observation-head{gap:10px}.visibility-observer-head h3{font-size:1.3rem}.visibility-insight{padding:20px}.visibility-example{padding:15px 17px}.visibility-next{padding:20px}.visibility-next .button{width:100%}.visibility-legend{gap:17px}.visibility-legend li{align-items:flex-start;flex-direction:column;gap:6px}.visibility-origin code{display:inline-block}.visibility-model-mark{display:none}}
@media(forced-colors:active){.visibility-route:has(input:checked),.visibility-station[aria-pressed=true]{border:3px solid Highlight}.visibility-state{border-color:CanvasText}.visibility-route:focus-within{outline-color:Highlight}}
@media print{.visibility-controls,.visibility-next{display:none}.visibility-scenario-summary,.visibility-observer,.visibility-insight,.visibility-observation{break-inside:avoid}.visibility-table-scroll{overflow:visible}.visibility-main p,.visibility-main li{color:#222}}