Skip to Content

Changes for page Plan Your Data Management

Last modified by Veronika Kocher on Friday, 04 Sep 2026 14:45
From version 4.8
edited by Veronika Kocher
on Thursday, 03 Sep 2026 9:18
Change comment: There is no comment for this version
To version 4.11
edited by Veronika Kocher
on Thursday, 03 Sep 2026 13:04
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -258,21 +258,100 @@
258 258  {{/html}}
259 259  
260 260  {{html clean="false"}}
261 -<!-- SN_HORIZONTAL_BOX_HARMONIZER_START -->
262 -<style data-sn-horizontal-box-harmonizer="1">
263 -[data-sn-equal-height-managed="1"]{box-sizing:border-box}
264 -@media(max-width:767px){
265 - [data-sn-equal-height-managed="1"]{min-height:0!important}
261 +<!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_START -->
262 +
263 +<style data-sn-service-navigator-master="1">
264 +/* =========================================================
265 + MASTER TYPOGRAPHY
266 + ========================================================= */
267 +#xwikicontent h1,
268 +#xwikicontent h2,
269 +#xwikicontent h3,
270 +#xwikicontent h4,
271 +#xwikicontent h5,
272 +#xwikicontent h6,
273 +#xwikicontent .box-title,
274 +#xwikicontent [role="heading"],
275 +#xwikicontent h1 a,
276 +#xwikicontent h2 a,
277 +#xwikicontent h3 a,
278 +#xwikicontent h4 a,
279 +#xwikicontent h5 a,
280 +#xwikicontent h6 a,
281 +#xwikicontent .box-title a,
282 +#xwikicontent [role="heading"] a{
283 + text-align:left!important;
284 + text-justify:auto!important;
285 + word-spacing:normal!important;
266 266  }
287 +
288 +/* =========================================================
289 + COMING SOON / IN VORBEREITUNG
290 + ========================================================= */
291 +.sn-coming-soon-badge{
292 + display:inline-block;
293 + vertical-align:middle;
294 + margin-left:10px;
295 + padding:4px 8px;
296 + border-radius:14px;
297 + border:1px solid #efd9cc;
298 + background:#fff4ee;
299 + color:#8a4d36;
300 + font-size:11px;
301 + font-weight:700;
302 + letter-spacing:.055em;
303 + line-height:1.2;
304 + white-space:nowrap;
305 +}
306 +
307 +/* =========================================================
308 + NATIVE / DETAIL CALLOUT GEOMETRY
309 + Preserve existing backgrounds.
310 + ========================================================= */
311 +#xwikicontent .arsn-info,
312 +#xwikicontent .dmp-info,
313 +#xwikicontent .ido-info,
314 +#xwikicontent .pp-info,
315 +#xwikicontent .infomessage{
316 + box-sizing:border-box!important;
317 + border-left:4px solid #21b6d7!important;
318 + border-radius:8px;
319 + text-align:left!important;
320 + word-spacing:normal!important;
321 +}
322 +
323 +#xwikicontent .arsn-warn,
324 +#xwikicontent .dmp-warn,
325 +#xwikicontent .ido-warn,
326 +#xwikicontent .pp-warn,
327 +#xwikicontent .warn,
328 +#xwikicontent .warning,
329 +#xwikicontent .warningmessage,
330 +#xwikicontent .errormessage{
331 + box-sizing:border-box!important;
332 + border-left:4px solid #e94b13!important;
333 + border-radius:8px;
334 + text-align:left!important;
335 + word-spacing:normal!important;
336 +}
337 +
338 +[data-sn-master-equal-height],
339 +[data-sn-master-first-row]{
340 + box-sizing:border-box;
341 +}
267 267  </style>
268 -<script data-sn-horizontal-box-harmonizer="1">
343 +
344 +<script data-sn-service-navigator-master="1">
269 269  (function(){
270 270   "use strict";
271 271  
348 + var PAGE_KIND="detail";
349 + var PLACEHOLDER=false;
350 + var PLACEHOLDER_LABEL="COMING SOON";
351 +
272 272   var MOBILE_MAX=767;
273 - var ROW_TOLERANCE=4;
274 - var MIN_W=150;
275 - var MIN_H=36;
353 + var ROW_TOLERANCE=6;
354 + var RESIZE_DEBOUNCE=220;
276 276  
277 277   var root=
278 278   document.getElementById("xwikicontent")||
... ... @@ -282,212 +282,1044 @@
282 282  
283 283   if(!root)return;
284 284  
285 - var managed=new Set();
286 - var raf=0;
364 + var managedHeight=new Set();
365 + var managedMargin=new Set();
366 + var originalHeight=new WeakMap();
367 + var originalMargin=new WeakMap();
287 287  
288 - function num(v){
289 - var n=parseFloat(v);
369 + var resizeTimer=0;
370 + var running=false;
371 +
372 + var THEMES=[
373 + {
374 + name:"BLUE",
375 + accent:"#21b6d7",
376 + bg:"#eaf7fb",
377 + text:"#315d68",
378 + labels:[
379 + "HIER STARTEN",
380 + "ENTSCHEIDEN",
381 + "ÜBERPRÜFEN & ANPASSEN",
382 + "START HERE",
383 + "DECIDE",
384 + "REVIEW & ADAPT"
385 + ]
386 + },
387 + {
388 + name:"RED",
389 + accent:"#e94b13",
390 + bg:"#fff1ec",
391 + text:"#8a4d36",
392 + labels:[
393 + "PLANEN & ORGANISIEREN",
394 + "ORGANISIEREN & DOKUMENTIEREN",
395 + "PUBLIZIEREN & PRÄSENTIEREN",
396 + "PLAN & ORGANISE",
397 + "PLAN & ORGANIZE",
398 + "ORGANISE & DOCUMENT",
399 + "ORGANIZE & DOCUMENT",
400 + "PUBLISH & PRESENT"
401 + ]
402 + },
403 + {
404 + name:"YELLOW",
405 + accent:"#f0aa00",
406 + bg:"#fff8e7",
407 + text:"#785b17",
408 + labels:[
409 + "SCHÜTZEN & KLÄREN",
410 + "STANDARDISIEREN & IDENTIFIZIEREN",
411 + "ÖFFNEN, NACHNUTZEN & AUFFINDBAR MACHEN",
412 + "PROTECT & CLARIFY",
413 + "STANDARDISE & IDENTIFY",
414 + "STANDARDIZE & IDENTIFY",
415 + "OPEN, REUSE & MAKE FINDABLE"
416 + ]
417 + },
418 + {
419 + name:"GREEN",
420 + accent:"#38b76a",
421 + bg:"#edf9f1",
422 + text:"#3f7451",
423 + labels:[
424 + "INFRASTRUKTUR EINRICHTEN",
425 + "INFRASTRUKTUR & ZUSAMMENARBEIT EINRICHTEN",
426 + "SPEICHERN & ZUGRIFF STEUERN",
427 + "REPOSITORIUM, ERHALTEN & ÜBERGEBEN",
428 + "SET UP INFRASTRUCTURE",
429 + "SET UP INFRASTRUCTURE & COLLABORATION",
430 + "STORE & CONTROL ACCESS",
431 + "REPOSITORY, PRESERVE & HAND OVER"
432 + ]
433 + }
434 + ];
435 +
436 + function num(value){
437 + var n=parseFloat(value);
290 290   return Number.isFinite(n)?n:0;
291 291   }
292 292  
441 + function norm(value){
442 + return String(value||"")
443 + .replace(/\s+/g," ")
444 + .trim()
445 + .toUpperCase();
446 + }
447 +
293 293   function visible(el){
294 294   if(!el||el.nodeType!==1)return false;
295 - var s=getComputedStyle(el);
296 - if(s.display==="none"||s.visibility==="hidden"||Number(s.opacity)===0)return false;
297 - var r=el.getBoundingClientRect();
298 - return r.width>=MIN_W&&r.height>=MIN_H;
450 +
451 + var style=getComputedStyle(el);
452 + var rect=el.getBoundingClientRect();
453 +
454 + return (
455 + style.display!=="none"&&
456 + style.visibility!=="hidden"&&
457 + rect.width>20&&
458 + rect.height>4
459 + );
299 299   }
300 300  
301 - function excluded(el){
302 - return !el.matches||el.matches(
303 - "button,input,select,textarea,option,label,img,svg,canvas,table,thead,tbody,tfoot,tr,td,th,summary,script,style,noscript,template,.btn,.chip,[role=button]"
462 + function saveStyle(el,map,property){
463 + if(map.has(el))return;
464 +
465 + map.set(el,{
466 + value:el.style.getPropertyValue(property),
467 + priority:el.style.getPropertyPriority(property)
468 + });
469 + }
470 +
471 + function restoreStyle(el,map,property){
472 + var original=map.get(el);
473 +
474 + if(original&&original.value){
475 + el.style.setProperty(
476 + property,
477 + original.value,
478 + original.priority||""
479 + );
480 + }else{
481 + el.style.removeProperty(property);
482 + }
483 + }
484 +
485 + function resetRuntime(){
486 + managedHeight.forEach(function(el){
487 + restoreStyle(
488 + el,
489 + originalHeight,
490 + "min-height"
491 + );
492 + el.removeAttribute(
493 + "data-sn-master-equal-height"
494 + );
495 + });
496 +
497 + managedMargin.forEach(function(el){
498 + restoreStyle(
499 + el,
500 + originalMargin,
501 + "margin-top"
502 + );
503 + el.removeAttribute(
504 + "data-sn-master-first-row"
505 + );
506 + });
507 +
508 + managedHeight.clear();
509 + managedMargin.clear();
510 + }
511 +
512 + function themeFor(text){
513 + var value=norm(text);
514 +
515 + for(var i=0;i<THEMES.length;i++){
516 + for(var j=0;j<THEMES[i].labels.length;j++){
517 + var label=THEMES[i].labels[j];
518 +
519 + if(
520 + value===label||
521 + value.indexOf(label+" ")===0||
522 + value.indexOf(label+" -")===0||
523 + value.indexOf(label+" ·")===0
524 + ){
525 + return THEMES[i];
526 + }
527 + }
528 + }
529 +
530 + return null;
531 + }
532 +
533 + /* =======================================================
534 + PLACEHOLDER BADGE
535 + ======================================================= */
536 +
537 + function applyPlaceholderBadge(){
538 + if(!PLACEHOLDER)return;
539 +
540 + if(
541 + document.querySelector(
542 + ".sn-coming-soon-badge"
543 + )
544 + ){
545 + return;
546 + }
547 +
548 + var title=
549 + document.querySelector(
550 + "#document-title"
551 + )||
552 + document.querySelector(
553 + "h1"
554 + );
555 +
556 + if(!title)return;
557 +
558 + var badge=
559 + document.createElement(
560 + "span"
561 + );
562 +
563 + badge.className=
564 + "sn-coming-soon-badge";
565 +
566 + badge.textContent=
567 + PLACEHOLDER_LABEL;
568 +
569 + badge.setAttribute(
570 + "aria-label",
571 + PLACEHOLDER_LABEL
304 304   );
573 +
574 + title.appendChild(
575 + badge
576 + );
305 305   }
306 306  
307 - function namedLikeBox(el){
308 - var c=typeof el.className==="string"?el.className:"";
309 - return /(^|[\s_-])(box|card|tile|panel|role|check|service|source|call|area|detail|resource|topic|warn|info)([\s_-]|$)/i.test(c);
579 + /* =======================================================
580 + DETAIL PAGE OWN-ACCENT PROPAGATION
581 + ======================================================= */
582 +
583 + function parseRGB(value){
584 + var match=String(value||"").match(
585 + /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i
586 + );
587 +
588 + if(!match)return null;
589 +
590 + return [
591 + Number(match[1]),
592 + Number(match[2]),
593 + Number(match[3])
594 + ];
310 310   }
311 311  
312 - function boxLike(el){
313 - if(!visible(el)||excluded(el))return false;
314 - var s=getComputedStyle(el);
315 - var r=el.getBoundingClientRect();
316 - var border=
317 - num(s.borderTopWidth)+num(s.borderRightWidth)+
318 - num(s.borderBottomWidth)+num(s.borderLeftWidth);
319 - var radius=Math.max(
320 - num(s.borderTopLeftRadius),num(s.borderTopRightRadius),
321 - num(s.borderBottomLeftRadius),num(s.borderBottomRightRadius)
597 + function distance(a,b){
598 + return Math.sqrt(
599 + Math.pow(a[0]-b[0],2)+
600 + Math.pow(a[1]-b[1],2)+
601 + Math.pow(a[2]-b[2],2)
322 322   );
323 - var bg=s.backgroundColor&&s.backgroundColor!=="rgba(0, 0, 0, 0)"&&s.backgroundColor!=="transparent";
324 - var shadow=s.boxShadow&&s.boxShadow!=="none";
325 - return namedLikeBox(el)||border>=1||(bg&&radius>=3)||(shadow&&r.width>=180);
326 326   }
327 327  
328 - function pickTarget(child){
329 - if(!visible(child))return null;
330 - if(boxLike(child))return child;
605 + function paletteMatch(cssColor){
606 + var rgb=parseRGB(cssColor);
331 331  
332 - var cr=child.getBoundingClientRect();
333 - var q=[];
334 - Array.from(child.children||[]).forEach(function(el){
335 - q.push({el:el,depth:1});
608 + if(!rgb)return null;
609 +
610 + var palette=[
611 + {hex:"#21b6d7",rgb:[33,182,215]},
612 + {hex:"#e94b13",rgb:[233,75,19]},
613 + {hex:"#f0aa00",rgb:[240,170,0]},
614 + {hex:"#38b76a",rgb:[56,183,106]}
615 + ];
616 +
617 + var best=null;
618 + var bestDistance=Infinity;
619 +
620 + palette.forEach(function(item){
621 + var d=distance(rgb,item.rgb);
622 +
623 + if(d<bestDistance){
624 + best=item;
625 + bestDistance=d;
626 + }
336 336   });
337 337  
338 - var best=null,bestScore=-1;
629 + return bestDistance<=30
630 + ?best
631 + :null;
632 + }
339 339  
340 - while(q.length){
341 - var item=q.shift();
342 - var el=item.el;
343 - if(!visible(el))continue;
634 + function propagateDetailAccents(){
635 + if(PAGE_KIND!=="detail")return;
344 344  
345 - var r=el.getBoundingClientRect();
637 + Array.from(
638 + root.querySelectorAll(
639 + ".arsn-call,.dmp-call,.ido-call,.pp-call,"+
640 + ".arsn-source,.dmp-source,.ido-source,.pp-source"
641 + )
642 + ).forEach(function(el){
643 + if(!visible(el))return;
346 346  
347 - if(r.width>=cr.width*.72&&boxLike(el)){
348 - var widthFit=1-Math.min(1,Math.abs(cr.width-r.width)/Math.max(1,cr.width));
349 - var topFit=1-Math.min(1,Math.abs(cr.top-r.top)/80);
350 - var score=widthFit*5+topFit*2+Math.min(r.height,600)/600;
351 - if(score>bestScore){
352 - best=el;
353 - bestScore=score;
645 + var style=getComputedStyle(el);
646 +
647 + if(
648 + num(style.borderTopWidth)>=2
649 + ){
650 + var match=
651 + paletteMatch(
652 + style.borderTopColor
653 + );
654 +
655 + if(match){
656 + el.style.setProperty(
657 + "border-left",
658 + "4px solid "+match.hex,
659 + "important"
660 + );
354 354   }
355 355   }
663 + });
356 356  
357 - if(item.depth<3){
358 - Array.from(el.children||[]).forEach(function(next){
359 - q.push({el:next,depth:item.depth+1});
360 - });
665 + // Warning families: explicit safety override.
666 + Array.from(
667 + root.querySelectorAll(
668 + ".arsn-warn,.dmp-warn,.ido-warn,.pp-warn,"+
669 + ".warn,.warning,.warningmessage,.errormessage"
670 + )
671 + ).forEach(function(el){
672 + if(!visible(el))return;
673 +
674 + el.style.setProperty(
675 + "border-left",
676 + "4px solid #e94b13",
677 + "important"
678 + );
679 + });
680 +
681 + // Info families: explicit orientation override.
682 + Array.from(
683 + root.querySelectorAll(
684 + ".arsn-info,.dmp-info,.ido-info,.pp-info,.infomessage"
685 + )
686 + ).forEach(function(el){
687 + if(!visible(el))return;
688 +
689 + el.style.setProperty(
690 + "border-left",
691 + "4px solid #21b6d7",
692 + "important"
693 + );
694 + });
695 + }
696 +
697 + /* =======================================================
698 + OVERVIEW SEMANTIC THEME PALETTE
699 + ======================================================= */
700 +
701 + function smallestThemeHeaders(){
702 + return Array.from(
703 + root.querySelectorAll(
704 + "div,span,p,strong,h3,h4,h5,h6"
705 + )
706 + ).filter(function(el){
707 + if(!visible(el))return false;
708 + if(!themeFor(el.textContent))return false;
709 +
710 + return !Array.from(
711 + el.children||[]
712 + ).some(function(child){
713 + return !!themeFor(
714 + child.textContent
715 + );
716 + });
717 + });
718 + }
719 +
720 + function findOverviewCard(header){
721 + var node=header.parentElement;
722 + var candidates=[];
723 +
724 + while(node&&node!==root){
725 + var rect=node.getBoundingClientRect();
726 + var style=getComputedStyle(node);
727 +
728 + var border=
729 + num(style.borderTopWidth)+
730 + num(style.borderRightWidth)+
731 + num(style.borderBottomWidth)+
732 + num(style.borderLeftWidth);
733 +
734 + if(
735 + rect.width>=220&&
736 + rect.width<=800&&
737 + rect.height>=120&&
738 + border>=1
739 + ){
740 + candidates.push(node);
361 361   }
742 +
743 + node=node.parentElement;
362 362   }
363 363  
364 - return best;
746 + if(!candidates.length)return null;
747 +
748 + candidates.sort(function(a,b){
749 + return (
750 + b.getBoundingClientRect().height-
751 + a.getBoundingClientRect().height
752 + );
753 + });
754 +
755 + return candidates[0];
365 365   }
366 366  
367 - function reset(){
368 - managed.forEach(function(el){
369 - el.style.removeProperty("min-height");
370 - el.removeAttribute("data-sn-equal-height-managed");
758 + function rowCandidates(link,card){
759 + var result=[];
760 + var cardRect=
761 + card.getBoundingClientRect();
762 +
763 + var node=link;
764 +
765 + while(node&&node!==card){
766 + if(visible(node)){
767 + var rect=
768 + node.getBoundingClientRect();
769 +
770 + if(
771 + rect.height<=105&&
772 + rect.width>=
773 + cardRect.width*.50&&
774 + rect.width<=
775 + cardRect.width*1.03
776 + ){
777 + result.push(node);
778 + }
779 + }
780 +
781 + node=node.parentElement;
782 + }
783 +
784 + return result;
785 + }
786 +
787 + function chooseOuterRow(
788 + candidates,
789 + link
790 + ){
791 + if(!candidates.length){
792 + return link;
793 + }
794 +
795 + var bordered=
796 + candidates.filter(function(el){
797 + return (
798 + num(
799 + getComputedStyle(el)
800 + .borderLeftWidth
801 + )>=1
802 + );
803 + });
804 +
805 + var pool=
806 + bordered.length
807 + ?bordered
808 + :candidates;
809 +
810 + pool.sort(function(a,b){
811 + var ar=
812 + a.getBoundingClientRect();
813 +
814 + var br=
815 + b.getBoundingClientRect();
816 +
817 + return (
818 + ar.left-br.left||
819 + br.width-ar.width
820 + );
371 371   });
372 - managed.clear();
822 +
823 + return pool[0]||link;
373 373   }
374 374  
375 - function horizontalLayout(parent){
376 - if(!visible(parent))return false;
377 - var s=getComputedStyle(parent);
378 - if(s.display==="grid"||s.display==="inline-grid")return true;
379 - if(s.display==="flex"||s.display==="inline-flex"){
380 - return s.flexDirection==="row"||s.flexDirection==="row-reverse";
826 + function applyOverviewPalette(){
827 + if(PAGE_KIND!=="overview"){
828 + return [];
381 381   }
382 - return false;
830 +
831 + var headers=
832 + smallestThemeHeaders()
833 + .map(function(el){
834 + return {
835 + el:el,
836 + theme:
837 + themeFor(
838 + el.textContent
839 + ),
840 + card:
841 + findOverviewCard(
842 + el
843 + )
844 + };
845 + })
846 + .filter(function(row){
847 + return !!row.card;
848 + });
849 +
850 + var unique=[];
851 + var seenHeaders=new Set();
852 +
853 + headers.forEach(function(row){
854 + var key=
855 + row.theme.name+
856 + "|"+
857 + Math.round(
858 + row.card
859 + .getBoundingClientRect()
860 + .left
861 + )+
862 + "|"+
863 + Math.round(
864 + row.el
865 + .getBoundingClientRect()
866 + .top
867 + );
868 +
869 + if(!seenHeaders.has(key)){
870 + seenHeaders.add(key);
871 + unique.push(row);
872 + }
873 + });
874 +
875 + unique.forEach(function(row){
876 + var headerRect=
877 + row.el
878 + .getBoundingClientRect();
879 +
880 + row.el.style.setProperty(
881 + "background",
882 + row.theme.bg,
883 + "important"
884 + );
885 +
886 + row.el.style.setProperty(
887 + "color",
888 + row.theme.text,
889 + "important"
890 + );
891 +
892 + row.el.style.setProperty(
893 + "text-align",
894 + "left",
895 + "important"
896 + );
897 +
898 + row.el.style.setProperty(
899 + "word-spacing",
900 + "normal",
901 + "important"
902 + );
903 +
904 + var later=
905 + unique
906 + .filter(function(other){
907 + return (
908 + other.card===row.card&&
909 + other.el
910 + .getBoundingClientRect()
911 + .top>
912 + headerRect.top+2
913 + );
914 + })
915 + .sort(function(a,b){
916 + return (
917 + a.el
918 + .getBoundingClientRect()
919 + .top-
920 + b.el
921 + .getBoundingClientRect()
922 + .top
923 + );
924 + });
925 +
926 + var stopTop=
927 + later.length
928 + ?later[0].el
929 + .getBoundingClientRect()
930 + .top
931 + :Infinity;
932 +
933 + Array.from(
934 + row.card.querySelectorAll("a")
935 + ).forEach(function(link){
936 + if(!visible(link))return;
937 +
938 + var rect=
939 + link.getBoundingClientRect();
940 +
941 + if(
942 + rect.top<=
943 + headerRect.bottom-2||
944 + rect.top>=
945 + stopTop-2
946 + ){
947 + return;
948 + }
949 +
950 + var candidates=
951 + rowCandidates(
952 + link,
953 + row.card
954 + );
955 +
956 + var target=
957 + chooseOuterRow(
958 + candidates,
959 + link
960 + );
961 +
962 + candidates.forEach(function(el){
963 + el.style.setProperty(
964 + "border-left",
965 + "0 solid transparent",
966 + "important"
967 + );
968 + });
969 +
970 + target.style.setProperty(
971 + "border-left",
972 + "3px solid "+
973 + row.theme.accent,
974 + "important"
975 + );
976 +
977 + target.style.setProperty(
978 + "box-sizing",
979 + "border-box",
980 + "important"
981 + );
982 + });
983 + });
984 +
985 + return unique;
383 383   }
384 384  
385 - function rowGroups(entries){
988 + /* =======================================================
989 + OVERVIEW CARD HEIGHT + FIRST THEMATIC ROW
990 + ======================================================= */
991 +
992 + function alignOverviewCards(headers){
993 + if(
994 + PAGE_KIND!=="overview"||
995 + window.innerWidth<=MOBILE_MAX
996 + ){
997 + return;
998 + }
999 +
1000 + var cards=[];
1001 + var seen=new Set();
1002 +
1003 + headers.forEach(function(row){
1004 + if(!seen.has(row.card)){
1005 + seen.add(row.card);
1006 + cards.push(row.card);
1007 + }
1008 + });
1009 +
1010 + if(cards.length<2){
1011 + return;
1012 + }
1013 +
1014 + // Group cards by actual top position.
386 386   var groups=[];
387 - entries.slice().sort(function(a,b){
388 - return a.rect.top-b.rect.top||a.rect.left-b.rect.left;
389 - }).forEach(function(entry){
1016 +
1017 + cards.forEach(function(card){
1018 + var top=
1019 + card.getBoundingClientRect().top;
1020 +
390 390   var group=null;
1022 +
391 391   for(var i=0;i<groups.length;i++){
392 - if(Math.abs(groups[i].top-entry.rect.top)<=ROW_TOLERANCE){
1024 + if(
1025 + Math.abs(
1026 + groups[i].top-top
1027 + )<=ROW_TOLERANCE
1028 + ){
393 393   group=groups[i];
394 394   break;
395 395   }
396 396   }
1033 +
397 397   if(!group){
398 - group={top:entry.rect.top,entries:[]};
1035 + group={
1036 + top:top,
1037 + cards:[]
1038 + };
399 399   groups.push(group);
400 400   }
401 - group.entries.push(entry);
1041 +
1042 + group.cards.push(card);
402 402   });
403 - return groups;
404 - }
405 405  
406 - function run(){
407 - reset();
1045 + groups.forEach(function(group){
1046 + if(group.cards.length<2){
1047 + return;
1048 + }
408 408  
409 - if(window.innerWidth<=MOBILE_MAX)return;
1050 + var firstHeaders=
1051 + group.cards.map(function(card){
1052 + var candidates=
1053 + headers
1054 + .filter(function(row){
1055 + return row.card===card;
1056 + })
1057 + .sort(function(a,b){
1058 + return (
1059 + a.el
1060 + .getBoundingClientRect()
1061 + .top-
1062 + b.el
1063 + .getBoundingClientRect()
1064 + .top
1065 + );
1066 + });
410 410  
411 - var parents=Array.from(root.querySelectorAll("*")).filter(function(el){
412 - return el.children&&el.children.length>=2&&horizontalLayout(el);
413 - });
1068 + return candidates.length
1069 + ?candidates[0]
1070 + :null;
1071 + });
414 414  
415 - parents.forEach(function(parent){
416 - var entries=[];
1073 + if(
1074 + !firstHeaders.some(function(row){
1075 + return !row;
1076 + })
1077 + ){
1078 + var targetTop=
1079 + Math.max.apply(
1080 + Math,
1081 + firstHeaders.map(function(row){
1082 + return (
1083 + row.el
1084 + .getBoundingClientRect()
1085 + .top-
1086 + row.card
1087 + .getBoundingClientRect()
1088 + .top
1089 + );
1090 + })
1091 + );
417 417  
418 - Array.from(parent.children).forEach(function(child){
419 - if(!visible(child))return;
420 - var target=pickTarget(child);
421 - if(!target)return;
422 - entries.push({
423 - target:target,
424 - rect:target.getBoundingClientRect()
1093 + firstHeaders.forEach(function(row){
1094 + var relativeTop=
1095 + row.el
1096 + .getBoundingClientRect()
1097 + .top-
1098 + row.card
1099 + .getBoundingClientRect()
1100 + .top;
1101 +
1102 + var delta=
1103 + targetTop-relativeTop;
1104 +
1105 + if(delta>1){
1106 + saveStyle(
1107 + row.el,
1108 + originalMargin,
1109 + "margin-top"
1110 + );
1111 +
1112 + var current=
1113 + num(
1114 + getComputedStyle(
1115 + row.el
1116 + ).marginTop
1117 + );
1118 +
1119 + row.el.style.setProperty(
1120 + "margin-top",
1121 + (
1122 + current+delta
1123 + )+"px"
1124 + );
1125 +
1126 + row.el.setAttribute(
1127 + "data-sn-master-first-row",
1128 + "1"
1129 + );
1130 +
1131 + managedMargin.add(
1132 + row.el
1133 + );
1134 + }
425 425   });
1136 + }
1137 +
1138 + var maxHeight=0;
1139 +
1140 + group.cards.forEach(function(card){
1141 + maxHeight=
1142 + Math.max(
1143 + maxHeight,
1144 + card
1145 + .getBoundingClientRect()
1146 + .height
1147 + );
426 426   });
427 427  
428 - if(entries.length<2)return;
1150 + maxHeight=
1151 + Math.ceil(maxHeight);
429 429  
430 - rowGroups(entries).forEach(function(group){
431 - if(group.entries.length<2)return;
1153 + group.cards.forEach(function(card){
1154 + saveStyle(
1155 + card,
1156 + originalHeight,
1157 + "min-height"
1158 + );
432 432  
433 - var lefts=group.entries.map(function(e){return e.rect.left;}).sort(function(a,b){return a-b;});
434 - if(lefts[lefts.length-1]-lefts[0]<80)return;
1160 + card.style.setProperty(
1161 + "min-height",
1162 + maxHeight+"px"
1163 + );
435 435  
436 - var targets=[];
437 - var seen=new Set();
1165 + card.setAttribute(
1166 + "data-sn-master-equal-height",
1167 + "1"
1168 + );
438 438  
439 - group.entries.forEach(function(e){
440 - if(!seen.has(e.target)){
441 - seen.add(e.target);
442 - targets.push(e.target);
1170 + managedHeight.add(
1171 + card
1172 + );
1173 + });
1174 + });
1175 + }
1176 +
1177 + /* =======================================================
1178 + DETAIL GRID EQUAL HEIGHT, DESKTOP ONLY
1179 + ======================================================= */
1180 +
1181 + function equaliseDetailGrids(){
1182 + if(
1183 + PAGE_KIND!=="detail"||
1184 + window.innerWidth<=MOBILE_MAX
1185 + ){
1186 + return;
1187 + }
1188 +
1189 + var selectors=[
1190 + ".arsn-grid",
1191 + ".arsn-grid-2",
1192 + ".arsn-grid-3",
1193 + ".dmp-grid",
1194 + ".ido-grid",
1195 + ".pp-grid"
1196 + ];
1197 +
1198 + selectors.forEach(function(selector){
1199 + Array.from(
1200 + root.querySelectorAll(selector)
1201 + ).forEach(function(grid){
1202 + var children=
1203 + Array.from(
1204 + grid.children||[]
1205 + ).filter(visible);
1206 +
1207 + if(children.length<2){
1208 + return;
1209 + }
1210 +
1211 + var groups=[];
1212 +
1213 + children.forEach(function(child){
1214 + var top=
1215 + child
1216 + .getBoundingClientRect()
1217 + .top;
1218 +
1219 + var group=null;
1220 +
1221 + for(var i=0;i<groups.length;i++){
1222 + if(
1223 + Math.abs(
1224 + groups[i].top-top
1225 + )<=ROW_TOLERANCE
1226 + ){
1227 + group=groups[i];
1228 + break;
1229 + }
443 443   }
444 - });
445 445  
446 - if(targets.length<2)return;
1232 + if(!group){
1233 + group={
1234 + top:top,
1235 + items:[]
1236 + };
1237 + groups.push(group);
1238 + }
447 447  
448 - var max=0;
449 - targets.forEach(function(el){
450 - max=Math.max(max,el.getBoundingClientRect().height);
1240 + group.items.push(child);
451 451   });
452 452  
453 - max=Math.ceil(max);
454 - if(max<MIN_H)return;
1243 + groups.forEach(function(group){
1244 + if(group.items.length<2){
1245 + return;
1246 + }
455 455  
456 - targets.forEach(function(el){
457 - el.style.setProperty("min-height",max+"px");
458 - el.setAttribute("data-sn-equal-height-managed","1");
459 - managed.add(el);
1248 + var maxHeight=0;
1249 +
1250 + group.items.forEach(function(item){
1251 + maxHeight=
1252 + Math.max(
1253 + maxHeight,
1254 + item
1255 + .getBoundingClientRect()
1256 + .height
1257 + );
1258 + });
1259 +
1260 + maxHeight=
1261 + Math.ceil(maxHeight);
1262 +
1263 + group.items.forEach(function(item){
1264 + saveStyle(
1265 + item,
1266 + originalHeight,
1267 + "min-height"
1268 + );
1269 +
1270 + item.style.setProperty(
1271 + "min-height",
1272 + maxHeight+"px"
1273 + );
1274 +
1275 + item.setAttribute(
1276 + "data-sn-master-equal-height",
1277 + "1"
1278 + );
1279 +
1280 + managedHeight.add(item);
1281 + });
460 460   });
461 461   });
462 462   });
463 463   }
464 464  
465 - function schedule(){
466 - if(raf)cancelAnimationFrame(raf);
467 - raf=requestAnimationFrame(function(){
468 - raf=requestAnimationFrame(function(){
469 - raf=0;
470 - run();
471 - });
472 - });
1287 + /* =======================================================
1288 + RUN / RESPONSIVE SCHEDULING
1289 + ======================================================= */
1290 +
1291 + function run(){
1292 + if(running)return;
1293 +
1294 + running=true;
1295 +
1296 + try{
1297 + resetRuntime();
1298 + applyPlaceholderBadge();
1299 + propagateDetailAccents();
1300 +
1301 + var headers=
1302 + applyOverviewPalette();
1303 +
1304 + if(
1305 + window.innerWidth>
1306 + MOBILE_MAX
1307 + ){
1308 + alignOverviewCards(
1309 + headers
1310 + );
1311 +
1312 + equaliseDetailGrids();
1313 + }
1314 + }finally{
1315 + running=false;
1316 + }
473 473   }
474 474  
475 - addEventListener("resize",schedule,{passive:true});
476 - addEventListener("load",schedule,{once:true});
1319 + function onResize(){
1320 + if(resizeTimer){
1321 + clearTimeout(
1322 + resizeTimer
1323 + );
1324 + }
477 477  
478 - root.addEventListener("click",function(){
479 - setTimeout(schedule,0);
480 - },true);
1326 + resizeTimer=
1327 + setTimeout(
1328 + function(){
1329 + resizeTimer=0;
1330 + run();
1331 + },
1332 + RESIZE_DEBOUNCE
1333 + );
1334 + }
481 481  
482 - if(document.fonts&&document.fonts.ready){
483 - document.fonts.ready.then(schedule);
1336 + async function waitForReady(){
1337 + if(
1338 + document.readyState!=="complete"
1339 + ){
1340 + await new Promise(function(resolve){
1341 + window.addEventListener(
1342 + "load",
1343 + resolve,
1344 + {once:true}
1345 + );
1346 + });
1347 + }
1348 +
1349 + if(
1350 + document.fonts&&
1351 + document.fonts.ready
1352 + ){
1353 + try{
1354 + await document.fonts.ready;
1355 + }catch(error){}
1356 + }
1357 +
1358 + var images=
1359 + Array.from(
1360 + root.querySelectorAll("img")
1361 + );
1362 +
1363 + await Promise.all(
1364 + images.map(function(img){
1365 + if(img.complete){
1366 + return Promise.resolve();
1367 + }
1368 +
1369 + return new Promise(function(resolve){
1370 + var done=function(){
1371 + resolve();
1372 + };
1373 +
1374 + img.addEventListener(
1375 + "load",
1376 + done,
1377 + {once:true}
1378 + );
1379 +
1380 + img.addEventListener(
1381 + "error",
1382 + done,
1383 + {once:true}
1384 + );
1385 + });
1386 + })
1387 + );
1388 +
1389 + run();
484 484   }
485 485  
486 - schedule();
487 - setTimeout(schedule,250);
488 - setTimeout(schedule,900);
1392 + window.addEventListener(
1393 + "resize",
1394 + onResize,
1395 + {passive:true}
1396 + );
1397 +
1398 + waitForReady();
489 489  })();
490 490  </script>
491 -<!-- SN_HORIZONTAL_BOX_HARMONIZER_END -->
1401 +
1402 +<!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_END -->
492 492  {{/html}}
493 493