/* Runde 7 C: Insel-IT-Seite. Karte der Ostfriesischen Inseln (Inline-SVG, nur transform/opacity bewegt), Seite um die Karte herum komponiert. Nur auf /inseln und den Uebersetzungen geladen. */
.isle-hero{display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(8px,3vw,56px);padding-bottom:clamp(40px,6vw,80px)!important}
.isle-hero::after{display:none!important}
.isle-hero .inseln-hero-content{max-width:none}
.isle-hero h1{max-width:12ch}
.isle-hero .wave-container{display:none!important}

.isle-map{position:relative;width:100%;aspect-ratio:1000/480;color:var(--c-accent-inv);-webkit-user-select:none;user-select:none;-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 90%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 10%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 90%,transparent);mask-composite:intersect}
.isle-hero .inseln-hero-btns{justify-content:flex-start;margin:28px 0 0;padding:0}
.isle-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.isle-waves path{stroke:currentColor;opacity:var(--o,.28);animation:isle-wave var(--d,18s) linear infinite;will-change:transform}
@keyframes isle-wave{to{transform:translate3d(-80px,0,0)}}
.isle-land .mainland{fill:#111e2b;stroke:rgba(217,214,195,.6);stroke-width:1.1}
.isle-land .mdots{fill:url(#isle-dots);stroke:none;color:var(--c-accent-inv)}
.isle-land .sand{fill:#13222f;stroke:rgba(217,214,195,.35);stroke-width:.9}
.isle-links .lk{stroke:rgba(98,168,244,.5);stroke-width:1;stroke-dasharray:2 8;animation:isle-flow 6s linear infinite;transition:stroke .3s,stroke-width .3s}
@keyframes isle-flow{to{stroke-dashoffset:-20}}
.isle-links .lk.is-on{stroke:var(--c-accent-inv);stroke-width:1.6;stroke-dasharray:3 5;animation-duration:2.6s}
.isle{cursor:pointer;outline:none}
.isle .hit{fill:transparent}
.isle .shape{fill:#182a3b;stroke:rgba(217,214,195,.85);stroke-width:1.2;transition:fill .3s,stroke .3s}
.isle .dot{fill:var(--c-accent-inv);transition:transform .3s;transform-box:fill-box;transform-origin:center}
.isle .ring{fill:none;stroke:var(--c-accent-inv);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:isle-pulse 4s ease-out infinite}
.isle:nth-child(2n) .ring{animation-delay:-1.3s}.isle:nth-child(3n) .ring{animation-delay:-2.6s}
@keyframes isle-pulse{0%{transform:scale(1);opacity:.75}100%{transform:scale(3.6);opacity:0}}
.isle:hover .shape,.isle:focus-visible .shape,.isle.is-on .shape{fill:#1d3248;stroke:var(--c-beige)}
.isle:hover .dot,.isle:focus-visible .dot,.isle.is-on .dot{transform:scale(1.6)}
.isle:focus-visible .shape{stroke-width:2}
.isle-hub .dot{fill:var(--c-beige)}
.isle-hub .ring{fill:none;stroke:var(--c-beige);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:isle-pulse 3.2s ease-out infinite}
.isle-hub .ring.r2{animation-delay:-1.6s}
.isle-lbl{position:absolute;left:var(--x);top:var(--y);font-family:var(--font-mono);font-size:clamp(.5rem,.62vw + .3rem,.6875rem);letter-spacing:.14em;text-transform:uppercase;color:var(--c-beige-mute);white-space:nowrap;pointer-events:none;transition:color .3s,opacity .3s,transform .3s;opacity:.85}
.isle-lbl.is-up{transform:translate(-50%,-190%)}
.isle-lbl.is-dn{transform:translate(-50%,115%)}
.isle-lbl.is-hub{transform:translate(-50%,130%);color:var(--c-beige);opacity:1}
.isle-lbl.is-on{color:var(--c-beige);opacity:1}
.isle-lbl.is-up.is-on{transform:translate(-50%,-210%)}
.isle-lbl.is-dn.is-on{transform:translate(-50%,135%)}
@media(prefers-reduced-motion:reduce){.isle-svg *{animation:none!important}.isle-links .lk{stroke-dasharray:none;opacity:.5}.isle-waves path{will-change:auto}}

/* Seite um die Karte herum: keine gleichfoermigen Kacheln */
.pg-main .challenges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);counter-reset:ch;background:none;border:0}
.pg-main .challenge-card{counter-increment:ch;background:none!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;padding:28px 0 0!important;position:relative}
.pg-main .challenge-card:nth-child(2){margin-top:clamp(0px,4vw,56px)}.pg-main .challenge-card:nth-child(3){margin-top:clamp(0px,8vw,112px)}
.pg-main .challenge-card::before{content:"0" counter(ch);display:block;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;color:var(--c-accent-inv);margin-bottom:22px}
.pg-main .challenge-icon{display:none!important}
.pg-main .challenge-card h3{font-weight:200;font-size:clamp(1.5rem,1.1rem + 1.2vw,2.2rem);letter-spacing:-.025em;line-height:1.12;margin:0 0 14px}
.pg-main .inseln-services{display:block!important;border-top:1px solid var(--line);margin-top:8px}
.pg-main .inseln-service-card{display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px clamp(16px,4vw,64px);align-items:baseline;background:none!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;padding:clamp(18px,2.4vw,30px) 0!important;transition:padding-left .3s var(--ease)}
.pg-main .inseln-service-card:hover{padding-left:clamp(8px,1vw,16px)!important}
.pg-main .inseln-service-card .svc-icon{display:none!important}
.pg-main .inseln-service-card h3{font-weight:300;font-size:clamp(1.15rem,1rem + .5vw,1.5rem);letter-spacing:-.01em;margin:0}
.pg-main .inseln-service-card p{margin:0;color:var(--mute)}
.pg-main .inseln-highlight{display:block!important;background:none!important;border:0!important;border-left:2px solid var(--c-accent-inv)!important;border-radius:0!important;padding:8px 0 8px clamp(20px,3vw,40px)!important;max-width:78ch}
.pg-main .inseln-highlight-icon{display:none!important}
.pg-main .inseln-highlight h3{font-weight:200;font-size:clamp(1.5rem,1.1rem + 1.2vw,2.2rem);letter-spacing:-.025em;margin:0 0 12px}
/* Inselkette statt Kachelraster */
.pg-main .islands-grid{display:flex!important;flex-wrap:nowrap;justify-content:space-between;gap:0;position:relative;padding:44px 0 0;grid-template-columns:none!important}
.pg-main .islands-grid::before{content:"";position:absolute;left:0;right:0;top:20px;border-top:1px dashed rgba(217,214,195,.28)}
.pg-main .island-tile{background:none!important;border:0!important;border-radius:0!important;padding:0 4px!important;display:block!important;text-align:center;position:relative;flex:1 1 0;min-width:0;cursor:default;outline:none}
.pg-main .island-tile::before{content:"";position:absolute;left:50%;top:-30px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--c-accent-inv);box-shadow:0 0 0 4px rgba(98,168,244,.18);transition:transform .3s,box-shadow .3s}
.pg-main .island-tile:nth-child(odd){transform:translateY(0)}.pg-main .island-tile:nth-child(even){transform:translateY(10px)}
.pg-main .island-tile:hover::before,.pg-main .island-tile.is-on::before,.pg-main .island-tile:focus-visible::before{transform:scale(1.5);box-shadow:0 0 0 7px rgba(98,168,244,.22)}
.pg-main .island-icon{display:none!important}
.pg-main .island-tile span:not(.island-icon){display:block;font-weight:300;font-size:clamp(.8125rem,.6rem + .7vw,1.25rem);letter-spacing:-.01em;color:var(--fg);overflow-wrap:anywhere;transition:color .3s}
.pg-main .island-tile small{display:block;font-family:var(--font-mono);font-size:clamp(.5rem,.35rem + .45vw,.6875rem);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:6px}
.pg-main .island-tile:hover span,.pg-main .island-tile.is-on span{color:var(--c-beige)}

@media(max-width:900px){
  .isle-hero{grid-template-columns:1fr!important}
  .isle-map{margin-top:12px}
  .pg-main .challenges{grid-template-columns:1fr}
  .pg-main .challenge-card:nth-child(2),.pg-main .challenge-card:nth-child(3){margin-top:0}
  .pg-main .inseln-service-card{grid-template-columns:1fr}
  .pg-main .islands-grid{flex-wrap:wrap;justify-content:flex-start;row-gap:28px;padding-top:8px}
  .pg-main .islands-grid::before{display:none}
  .pg-main .island-tile{flex:0 0 33.333%;text-align:left;padding:0 0 0 22px!important}
  .pg-main .island-tile::before{left:0;top:7px;margin-left:0}
  .pg-main .island-tile:nth-child(even){transform:none}
}

/* Runde 8 Punkt 7: Inselkette mit Inselformen statt Punkten (gleicher Massstab wie die Karte), feiner Leuchtpunkt, Name hebt sich bei Hover, Fokus, Antippen */
.pg-main .islands-grid{padding-top:0;align-items:end}
.pg-main .islands-grid::before{top:auto;bottom:62px}
.pg-main .island-tile::before{display:none}
.pg-main .island-tile{--s:.72;display:grid!important;justify-items:center;align-content:end;gap:14px;padding:0 6px!important}
.island-ico{display:block;width:calc(var(--w) * var(--s) * 1px);height:calc(var(--h) * var(--s) * 1px);color:var(--c-accent-inv)}
.island-ico svg{display:block;width:100%;height:100%;overflow:visible}
.island-ico .ico-land{fill:#182a3b;stroke:rgba(217,214,195,.75);stroke-width:1.3;vector-effect:non-scaling-stroke;transition:fill .3s,stroke .3s}
.island-ico .ico-dot{fill:currentColor}
.island-ico .ico-halo{fill:currentColor;opacity:.18;transform-box:fill-box;transform-origin:center;animation:ico-halo 3.6s ease-in-out infinite}
.pg-main .island-tile:nth-child(2n) .ico-halo{animation-delay:-1.2s}.pg-main .island-tile:nth-child(3n) .ico-halo{animation-delay:-2.4s}
@keyframes ico-halo{0%,100%{transform:scale(.7);opacity:.12}50%{transform:scale(1.25);opacity:.3}}
.pg-main .island-tile:hover .ico-land,.pg-main .island-tile:focus-visible .ico-land,.pg-main .island-tile.is-on .ico-land{fill:#1d3248;stroke:var(--c-beige)}
.pg-main .island-tile:focus-visible{outline:2px solid var(--c-accent-inv);outline-offset:6px;border-radius:8px}
.pg-main .island-tile span:not(.island-ico){margin-top:4px}
@media(max-width:900px){.pg-main .island-tile{--s:.52;justify-items:start;padding:0!important}.pg-main .islands-grid{row-gap:32px}}
@media(prefers-reduced-motion:reduce){.island-ico .ico-halo{animation:none}}
.pg-main .islands-grid::before{display:none}
.pg-main .island-tile:nth-child(even),.pg-main .island-tile:nth-child(odd){transform:none}
.pg-main .island-tile{align-content:start;grid-template-rows:64px auto auto;border-top:1px dashed rgba(217,214,195,.22)!important;padding-top:20px!important}
.pg-main .island-tile .island-ico{align-self:end}
.pg-main .island-tile small{margin-top:2px}
@media(max-width:900px){.pg-main .island-tile{grid-template-rows:48px auto auto}}

/* Runde 10 A1: Ablauf der Inselkarte beim Sichtbarwerden (Klassen aus js/islands.js: js-intro = wartet, is-run = Ablauf).
   0 bis 1,8 s Kueste zeichnet sich nach, ab 1,1 s leuchten die Inseln von West nach Ost auf (je 0,32 s versetzt), dazu je ein Datenimpuls von Ihlow.
   Danach Dauerzustand: Wellen ziehen weiter, Ringe pulsieren langsam, alle 9 s laeuft je Insel ein Impuls (versetzt).
   Die Einblendungen halten ihren Endwert nicht fest (fill-mode backwards), damit Hover und Fokus danach wie bisher wirken. */
.isle-map.js-intro:not(.is-run) .isle-land .mainland{stroke-dasharray:1;stroke-dashoffset:1}
.isle-map.js-intro:not(.is-run) :is(.isle-land .mdots,.isle-land .sand,.isle,.isle-links .lk,.isle-lbl:not(.is-hub)){opacity:0}
.isle-map.is-run .isle-land .mainland{animation:isle-draw 1.8s cubic-bezier(.6,.05,.3,1) backwards}
.isle-map.is-run :is(.isle-land .mdots,.isle-land .sand){animation:isle-show 1.2s .8s ease-out backwards}
.isle-map.is-run .isle{animation:isle-show .7s ease-out backwards;animation-delay:calc(1.1s + var(--i,0) * .32s)}
.isle-map.is-run .isle .shape{animation:isle-flash 1.6s ease-out backwards;animation-delay:calc(1.1s + var(--i,0) * .32s)}
.isle-map.is-run .isle-lbl:not(.is-hub){animation:isle-show .7s ease-out backwards}
.isle-map.is-run .isle-lbl[data-isle="borkum"]{animation-delay:1.2s}.isle-map.is-run .isle-lbl[data-isle="juist"]{animation-delay:1.52s}.isle-map.is-run .isle-lbl[data-isle="norderney"]{animation-delay:1.84s}
.isle-map.is-run .isle-lbl[data-isle="baltrum"]{animation-delay:2.16s}.isle-map.is-run .isle-lbl[data-isle="langeoog"]{animation-delay:2.48s}.isle-map.is-run .isle-lbl[data-isle="spiekeroog"]{animation-delay:2.8s}.isle-map.is-run .isle-lbl[data-isle="wangerooge"]{animation-delay:3.12s}
.isle-map.is-run .isle-links .lk{animation:isle-show .6s ease-out backwards,isle-flow 6s linear infinite;animation-delay:calc(.9s + var(--i,0) * .32s),0s}
.isle-links .lk-p{fill:none;stroke:var(--c-beige);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:.045 1;stroke-dashoffset:.045;opacity:0;pointer-events:none}
.isle-map.is-run .isle-links .lk-p{animation:isle-run 9s ease-in-out infinite;animation-delay:calc(.8s + var(--i,0) * .32s)}
@keyframes isle-draw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes isle-show{from{opacity:0}}
@keyframes isle-flash{0%{fill:#182a3b;stroke:rgba(217,214,195,.85)}35%{fill:#2a4a6a;stroke:#ece9dc}100%{fill:#182a3b;stroke:rgba(217,214,195,.85)}}
@keyframes isle-run{0%{stroke-dashoffset:.045;opacity:0}2%{opacity:1}14%{opacity:1}16%{stroke-dashoffset:-1;opacity:0}100%{stroke-dashoffset:-1;opacity:0}}
/* Insel-Kacheln: dezenter Einstieg von West nach Ost */
.islands-grid.js-intro:not(.is-run) .island-tile{opacity:0}
.islands-grid.is-run .island-tile{animation:isle-tile .6s ease-out backwards;animation-delay:calc(var(--i,0) * .12s)}
@keyframes isle-tile{from{opacity:0;translate:0 10px}}
@media(prefers-reduced-motion:reduce){.isle-map .isle-land .mainland,.isle-map .isle,.isle-map .isle .shape,.isle-map .isle-links .lk,.isle-map .isle-lbl,.islands-grid .island-tile{animation:none!important}.isle-links .lk-p{display:none}}