Änderungen von Dokument Prepare

Zuletzt geändert von Veronika Kocher am Freitag, 18 Sep. 2026 16:47

Von Version 1.6
bearbeitet von Veronika Kocher
am Donnerstag, 03 Sep. 2026 9:18
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 1.10
bearbeitet von Veronika Kocher
am Donnerstag, 03 Sep. 2026 14:15
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -484,21 +484,132 @@
484 484  {{/html}}
485 485  
486 486  {{html clean="false"}}
487 -<!-- SN_HORIZONTAL_BOX_HARMONIZER_START -->
488 -<style data-sn-horizontal-box-harmonizer="1">
489 -[data-sn-equal-height-managed="1"]{box-sizing:border-box}
490 -@media(max-width:767px){
491 - [data-sn-equal-height-managed="1"]{min-height:0!important}
487 +<!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_START -->
488 +
489 +<style data-sn-service-navigator-master="1">
490 +/* =========================================================
491 + MASTER TYPOGRAPHY
492 + ========================================================= */
493 +#xwikicontent h1,
494 +#xwikicontent h2,
495 +#xwikicontent h3,
496 +#xwikicontent h4,
497 +#xwikicontent h5,
498 +#xwikicontent h6,
499 +#xwikicontent .box-title,
500 +#xwikicontent [role="heading"],
501 +#xwikicontent h1 a,
502 +#xwikicontent h2 a,
503 +#xwikicontent h3 a,
504 +#xwikicontent h4 a,
505 +#xwikicontent h5 a,
506 +#xwikicontent h6 a,
507 +#xwikicontent .box-title a,
508 +#xwikicontent [role="heading"] a{
509 + text-align:left!important;
510 + text-justify:auto!important;
511 + word-spacing:normal!important;
492 492  }
513 +
514 +/* =========================================================
515 + COMING SOON / IN VORBEREITUNG
516 + ========================================================= */
517 +.sn-coming-soon-badge{
518 + display:inline-block;
519 + vertical-align:middle;
520 + margin-left:10px;
521 + padding:4px 8px;
522 + border-radius:14px;
523 + border:1px solid #efd9cc;
524 + background:#fff4ee;
525 + color:#8a4d36;
526 + font-size:11px;
527 + font-weight:700;
528 + letter-spacing:.055em;
529 + line-height:1.2;
530 + white-space:nowrap;
531 +}
532 +
533 +/* =========================================================
534 + NATIVE / DETAIL CALLOUT GEOMETRY
535 + Preserve existing backgrounds.
536 + ========================================================= */
537 +#xwikicontent .arsn-info,
538 +#xwikicontent .dmp-info,
539 +#xwikicontent .ido-info,
540 +#xwikicontent .pp-info,
541 +#xwikicontent .infomessage{
542 + box-sizing:border-box!important;
543 + border-left:4px solid #21b6d7!important;
544 + border-radius:8px;
545 + text-align:left!important;
546 + word-spacing:normal!important;
547 +}
548 +
549 +#xwikicontent .arsn-warn,
550 +#xwikicontent .dmp-warn,
551 +#xwikicontent .ido-warn,
552 +#xwikicontent .pp-warn,
553 +#xwikicontent .warn,
554 +#xwikicontent .warning,
555 +#xwikicontent .warningmessage,
556 +#xwikicontent .errormessage{
557 + box-sizing:border-box!important;
558 + border-left:4px solid #e94b13!important;
559 + border-radius:8px;
560 + text-align:left!important;
561 + word-spacing:normal!important;
562 +}
563 +
564 +[data-sn-master-equal-height],
565 +[data-sn-master-first-row]{
566 + box-sizing:border-box;
567 +}
568 +
569 +/* =========================================================
570 + FULL-WIDTH THREE-LINE NUMBER / TITLE / SUBTITLE BLOCKS
571 + ========================================================= */
572 +#xwikicontent .arsn-area-label[data-sn-three-line="1"]{
573 + display:grid!important;
574 + grid-template-columns:minmax(0,1fr)!important;
575 + grid-auto-rows:auto!important;
576 + width:100%!important;
577 + max-width:none!important;
578 + box-sizing:border-box!important;
579 + justify-items:start!important;
580 + align-items:start!important;
581 + gap:2px!important;
582 + text-align:left!important;
583 + text-align-last:left!important;
584 + text-justify:auto!important;
585 + word-spacing:normal!important;
586 + white-space:normal!important;
587 +}
588 +#xwikicontent .arsn-area-label[data-sn-three-line="1"] > .arsn-area-number,
589 +#xwikicontent .arsn-area-label[data-sn-three-line="1"] > .sn-area-label-title,
590 +#xwikicontent .arsn-area-label[data-sn-three-line="1"] > .arsn-area-action{
591 + display:block!important;
592 + width:100%!important;
593 + margin:0!important;
594 + text-align:left!important;
595 + text-align-last:left!important;
596 + text-justify:auto!important;
597 + word-spacing:normal!important;
598 + white-space:normal!important;
599 +}
493 493  </style>
494 -<script data-sn-horizontal-box-harmonizer="1">
601 +
602 +<script data-sn-service-navigator-master="1">
495 495  (function(){
496 496   "use strict";
497 497  
606 + var PAGE_KIND="overview";
607 + var PLACEHOLDER=false;
608 + var PLACEHOLDER_LABEL="IN VORBEREITUNG";
609 +
498 498   var MOBILE_MAX=767;
499 - var ROW_TOLERANCE=4;
500 - var MIN_W=150;
501 - var MIN_H=36;
611 + var ROW_TOLERANCE=6;
612 + var RESIZE_DEBOUNCE=220;
502 502  
503 503   var root=
504 504   document.getElementById("xwikicontent")||
... ... @@ -508,212 +508,1268 @@
508 508  
509 509   if(!root)return;
510 510  
511 - var managed=new Set();
512 - var raf=0;
622 + var managedHeight=new Set();
623 + var managedMargin=new Set();
624 + var originalHeight=new WeakMap();
625 + var originalMargin=new WeakMap();
513 513  
514 - function num(v){
515 - var n=parseFloat(v);
627 + var resizeTimer=0;
628 + var running=false;
629 +
630 + var THEMES=[
631 + {
632 + name:"BLUE",
633 + accent:"#21b6d7",
634 + bg:"#eaf7fb",
635 + text:"#315d68",
636 + labels:[
637 + "HIER STARTEN",
638 + "ENTSCHEIDEN",
639 + "ÜBERPRÜFEN & ANPASSEN",
640 + "START HERE",
641 + "DECIDE",
642 + "REVIEW & ADAPT"
643 + ]
644 + },
645 + {
646 + name:"RED",
647 + accent:"#e94b13",
648 + bg:"#fff1ec",
649 + text:"#8a4d36",
650 + labels:[
651 + "PLANEN & ORGANISIEREN",
652 + "ORGANISIEREN & DOKUMENTIEREN",
653 + "PUBLIZIEREN & PRÄSENTIEREN",
654 + "PLAN & ORGANISE",
655 + "PLAN & ORGANIZE",
656 + "ORGANISE & DOCUMENT",
657 + "ORGANIZE & DOCUMENT",
658 + "PUBLISH & PRESENT"
659 + ]
660 + },
661 + {
662 + name:"YELLOW",
663 + accent:"#f0aa00",
664 + bg:"#fff8e7",
665 + text:"#785b17",
666 + labels:[
667 + "SCHÜTZEN & KLÄREN",
668 + "STANDARDISIEREN & IDENTIFIZIEREN",
669 + "ÖFFNEN, NACHNUTZEN & AUFFINDBAR MACHEN",
670 + "PROTECT & CLARIFY",
671 + "STANDARDISE & IDENTIFY",
672 + "STANDARDIZE & IDENTIFY",
673 + "OPEN, REUSE & MAKE FINDABLE"
674 + ]
675 + },
676 + {
677 + name:"GREEN",
678 + accent:"#38b76a",
679 + bg:"#edf9f1",
680 + text:"#3f7451",
681 + labels:[
682 + "INFRASTRUKTUR EINRICHTEN",
683 + "INFRASTRUKTUR & ZUSAMMENARBEIT EINRICHTEN",
684 + "SPEICHERN & ZUGRIFF STEUERN",
685 + "REPOSITORIUM, ERHALTEN & ÜBERGEBEN",
686 + "SET UP INFRASTRUCTURE",
687 + "SET UP INFRASTRUCTURE & COLLABORATION",
688 + "STORE & CONTROL ACCESS",
689 + "REPOSITORY, PRESERVE & HAND OVER"
690 + ]
691 + }
692 + ];
693 +
694 + function num(value){
695 + var n=parseFloat(value);
516 516   return Number.isFinite(n)?n:0;
517 517   }
518 518  
699 + function norm(value){
700 + return String(value||"")
701 + .replace(/\s+/g," ")
702 + .trim()
703 + .toUpperCase();
704 + }
705 +
519 519   function visible(el){
520 520   if(!el||el.nodeType!==1)return false;
521 - var s=getComputedStyle(el);
522 - if(s.display==="none"||s.visibility==="hidden"||Number(s.opacity)===0)return false;
523 - var r=el.getBoundingClientRect();
524 - return r.width>=MIN_W&&r.height>=MIN_H;
708 +
709 + var style=getComputedStyle(el);
710 + var rect=el.getBoundingClientRect();
711 +
712 + return (
713 + style.display!=="none"&&
714 + style.visibility!=="hidden"&&
715 + rect.width>20&&
716 + rect.height>4
717 + );
525 525   }
526 526  
527 - function excluded(el){
528 - return !el.matches||el.matches(
529 - "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]"
720 + function saveStyle(el,map,property){
721 + if(map.has(el))return;
722 +
723 + map.set(el,{
724 + value:el.style.getPropertyValue(property),
725 + priority:el.style.getPropertyPriority(property)
726 + });
727 + }
728 +
729 + function restoreStyle(el,map,property){
730 + var original=map.get(el);
731 +
732 + if(original&&original.value){
733 + el.style.setProperty(
734 + property,
735 + original.value,
736 + original.priority||""
737 + );
738 + }else{
739 + el.style.removeProperty(property);
740 + }
741 + }
742 +
743 + function resetRuntime(){
744 + managedHeight.forEach(function(el){
745 + restoreStyle(
746 + el,
747 + originalHeight,
748 + "min-height"
749 + );
750 + el.removeAttribute(
751 + "data-sn-master-equal-height"
752 + );
753 + });
754 +
755 + managedMargin.forEach(function(el){
756 + restoreStyle(
757 + el,
758 + originalMargin,
759 + "margin-top"
760 + );
761 + el.removeAttribute(
762 + "data-sn-master-first-row"
763 + );
764 + });
765 +
766 + managedHeight.clear();
767 + managedMargin.clear();
768 + }
769 +
770 + function themeFor(text){
771 + var value=norm(text);
772 +
773 + for(var i=0;i<THEMES.length;i++){
774 + for(var j=0;j<THEMES[i].labels.length;j++){
775 + var label=THEMES[i].labels[j];
776 +
777 + if(
778 + value===label||
779 + value.indexOf(label+" ")===0||
780 + value.indexOf(label+" -")===0||
781 + value.indexOf(label+" ·")===0
782 + ){
783 + return THEMES[i];
784 + }
785 + }
786 + }
787 +
788 + return null;
789 + }
790 +
791 + /* =======================================================
792 + BORDERLESS FILLED RED/ORANGE CTA BUTTONS
793 + ======================================================= */
794 +
795 + function colourDistance(a,b){
796 + return Math.sqrt(
797 + Math.pow(a[0]-b[0],2)+
798 + Math.pow(a[1]-b[1],2)+
799 + Math.pow(a[2]-b[2],2)
530 530   );
531 531   }
532 532  
533 - function namedLikeBox(el){
534 - var c=typeof el.className==="string"?el.className:"";
535 - return /(^|[\s_-])(box|card|tile|panel|role|check|service|source|call|area|detail|resource|topic|warn|info)([\s_-]|$)/i.test(c);
803 + function makeFilledRedOrangeCTAsBorderless(){
804 + var RED_ORANGE=[233,75,19];
805 +
806 + Array.from(
807 + root.querySelectorAll(
808 + 'a,button,[role="button"],input[type="submit"],input[type="button"]'
809 + )
810 + ).forEach(function(el){
811 + if(!visible(el))return;
812 +
813 + var style=getComputedStyle(el);
814 + var rgb=parseRGB(style.backgroundColor);
815 +
816 + if(!rgb)return;
817 +
818 + if(
819 + colourDistance(
820 + rgb,
821 + RED_ORANGE
822 + )>55
823 + ){
824 + return;
825 + }
826 +
827 + var rect=el.getBoundingClientRect();
828 +
829 + if(
830 + rect.width<80||
831 + rect.height<24
832 + ){
833 + return;
834 + }
835 +
836 + el.style.setProperty(
837 + "border",
838 + "none",
839 + "important"
840 + );
841 +
842 + el.style.setProperty(
843 + "border-left",
844 + "none",
845 + "important"
846 + );
847 +
848 + el.style.setProperty(
849 + "border-top",
850 + "none",
851 + "important"
852 + );
853 +
854 + el.style.setProperty(
855 + "border-right",
856 + "none",
857 + "important"
858 + );
859 +
860 + el.style.setProperty(
861 + "border-bottom",
862 + "none",
863 + "important"
864 + );
865 +
866 + el.style.setProperty(
867 + "box-shadow",
868 + "none",
869 + "important"
870 + );
871 + });
536 536   }
537 537  
538 - function boxLike(el){
539 - if(!visible(el)||excluded(el))return false;
540 - var s=getComputedStyle(el);
541 - var r=el.getBoundingClientRect();
542 - var border=
543 - num(s.borderTopWidth)+num(s.borderRightWidth)+
544 - num(s.borderBottomWidth)+num(s.borderLeftWidth);
545 - var radius=Math.max(
546 - num(s.borderTopLeftRadius),num(s.borderTopRightRadius),
547 - num(s.borderBottomLeftRadius),num(s.borderBottomRightRadius)
874 + /* =======================================================
875 + FULL-WIDTH THREE-LINE AREA LABELS
876 + ======================================================= */
877 +
878 + function compactText(value){
879 + return String(value||"")
880 + .replace(/\s+/g," ")
881 + .trim();
882 + }
883 +
884 + function makeThreeLineAreaLabels(){
885 + Array.from(
886 + root.querySelectorAll(
887 + ".arsn-area-label"
888 + )
889 + ).forEach(function(label){
890 + if(
891 + label.getAttribute(
892 + "data-sn-three-line"
893 + )==="1"
894 + ){
895 + return;
896 + }
897 +
898 + var number=
899 + label.querySelector(
900 + ":scope > .arsn-area-number"
901 + );
902 +
903 + var action=
904 + label.querySelector(
905 + ":scope > .arsn-area-action"
906 + );
907 +
908 + if(
909 + !number||
910 + !action
911 + ){
912 + return;
913 + }
914 +
915 + var clone=
916 + label.cloneNode(true);
917 +
918 + var cloneNumber=
919 + clone.querySelector(
920 + ":scope > .arsn-area-number"
921 + );
922 +
923 + var cloneAction=
924 + clone.querySelector(
925 + ":scope > .arsn-area-action"
926 + );
927 +
928 + if(cloneNumber){
929 + cloneNumber.remove();
930 + }
931 +
932 + if(cloneAction){
933 + cloneAction.remove();
934 + }
935 +
936 + var titleText=
937 + compactText(
938 + clone.textContent
939 + );
940 +
941 + if(!titleText){
942 + return;
943 + }
944 +
945 + var numberNode=
946 + number.cloneNode(true);
947 +
948 + var actionNode=
949 + action.cloneNode(true);
950 +
951 + var titleNode=
952 + document.createElement(
953 + "span"
954 + );
955 +
956 + titleNode.className=
957 + "sn-area-label-title";
958 +
959 + titleNode.textContent=
960 + titleText;
961 +
962 + while(label.firstChild){
963 + label.removeChild(
964 + label.firstChild
965 + );
966 + }
967 +
968 + label.appendChild(
969 + numberNode
970 + );
971 +
972 + label.appendChild(
973 + titleNode
974 + );
975 +
976 + label.appendChild(
977 + actionNode
978 + );
979 +
980 + label.setAttribute(
981 + "data-sn-three-line",
982 + "1"
983 + );
984 +
985 + var head=
986 + label.closest(
987 + ".arsn-area-head"
988 + );
989 +
990 + if(head){
991 + head.style.setProperty(
992 + "width",
993 + "100%",
994 + "important"
995 + );
996 +
997 + head.style.setProperty(
998 + "max-width",
999 + "100%",
1000 + "important"
1001 + );
1002 +
1003 + head.style.setProperty(
1004 + "box-sizing",
1005 + "border-box",
1006 + "important"
1007 + );
1008 + }
1009 + });
1010 + }
1011 +
1012 + /* =======================================================
1013 + PLACEHOLDER BADGE
1014 + ======================================================= */
1015 +
1016 + function applyPlaceholderBadge(){
1017 + if(!PLACEHOLDER)return;
1018 +
1019 + if(
1020 + document.querySelector(
1021 + ".sn-coming-soon-badge"
1022 + )
1023 + ){
1024 + return;
1025 + }
1026 +
1027 + var title=
1028 + document.querySelector(
1029 + "#document-title"
1030 + )||
1031 + document.querySelector(
1032 + "h1"
1033 + );
1034 +
1035 + if(!title)return;
1036 +
1037 + var badge=
1038 + document.createElement(
1039 + "span"
1040 + );
1041 +
1042 + badge.className=
1043 + "sn-coming-soon-badge";
1044 +
1045 + badge.textContent=
1046 + PLACEHOLDER_LABEL;
1047 +
1048 + badge.setAttribute(
1049 + "aria-label",
1050 + PLACEHOLDER_LABEL
548 548   );
549 - var bg=s.backgroundColor&&s.backgroundColor!=="rgba(0, 0, 0, 0)"&&s.backgroundColor!=="transparent";
550 - var shadow=s.boxShadow&&s.boxShadow!=="none";
551 - return namedLikeBox(el)||border>=1||(bg&&radius>=3)||(shadow&&r.width>=180);
1052 +
1053 + title.appendChild(
1054 + badge
1055 + );
552 552   }
553 553  
554 - function pickTarget(child){
555 - if(!visible(child))return null;
556 - if(boxLike(child))return child;
1058 + /* =======================================================
1059 + DETAIL PAGE OWN-ACCENT PROPAGATION
1060 + ======================================================= */
557 557  
558 - var cr=child.getBoundingClientRect();
559 - var q=[];
560 - Array.from(child.children||[]).forEach(function(el){
561 - q.push({el:el,depth:1});
1062 + function parseRGB(value){
1063 + var match=String(value||"").match(
1064 + /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i
1065 + );
1066 +
1067 + if(!match)return null;
1068 +
1069 + return [
1070 + Number(match[1]),
1071 + Number(match[2]),
1072 + Number(match[3])
1073 + ];
1074 + }
1075 +
1076 + function distance(a,b){
1077 + return Math.sqrt(
1078 + Math.pow(a[0]-b[0],2)+
1079 + Math.pow(a[1]-b[1],2)+
1080 + Math.pow(a[2]-b[2],2)
1081 + );
1082 + }
1083 +
1084 + function paletteMatch(cssColor){
1085 + var rgb=parseRGB(cssColor);
1086 +
1087 + if(!rgb)return null;
1088 +
1089 + var palette=[
1090 + {hex:"#21b6d7",rgb:[33,182,215]},
1091 + {hex:"#e94b13",rgb:[233,75,19]},
1092 + {hex:"#f0aa00",rgb:[240,170,0]},
1093 + {hex:"#38b76a",rgb:[56,183,106]}
1094 + ];
1095 +
1096 + var best=null;
1097 + var bestDistance=Infinity;
1098 +
1099 + palette.forEach(function(item){
1100 + var d=distance(rgb,item.rgb);
1101 +
1102 + if(d<bestDistance){
1103 + best=item;
1104 + bestDistance=d;
1105 + }
562 562   });
563 563  
564 - var best=null,bestScore=-1;
1108 + return bestDistance<=30
1109 + ?best
1110 + :null;
1111 + }
565 565  
566 - while(q.length){
567 - var item=q.shift();
568 - var el=item.el;
569 - if(!visible(el))continue;
1113 + function propagateDetailAccents(){
1114 + if(PAGE_KIND!=="detail")return;
570 570  
571 - var r=el.getBoundingClientRect();
1116 + Array.from(
1117 + root.querySelectorAll(
1118 + ".arsn-call,.dmp-call,.ido-call,.pp-call,"+
1119 + ".arsn-source,.dmp-source,.ido-source,.pp-source"
1120 + )
1121 + ).forEach(function(el){
1122 + if(!visible(el))return;
572 572  
573 - if(r.width>=cr.width*.72&&boxLike(el)){
574 - var widthFit=1-Math.min(1,Math.abs(cr.width-r.width)/Math.max(1,cr.width));
575 - var topFit=1-Math.min(1,Math.abs(cr.top-r.top)/80);
576 - var score=widthFit*5+topFit*2+Math.min(r.height,600)/600;
577 - if(score>bestScore){
578 - best=el;
579 - bestScore=score;
1124 + var style=getComputedStyle(el);
1125 +
1126 + if(
1127 + num(style.borderTopWidth)>=2
1128 + ){
1129 + var match=
1130 + paletteMatch(
1131 + style.borderTopColor
1132 + );
1133 +
1134 + if(match){
1135 + el.style.setProperty(
1136 + "border-left",
1137 + "4px solid "+match.hex,
1138 + "important"
1139 + );
580 580   }
581 581   }
1142 + });
582 582  
583 - if(item.depth<3){
584 - Array.from(el.children||[]).forEach(function(next){
585 - q.push({el:next,depth:item.depth+1});
586 - });
1144 + // Warning families: explicit safety override.
1145 + Array.from(
1146 + root.querySelectorAll(
1147 + ".arsn-warn,.dmp-warn,.ido-warn,.pp-warn,"+
1148 + ".warn,.warning,.warningmessage,.errormessage"
1149 + )
1150 + ).forEach(function(el){
1151 + if(!visible(el))return;
1152 +
1153 + el.style.setProperty(
1154 + "border-left",
1155 + "4px solid #e94b13",
1156 + "important"
1157 + );
1158 + });
1159 +
1160 + // Info families: explicit orientation override.
1161 + Array.from(
1162 + root.querySelectorAll(
1163 + ".arsn-info,.dmp-info,.ido-info,.pp-info,.infomessage"
1164 + )
1165 + ).forEach(function(el){
1166 + if(!visible(el))return;
1167 +
1168 + el.style.setProperty(
1169 + "border-left",
1170 + "4px solid #21b6d7",
1171 + "important"
1172 + );
1173 + });
1174 + }
1175 +
1176 + /* =======================================================
1177 + OVERVIEW SEMANTIC THEME PALETTE
1178 + ======================================================= */
1179 +
1180 + function smallestThemeHeaders(){
1181 + return Array.from(
1182 + root.querySelectorAll(
1183 + "div,span,p,strong,h3,h4,h5,h6"
1184 + )
1185 + ).filter(function(el){
1186 + if(!visible(el))return false;
1187 + if(!themeFor(el.textContent))return false;
1188 +
1189 + return !Array.from(
1190 + el.children||[]
1191 + ).some(function(child){
1192 + return !!themeFor(
1193 + child.textContent
1194 + );
1195 + });
1196 + });
1197 + }
1198 +
1199 + function findOverviewCard(header){
1200 + var node=header.parentElement;
1201 + var candidates=[];
1202 +
1203 + while(node&&node!==root){
1204 + var rect=node.getBoundingClientRect();
1205 + var style=getComputedStyle(node);
1206 +
1207 + var border=
1208 + num(style.borderTopWidth)+
1209 + num(style.borderRightWidth)+
1210 + num(style.borderBottomWidth)+
1211 + num(style.borderLeftWidth);
1212 +
1213 + if(
1214 + rect.width>=220&&
1215 + rect.width<=800&&
1216 + rect.height>=120&&
1217 + border>=1
1218 + ){
1219 + candidates.push(node);
587 587   }
1221 +
1222 + node=node.parentElement;
588 588   }
589 589  
590 - return best;
1225 + if(!candidates.length)return null;
1226 +
1227 + candidates.sort(function(a,b){
1228 + return (
1229 + b.getBoundingClientRect().height-
1230 + a.getBoundingClientRect().height
1231 + );
1232 + });
1233 +
1234 + return candidates[0];
591 591   }
592 592  
593 - function reset(){
594 - managed.forEach(function(el){
595 - el.style.removeProperty("min-height");
596 - el.removeAttribute("data-sn-equal-height-managed");
1237 + function rowCandidates(link,card){
1238 + var result=[];
1239 + var cardRect=
1240 + card.getBoundingClientRect();
1241 +
1242 + var node=link;
1243 +
1244 + while(node&&node!==card){
1245 + if(visible(node)){
1246 + var rect=
1247 + node.getBoundingClientRect();
1248 +
1249 + if(
1250 + rect.height<=105&&
1251 + rect.width>=
1252 + cardRect.width*.50&&
1253 + rect.width<=
1254 + cardRect.width*1.03
1255 + ){
1256 + result.push(node);
1257 + }
1258 + }
1259 +
1260 + node=node.parentElement;
1261 + }
1262 +
1263 + return result;
1264 + }
1265 +
1266 + function chooseOuterRow(
1267 + candidates,
1268 + link
1269 + ){
1270 + if(!candidates.length){
1271 + return link;
1272 + }
1273 +
1274 + var bordered=
1275 + candidates.filter(function(el){
1276 + return (
1277 + num(
1278 + getComputedStyle(el)
1279 + .borderLeftWidth
1280 + )>=1
1281 + );
1282 + });
1283 +
1284 + var pool=
1285 + bordered.length
1286 + ?bordered
1287 + :candidates;
1288 +
1289 + pool.sort(function(a,b){
1290 + var ar=
1291 + a.getBoundingClientRect();
1292 +
1293 + var br=
1294 + b.getBoundingClientRect();
1295 +
1296 + return (
1297 + ar.left-br.left||
1298 + br.width-ar.width
1299 + );
597 597   });
598 - managed.clear();
1301 +
1302 + return pool[0]||link;
599 599   }
600 600  
601 - function horizontalLayout(parent){
602 - if(!visible(parent))return false;
603 - var s=getComputedStyle(parent);
604 - if(s.display==="grid"||s.display==="inline-grid")return true;
605 - if(s.display==="flex"||s.display==="inline-flex"){
606 - return s.flexDirection==="row"||s.flexDirection==="row-reverse";
1305 + function applyOverviewPalette(){
1306 + if(PAGE_KIND!=="overview"){
1307 + return [];
607 607   }
608 - return false;
1309 +
1310 + var headers=
1311 + smallestThemeHeaders()
1312 + .map(function(el){
1313 + return {
1314 + el:el,
1315 + theme:
1316 + themeFor(
1317 + el.textContent
1318 + ),
1319 + card:
1320 + findOverviewCard(
1321 + el
1322 + )
1323 + };
1324 + })
1325 + .filter(function(row){
1326 + return !!row.card;
1327 + });
1328 +
1329 + var unique=[];
1330 + var seenHeaders=new Set();
1331 +
1332 + headers.forEach(function(row){
1333 + var key=
1334 + row.theme.name+
1335 + "|"+
1336 + Math.round(
1337 + row.card
1338 + .getBoundingClientRect()
1339 + .left
1340 + )+
1341 + "|"+
1342 + Math.round(
1343 + row.el
1344 + .getBoundingClientRect()
1345 + .top
1346 + );
1347 +
1348 + if(!seenHeaders.has(key)){
1349 + seenHeaders.add(key);
1350 + unique.push(row);
1351 + }
1352 + });
1353 +
1354 + unique.forEach(function(row){
1355 + var headerRect=
1356 + row.el
1357 + .getBoundingClientRect();
1358 +
1359 + row.el.style.setProperty(
1360 + "background",
1361 + row.theme.bg,
1362 + "important"
1363 + );
1364 +
1365 + row.el.style.setProperty(
1366 + "color",
1367 + row.theme.text,
1368 + "important"
1369 + );
1370 +
1371 + row.el.style.setProperty(
1372 + "text-align",
1373 + "left",
1374 + "important"
1375 + );
1376 +
1377 + row.el.style.setProperty(
1378 + "word-spacing",
1379 + "normal",
1380 + "important"
1381 + );
1382 +
1383 + var later=
1384 + unique
1385 + .filter(function(other){
1386 + return (
1387 + other.card===row.card&&
1388 + other.el
1389 + .getBoundingClientRect()
1390 + .top>
1391 + headerRect.top+2
1392 + );
1393 + })
1394 + .sort(function(a,b){
1395 + return (
1396 + a.el
1397 + .getBoundingClientRect()
1398 + .top-
1399 + b.el
1400 + .getBoundingClientRect()
1401 + .top
1402 + );
1403 + });
1404 +
1405 + var stopTop=
1406 + later.length
1407 + ?later[0].el
1408 + .getBoundingClientRect()
1409 + .top
1410 + :Infinity;
1411 +
1412 + Array.from(
1413 + row.card.querySelectorAll("a")
1414 + ).forEach(function(link){
1415 + if(!visible(link))return;
1416 +
1417 + var rect=
1418 + link.getBoundingClientRect();
1419 +
1420 + if(
1421 + rect.top<=
1422 + headerRect.bottom-2||
1423 + rect.top>=
1424 + stopTop-2
1425 + ){
1426 + return;
1427 + }
1428 +
1429 + var candidates=
1430 + rowCandidates(
1431 + link,
1432 + row.card
1433 + );
1434 +
1435 + var target=
1436 + chooseOuterRow(
1437 + candidates,
1438 + link
1439 + );
1440 +
1441 + candidates.forEach(function(el){
1442 + el.style.setProperty(
1443 + "border-left",
1444 + "0 solid transparent",
1445 + "important"
1446 + );
1447 + });
1448 +
1449 + target.style.setProperty(
1450 + "border-left",
1451 + "3px solid "+
1452 + row.theme.accent,
1453 + "important"
1454 + );
1455 +
1456 + target.style.setProperty(
1457 + "box-sizing",
1458 + "border-box",
1459 + "important"
1460 + );
1461 + });
1462 + });
1463 +
1464 + return unique;
609 609   }
610 610  
611 - function rowGroups(entries){
1467 + /* =======================================================
1468 + OVERVIEW CARD HEIGHT + FIRST THEMATIC ROW
1469 + ======================================================= */
1470 +
1471 + function alignOverviewCards(headers){
1472 + if(
1473 + PAGE_KIND!=="overview"||
1474 + window.innerWidth<=MOBILE_MAX
1475 + ){
1476 + return;
1477 + }
1478 +
1479 + var cards=[];
1480 + var seen=new Set();
1481 +
1482 + headers.forEach(function(row){
1483 + if(!seen.has(row.card)){
1484 + seen.add(row.card);
1485 + cards.push(row.card);
1486 + }
1487 + });
1488 +
1489 + if(cards.length<2){
1490 + return;
1491 + }
1492 +
1493 + // Group cards by actual top position.
612 612   var groups=[];
613 - entries.slice().sort(function(a,b){
614 - return a.rect.top-b.rect.top||a.rect.left-b.rect.left;
615 - }).forEach(function(entry){
1495 +
1496 + cards.forEach(function(card){
1497 + var top=
1498 + card.getBoundingClientRect().top;
1499 +
616 616   var group=null;
1501 +
617 617   for(var i=0;i<groups.length;i++){
618 - if(Math.abs(groups[i].top-entry.rect.top)<=ROW_TOLERANCE){
1503 + if(
1504 + Math.abs(
1505 + groups[i].top-top
1506 + )<=ROW_TOLERANCE
1507 + ){
619 619   group=groups[i];
620 620   break;
621 621   }
622 622   }
1512 +
623 623   if(!group){
624 - group={top:entry.rect.top,entries:[]};
1514 + group={
1515 + top:top,
1516 + cards:[]
1517 + };
625 625   groups.push(group);
626 626   }
627 - group.entries.push(entry);
1520 +
1521 + group.cards.push(card);
628 628   });
629 - return groups;
630 - }
631 631  
632 - function run(){
633 - reset();
1524 + groups.forEach(function(group){
1525 + if(group.cards.length<2){
1526 + return;
1527 + }
634 634  
635 - if(window.innerWidth<=MOBILE_MAX)return;
1529 + var firstHeaders=
1530 + group.cards.map(function(card){
1531 + var candidates=
1532 + headers
1533 + .filter(function(row){
1534 + return row.card===card;
1535 + })
1536 + .sort(function(a,b){
1537 + return (
1538 + a.el
1539 + .getBoundingClientRect()
1540 + .top-
1541 + b.el
1542 + .getBoundingClientRect()
1543 + .top
1544 + );
1545 + });
636 636  
637 - var parents=Array.from(root.querySelectorAll("*")).filter(function(el){
638 - return el.children&&el.children.length>=2&&horizontalLayout(el);
639 - });
1547 + return candidates.length
1548 + ?candidates[0]
1549 + :null;
1550 + });
640 640  
641 - parents.forEach(function(parent){
642 - var entries=[];
1552 + if(
1553 + !firstHeaders.some(function(row){
1554 + return !row;
1555 + })
1556 + ){
1557 + var targetTop=
1558 + Math.max.apply(
1559 + Math,
1560 + firstHeaders.map(function(row){
1561 + return (
1562 + row.el
1563 + .getBoundingClientRect()
1564 + .top-
1565 + row.card
1566 + .getBoundingClientRect()
1567 + .top
1568 + );
1569 + })
1570 + );
643 643  
644 - Array.from(parent.children).forEach(function(child){
645 - if(!visible(child))return;
646 - var target=pickTarget(child);
647 - if(!target)return;
648 - entries.push({
649 - target:target,
650 - rect:target.getBoundingClientRect()
1572 + firstHeaders.forEach(function(row){
1573 + var relativeTop=
1574 + row.el
1575 + .getBoundingClientRect()
1576 + .top-
1577 + row.card
1578 + .getBoundingClientRect()
1579 + .top;
1580 +
1581 + var delta=
1582 + targetTop-relativeTop;
1583 +
1584 + if(delta>1){
1585 + saveStyle(
1586 + row.el,
1587 + originalMargin,
1588 + "margin-top"
1589 + );
1590 +
1591 + var current=
1592 + num(
1593 + getComputedStyle(
1594 + row.el
1595 + ).marginTop
1596 + );
1597 +
1598 + row.el.style.setProperty(
1599 + "margin-top",
1600 + (
1601 + current+delta
1602 + )+"px"
1603 + );
1604 +
1605 + row.el.setAttribute(
1606 + "data-sn-master-first-row",
1607 + "1"
1608 + );
1609 +
1610 + managedMargin.add(
1611 + row.el
1612 + );
1613 + }
651 651   });
1615 + }
1616 +
1617 + var maxHeight=0;
1618 +
1619 + group.cards.forEach(function(card){
1620 + maxHeight=
1621 + Math.max(
1622 + maxHeight,
1623 + card
1624 + .getBoundingClientRect()
1625 + .height
1626 + );
652 652   });
653 653  
654 - if(entries.length<2)return;
1629 + maxHeight=
1630 + Math.ceil(maxHeight);
655 655  
656 - rowGroups(entries).forEach(function(group){
657 - if(group.entries.length<2)return;
1632 + group.cards.forEach(function(card){
1633 + saveStyle(
1634 + card,
1635 + originalHeight,
1636 + "min-height"
1637 + );
658 658  
659 - var lefts=group.entries.map(function(e){return e.rect.left;}).sort(function(a,b){return a-b;});
660 - if(lefts[lefts.length-1]-lefts[0]<80)return;
1639 + card.style.setProperty(
1640 + "min-height",
1641 + maxHeight+"px"
1642 + );
661 661  
662 - var targets=[];
663 - var seen=new Set();
1644 + card.setAttribute(
1645 + "data-sn-master-equal-height",
1646 + "1"
1647 + );
664 664  
665 - group.entries.forEach(function(e){
666 - if(!seen.has(e.target)){
667 - seen.add(e.target);
668 - targets.push(e.target);
1649 + managedHeight.add(
1650 + card
1651 + );
1652 + });
1653 + });
1654 + }
1655 +
1656 + /* =======================================================
1657 + DETAIL GRID EQUAL HEIGHT, DESKTOP ONLY
1658 + ======================================================= */
1659 +
1660 + function equaliseDetailGrids(){
1661 + if(
1662 + PAGE_KIND!=="detail"||
1663 + window.innerWidth<=MOBILE_MAX
1664 + ){
1665 + return;
1666 + }
1667 +
1668 + var selectors=[
1669 + ".arsn-grid",
1670 + ".arsn-grid-2",
1671 + ".arsn-grid-3",
1672 + ".dmp-grid",
1673 + ".ido-grid",
1674 + ".pp-grid"
1675 + ];
1676 +
1677 + selectors.forEach(function(selector){
1678 + Array.from(
1679 + root.querySelectorAll(selector)
1680 + ).forEach(function(grid){
1681 + var children=
1682 + Array.from(
1683 + grid.children||[]
1684 + ).filter(visible);
1685 +
1686 + if(children.length<2){
1687 + return;
1688 + }
1689 +
1690 + var groups=[];
1691 +
1692 + children.forEach(function(child){
1693 + var top=
1694 + child
1695 + .getBoundingClientRect()
1696 + .top;
1697 +
1698 + var group=null;
1699 +
1700 + for(var i=0;i<groups.length;i++){
1701 + if(
1702 + Math.abs(
1703 + groups[i].top-top
1704 + )<=ROW_TOLERANCE
1705 + ){
1706 + group=groups[i];
1707 + break;
1708 + }
669 669   }
670 - });
671 671  
672 - if(targets.length<2)return;
1711 + if(!group){
1712 + group={
1713 + top:top,
1714 + items:[]
1715 + };
1716 + groups.push(group);
1717 + }
673 673  
674 - var max=0;
675 - targets.forEach(function(el){
676 - max=Math.max(max,el.getBoundingClientRect().height);
1719 + group.items.push(child);
677 677   });
678 678  
679 - max=Math.ceil(max);
680 - if(max<MIN_H)return;
1722 + groups.forEach(function(group){
1723 + if(group.items.length<2){
1724 + return;
1725 + }
681 681  
682 - targets.forEach(function(el){
683 - el.style.setProperty("min-height",max+"px");
684 - el.setAttribute("data-sn-equal-height-managed","1");
685 - managed.add(el);
1727 + var maxHeight=0;
1728 +
1729 + group.items.forEach(function(item){
1730 + maxHeight=
1731 + Math.max(
1732 + maxHeight,
1733 + item
1734 + .getBoundingClientRect()
1735 + .height
1736 + );
1737 + });
1738 +
1739 + maxHeight=
1740 + Math.ceil(maxHeight);
1741 +
1742 + group.items.forEach(function(item){
1743 + saveStyle(
1744 + item,
1745 + originalHeight,
1746 + "min-height"
1747 + );
1748 +
1749 + item.style.setProperty(
1750 + "min-height",
1751 + maxHeight+"px"
1752 + );
1753 +
1754 + item.setAttribute(
1755 + "data-sn-master-equal-height",
1756 + "1"
1757 + );
1758 +
1759 + managedHeight.add(item);
1760 + });
686 686   });
687 687   });
688 688   });
689 689   }
690 690  
691 - function schedule(){
692 - if(raf)cancelAnimationFrame(raf);
693 - raf=requestAnimationFrame(function(){
694 - raf=requestAnimationFrame(function(){
695 - raf=0;
696 - run();
697 - });
698 - });
1766 + /* =======================================================
1767 + RUN / RESPONSIVE SCHEDULING
1768 + ======================================================= */
1769 +
1770 + function run(){
1771 + if(running)return;
1772 +
1773 + running=true;
1774 +
1775 + try{
1776 + resetRuntime();
1777 + applyPlaceholderBadge();
1778 + propagateDetailAccents();
1779 +
1780 + var headers=
1781 + applyOverviewPalette();
1782 +
1783 + makeThreeLineAreaLabels();
1784 + makeFilledRedOrangeCTAsBorderless();
1785 +
1786 + if(
1787 + window.innerWidth>
1788 + MOBILE_MAX
1789 + ){
1790 + alignOverviewCards(
1791 + headers
1792 + );
1793 +
1794 + equaliseDetailGrids();
1795 + }
1796 + }finally{
1797 + running=false;
1798 + }
699 699   }
700 700  
701 - addEventListener("resize",schedule,{passive:true});
702 - addEventListener("load",schedule,{once:true});
1801 + function onResize(){
1802 + if(resizeTimer){
1803 + clearTimeout(
1804 + resizeTimer
1805 + );
1806 + }
703 703  
704 - root.addEventListener("click",function(){
705 - setTimeout(schedule,0);
706 - },true);
1808 + resizeTimer=
1809 + setTimeout(
1810 + function(){
1811 + resizeTimer=0;
1812 + run();
1813 + },
1814 + RESIZE_DEBOUNCE
1815 + );
1816 + }
707 707  
708 - if(document.fonts&&document.fonts.ready){
709 - document.fonts.ready.then(schedule);
1818 + async function waitForReady(){
1819 + if(
1820 + document.readyState!=="complete"
1821 + ){
1822 + await new Promise(function(resolve){
1823 + window.addEventListener(
1824 + "load",
1825 + resolve,
1826 + {once:true}
1827 + );
1828 + });
1829 + }
1830 +
1831 + if(
1832 + document.fonts&&
1833 + document.fonts.ready
1834 + ){
1835 + try{
1836 + await document.fonts.ready;
1837 + }catch(error){}
1838 + }
1839 +
1840 + var images=
1841 + Array.from(
1842 + root.querySelectorAll("img")
1843 + );
1844 +
1845 + await Promise.all(
1846 + images.map(function(img){
1847 + if(img.complete){
1848 + return Promise.resolve();
1849 + }
1850 +
1851 + return new Promise(function(resolve){
1852 + var done=function(){
1853 + resolve();
1854 + };
1855 +
1856 + img.addEventListener(
1857 + "load",
1858 + done,
1859 + {once:true}
1860 + );
1861 +
1862 + img.addEventListener(
1863 + "error",
1864 + done,
1865 + {once:true}
1866 + );
1867 + });
1868 + })
1869 + );
1870 +
1871 + run();
710 710   }
711 711  
712 - schedule();
713 - setTimeout(schedule,250);
714 - setTimeout(schedule,900);
1874 + window.addEventListener(
1875 + "resize",
1876 + onResize,
1877 + {passive:true}
1878 + );
1879 +
1880 + waitForReady();
715 715  })();
716 716  </script>
717 -<!-- SN_HORIZONTAL_BOX_HARMONIZER_END -->
1883 +
1884 +<!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_END -->
718 718  {{/html}}
719 719