/* "Auswanderungen" section on geschichte-derendingens.html: world map, controls, panel and list. */
.emigration{
  --emig-sea:#C9DCDF;--emig-land:#F6F0E4;--emig-coast:#8FAAAE;--emig-border:#9C8B70;--emig-admin:#BCAD93;
  --emig-arrow:var(--accent,#8A4B22);--emig-active:var(--primary,#2E4A36);--emig-hub:var(--primary,#2E4A36)
}
.emig-intro{max-width:760px}
.emig-intro p{color:var(--text-soft,#3F463F);line-height:1.75}
.emig-intro p+p{margin-top:12px}
.emig-fallback{margin-top:20px;color:var(--muted)}
.emig-error{display:block;margin-top:8px;color:var(--accent-dark,#5E3013);font-weight:700}
.emig-app{margin-top:28px}

/* Controls: scope toggle (segmented radio group) and the year slider with its decade histogram. */
.emig-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:24px 40px;align-items:start}
.emig-scope{border:0;margin:0;padding:0;min-width:0}
.emig-scope legend,.emig-timeline-head label{display:block;padding:0;margin-bottom:8px;font-weight:700;color:var(--text)}
.emig-segments{display:flex;flex-direction:column;border:1.5px solid var(--primary);border-radius:10px;overflow:hidden;background:var(--paper)}
.emig-seg{position:relative;display:flex}
.emig-seg+.emig-seg{border-top:1.5px solid var(--primary)}
.emig-scope-hint{margin:8px 0 0;color:var(--muted);font-size:.86rem;line-height:1.45}
.emig-seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.emig-seg-box{flex:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;min-height:48px;padding:8px 14px;text-align:center;color:var(--primary);font-weight:700;cursor:pointer;line-height:1.3}
.emig-seg input:checked+.emig-seg-box{background:var(--primary);color:#fff}
.emig-seg input:focus-visible+.emig-seg-box{outline:3px solid var(--accent);outline-offset:-5px}
.emig-scope-count{font-weight:400}
.emig-timeline{min-width:0}
.emig-timeline-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.emig-timeline-head label{margin:0}
.emig-year-value{font-family:var(--font-display);font-size:1.6rem;color:var(--primary);line-height:1}
.emig-histogram{display:flex;align-items:flex-end;gap:2px;height:56px;margin-top:8px;padding:0 10px;border-bottom:1px solid var(--border-strong,#CFC3AE)}
.emig-bar{flex:1 1 0;min-width:0;height:calc(var(--h,0) * 1%);min-height:1px;background:#D8CDB8;border-radius:2px 2px 0 0}
.emig-bar.is-past{background:#B98A63}
.emig-bar.is-current{background:var(--emig-arrow)}
.emig-range{display:block;width:100%;min-height:44px;margin:0;accent-color:var(--primary);cursor:pointer}
.emig-axis{display:flex;justify-content:space-between;padding:0 4px;margin-top:-6px;color:var(--muted);font-size:.85rem}
.emig-timeline-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:8px}
.emig-play{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:8px 18px;border:1.5px solid var(--primary);border-radius:10px;background:var(--paper);color:var(--primary);font-weight:700}
.emig-play:hover{background:var(--primary);color:#fff}
.emig-play-icon{width:11px;height:13px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.emig-play.is-playing .emig-play-icon{background:linear-gradient(90deg,currentColor 0 35%,transparent 35% 65%,currentColor 65% 100%);clip-path:none}
.emig-hint{flex:1 1 220px;margin:0;color:var(--muted);font-size:.9rem;line-height:1.45}
.emig-summary{margin:22px 0 6px;font-weight:700;color:var(--primary-dark,#22382A);font-size:1.06rem}
.emig-scope-note{margin:0 0 8px;color:var(--muted);font-size:.92rem}

/* Map. */
.emig-skip{position:absolute;left:-9999px;top:auto;padding:10px 16px;min-height:44px;background:var(--paper);border:2px solid var(--primary);border-radius:8px;color:var(--primary);z-index:6}
.emig-skip:focus{position:relative;left:auto;display:inline-flex;align-items:center;margin-top:8px}
.emig-map-wrap{position:relative;margin-top:10px}
.emig-map{display:block;width:100%;height:auto;aspect-ratio:1000/438;border-radius:10px;border:1px solid var(--border-strong,#CFC3AE);background:var(--emig-sea);overflow:hidden}
/* Zoom buttons: a segmented group with aria-pressed. */
.emig-zoom{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 8px}
.emig-zoom-btn{min-height:44px;padding:8px 16px;border:1.5px solid var(--primary);border-radius:10px;background:var(--paper);color:var(--primary);font-weight:700}
.emig-zoom-btn:hover{background:var(--band)}
.emig-zoom-btn[aria-pressed="true"]{background:var(--primary);color:#fff}
.emig-sea{fill:var(--emig-sea)}
.emig-land{fill:var(--emig-land);stroke:var(--emig-coast);stroke-width:.8;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.emig-borders{fill:none;stroke:var(--emig-border);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
/* US state borders: only in zoomed views, lighter and thinner than country borders. */
.emig-admin1{fill:none;stroke:var(--emig-admin);stroke-width:.8;vector-effect:non-scaling-stroke;stroke-linejoin:round;display:none}
.emig-map.is-zoomed .emig-admin1{display:inline}
.emig-map.is-zoomed .emig-borders{stroke-width:1.4}
.emig-dest-label{font-family:var(--font-body);font-weight:700;fill:var(--text,#1F2A22);paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
.emig-arrow-hit{fill:none;stroke:transparent;pointer-events:stroke;cursor:pointer}
.emig-arrow-line{fill:none;stroke:var(--emig-arrow);stroke-linecap:round;pointer-events:none;opacity:.88}
.emig-arrow-head{fill:var(--emig-arrow);pointer-events:none;opacity:.88}
.emig-dest{cursor:pointer}
.emig-dot{fill:var(--emig-arrow);stroke:#fff;stroke-width:1.2;vector-effect:non-scaling-stroke}
/* Invisible, slightly larger tap/hover target around each dot. */
.emig-dot-hit{fill:transparent;stroke:none;pointer-events:all}
.emig-dot-halo,.emig-dot-ring{fill:none;display:none;pointer-events:none;vector-effect:non-scaling-stroke}
/* Focus: a dark ring with a white halo instead of the page's rectangular outline. */
.emig-map .emig-dest:focus{outline:none!important}
.emig-map .emig-dest:focus-visible{outline:none!important}
.emig-dest:focus-visible .emig-dot-halo{display:inline;stroke:#fff;stroke-width:7}
.emig-dest:focus-visible .emig-dot-ring{display:inline;stroke:var(--primary-dark,#22382A);stroke-width:3}
.emig-hub{pointer-events:none}
.emig-hub circle{fill:var(--emig-hub);stroke:#fff;stroke-width:1.5;vector-effect:non-scaling-stroke}
.emig-hub-label{font-family:var(--font-body);font-weight:700;fill:var(--emig-hub);paint-order:stroke;stroke:var(--emig-land);stroke-width:3px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.emig-map.has-active .emig-arrow:not(.is-active),.emig-map.has-active .emig-dest:not(.is-active){opacity:.3}
.emig-arrow.is-active .emig-arrow-line{stroke:var(--emig-active);opacity:1}
.emig-arrow.is-active .emig-arrow-head,.emig-dest.is-active .emig-dot{fill:var(--emig-active);opacity:1}
.emig-map-help{margin:10px 0 0;color:var(--muted);font-size:.9rem}

/* Detail panel: floats beside the hovered destination on wide screens, sits below the map on narrow ones. */
.emig-panel{z-index:5;width:min(340px,100%);max-height:320px;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--border-strong,#CFC3AE);border-top:4px solid var(--emig-arrow);border-radius:10px;box-shadow:var(--shadow-lift,0 18px 40px rgba(46,38,22,.16));color:var(--text)}
.emig-panel[hidden]{display:none}
.emig-panel.is-pinned{border-top-color:var(--emig-active)}
.emig-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:10px 6px 0 16px}
.emig-panel-title{margin:8px 0 0;font-size:1.2rem;color:var(--primary)}
.emig-panel-title:focus{outline:none}
.emig-panel-title:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.emig-panel-close{flex:none;width:44px;height:44px;border:0;border-radius:8px;background:transparent;color:var(--text);font-size:1.5rem;line-height:1}
.emig-panel-close:hover{background:var(--band)}
.emig-panel-meta{margin:2px 16px 6px;color:var(--muted);font-size:.9rem}
.emig-panel-note{margin:0 16px 6px;color:var(--muted);font-size:.82rem;line-height:1.4}
.emig-panel .emig-people{overflow:auto;padding:4px 16px 14px;margin:0;overscroll-behavior:contain}
.emig-people{list-style:none}
.emig-person{padding:5px 0;border-top:1px solid #EFE7D8;font-size:.92rem;line-height:1.45}
.emig-person:first-child{border-top:0}
.emig-person a{font-weight:700;color:var(--accent);padding:2px 0}
.emig-person-meta{color:var(--text-soft,#3F463F)}
@media (min-width:761px){
  .emig-panel{position:absolute;top:clamp(8px,calc(var(--y,50%) - 60px),calc(100% - 328px));left:calc(var(--x,50%) + 18px)}
  .emig-panel.is-left{left:auto;right:calc(100% - var(--x,50%) + 18px)}
}
@media (max-width:760px){
  .emig-controls{grid-template-columns:1fr}
  .emig-panel{position:static;width:100%;margin-top:12px;max-height:360px}
  .emig-map:not(.is-zoomed) .emig-hub-label{display:none}
  /* On phones a zoomed view gets a taller frame, so regions are actually usable. */
  .emig-map.is-zoomed{aspect-ratio:4/3}
  .emig-zoom-btn{flex:1 1 40%;padding:8px 10px}
}

/* Accessible list view, in sync with toggle and slider. */
.emig-list{margin-top:32px}
.emig-list h3{font-size:1.5rem;color:var(--primary);margin:0 0 8px}
.emig-region{margin-top:18px}
.emig-region h4{margin:0 0 6px;font-size:1rem;font-family:var(--font-body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.emig-dest-details{border:1px solid var(--border);border-radius:10px;background:var(--paper);margin-top:6px}
.emig-dest-details summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-height:44px;padding:10px 14px;cursor:pointer;list-style-position:inside}
.emig-dest-name{font-weight:700;color:var(--primary-dark,#22382A)}
.emig-dest-count{color:var(--muted);font-size:.92rem}
.emig-dest-details .emig-people{padding:0 14px 10px;margin:0}
.emig-empty{color:var(--muted)}
.emig-method{margin-top:24px;border-top:1px solid var(--border);padding-top:12px}
.emig-method summary{display:flex;align-items:center;min-height:44px;font-weight:700;color:var(--primary);cursor:pointer;list-style-position:inside}
.emig-method ul{margin:6px 0 0 20px;color:var(--text-soft,#3F463F);font-size:.95rem;line-height:1.6}
.emig-method li+li{margin-top:4px}
.emig-credit{margin-top:24px;color:var(--muted);font-size:.85rem}
@media (prefers-reduced-motion:reduce){.emig-panel{animation:none}}
@media print{.emig-controls,.emig-map-wrap,.emig-map-help,.emig-skip{display:none}.emig-dest-details{break-inside:avoid}}