Zum Inhalt springen

Änderungen von Dokument Prepare

Zuletzt geändert von Veronika Kocher am Freitag, 18 Sep. 2026 16:47
Von Version 1.10
bearbeitet von Veronika Kocher
am Donnerstag, 03 Sep. 2026 14:15
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 1.8
bearbeitet von Veronika Kocher
am Donnerstag, 03 Sep. 2026 10:09
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -483,13 +483,12 @@
483 483  </div>
484 484  {{/html}}
485 485  
486 -{{html clean="false"}}
487 -<!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_START -->
486 +\n\n
487 +\n\n{{html clean="false"}}
488 +<!-- SN_HORIZONTAL_BOX_HARMONIZER_START -->
488 488  
489 -<style data-sn-service-navigator-master="1">
490 -/* =========================================================
491 - MASTER TYPOGRAPHY
492 - ========================================================= */
490 +<style data-sn-horizontal-box-harmonizer="7">
491 +/* ---------- Typography: never justify headings ---------- */
493 493  #xwikicontent h1,
494 494  #xwikicontent h2,
495 495  #xwikicontent h3,
... ... @@ -511,105 +511,88 @@
511 511   word-spacing:normal!important;
512 512  }
513 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{
513 +/* ---------- Native XWiki semantic callouts ---------- */
514 +#xwikicontent .box.infomessage,
515 +#xwikicontent .infomessage,
516 +#xwikicontent .box.warningmessage,
517 +#xwikicontent .warningmessage,
518 +#xwikicontent .box.successmessage,
519 +#xwikicontent .successmessage,
520 +#xwikicontent .box.errormessage,
521 +#xwikicontent .errormessage,
522 +#xwikicontent [data-sn-callout-harmonized="1"]{
542 542   box-sizing:border-box!important;
543 - border-left:4px solid #21b6d7!important;
544 - border-radius:8px;
524 + border-radius:8px!important;
525 + border-top:1px solid rgba(0,0,0,.08)!important;
526 + border-right:1px solid rgba(0,0,0,.08)!important;
527 + border-bottom:1px solid rgba(0,0,0,.08)!important;
528 + border-left:4px solid var(--sn-callout-accent,#21b6d7)!important;
529 + padding:14px 16px!important;
545 545   text-align:left!important;
531 + text-justify:auto!important;
546 546   word-spacing:normal!important;
533 + box-shadow:none!important;
547 547  }
548 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,
536 +#xwikicontent .box.infomessage,
537 +#xwikicontent .infomessage{
538 + --sn-callout-accent:#21b6d7;
539 + background:#eaf7fb!important;
540 +}
541 +
542 +#xwikicontent .box.warningmessage,
543 +#xwikicontent .warningmessage{
544 + --sn-callout-accent:#f0aa00;
545 + background:#fff8e7!important;
546 +}
547 +
548 +#xwikicontent .box.successmessage,
549 +#xwikicontent .successmessage{
550 + --sn-callout-accent:#38b76a;
551 + background:#edf9f1!important;
552 +}
553 +
554 +#xwikicontent .box.errormessage,
556 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;
556 + --sn-callout-accent:#e94b13;
557 + background:#fff1ec!important;
562 562  }
563 563  
564 -[data-sn-master-equal-height],
565 -[data-sn-master-first-row]{
566 - box-sizing:border-box;
560 +#xwikicontent [data-sn-callout-harmonized="1"] > :first-child,
561 +#xwikicontent .infomessage > :first-child,
562 +#xwikicontent .warningmessage > :first-child,
563 +#xwikicontent .successmessage > :first-child,
564 +#xwikicontent .errormessage > :first-child{
565 + margin-top:0!important;
567 567  }
568 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;
568 +#xwikicontent [data-sn-callout-harmonized="1"] > :last-child,
569 +#xwikicontent .infomessage > :last-child,
570 +#xwikicontent .warningmessage > :last-child,
571 +#xwikicontent .successmessage > :last-child,
572 +#xwikicontent .errormessage > :last-child{
573 + margin-bottom:0!important;
587 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;
575 +
576 +#xwikicontent [data-sn-equal-height-managed],
577 +#xwikicontent [data-sn-first-section-aligned],
578 +#xwikicontent [data-sn-first-content-aligned]{
579 + box-sizing:border-box;
599 599  }
600 600  </style>
601 601  
602 -<script data-sn-service-navigator-master="1">
583 +<script data-sn-horizontal-box-harmonizer="7">
603 603  (function(){
604 604   "use strict";
605 605  
606 - var PAGE_KIND="overview";
607 - var PLACEHOLDER=false;
608 - var PLACEHOLDER_LABEL="IN VORBEREITUNG";
609 -
610 610   var MOBILE_MAX=767;
611 611   var ROW_TOLERANCE=6;
589 + var MIN_W=150;
590 + var MIN_H=36;
591 + var MAX_PARENT_CHILDREN=18;
592 + var SEARCH_DEPTH=5;
612 612   var RESIZE_DEBOUNCE=220;
594 + var MIN_WIDTH_CHANGE=2;
613 613  
614 614   var root=
615 615   document.getElementById("xwikicontent")||
... ... @@ -619,114 +619,142 @@
619 619  
620 620   if(!root)return;
621 621  
622 - var managedHeight=new Set();
623 - var managedMargin=new Set();
624 - var originalHeight=new WeakMap();
625 - var originalMargin=new WeakMap();
604 + var heightManaged=new Set();
605 + var sectionManaged=new Set();
606 + var contentManaged=new Set();
626 626  
608 + var originalMinHeight=new WeakMap();
609 + var originalMarginTop=new WeakMap();
610 +
627 627   var resizeTimer=0;
628 - var running=false;
612 + var lastWidth=-1;
613 + var hasApplied=false;
614 + var applying=false;
629 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 - ]
616 + function num(v){
617 + var n=parseFloat(v);
618 + return Number.isFinite(n)?n:0;
619 + }
620 +
621 + function visible(el,minW,minH){
622 + if(!el||el.nodeType!==1)return false;
623 +
624 + var s=getComputedStyle(el);
625 +
626 + if(
627 + s.display==="none"||
628 + s.visibility==="hidden"||
629 + Number(s.opacity)===0
630 + ){
631 + return false;
691 691   }
692 - ];
693 693  
694 - function num(value){
695 - var n=parseFloat(value);
696 - return Number.isFinite(n)?n:0;
634 + var r=el.getBoundingClientRect();
635 +
636 + return (
637 + r.width>=(minW||1)&&
638 + r.height>=(minH||1)
639 + );
697 697   }
698 698  
699 - function norm(value){
700 - return String(value||"")
642 + function normalizeText(text){
643 + return String(text||"")
701 701   .replace(/\s+/g," ")
702 702   .trim()
703 703   .toUpperCase();
704 704   }
705 705  
706 - function visible(el){
707 - if(!el||el.nodeType!==1)return false;
649 + function excluded(el){
650 + return (
651 + !el.matches||
652 + el.matches(
653 + "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]"
654 + )
655 + );
656 + }
708 708  
709 - var style=getComputedStyle(el);
710 - var rect=el.getBoundingClientRect();
658 + /* ---------- Custom coloured callouts ---------- */
711 711  
660 + function nativeCallout(el){
661 + var c=
662 + typeof el.className==="string"
663 + ? el.className.toLowerCase()
664 + : "";
665 +
712 712   return (
713 - style.display!=="none"&&
714 - style.visibility!=="hidden"&&
715 - rect.width>20&&
716 - rect.height>4
667 + /(^|\s)(infomessage|warningmessage|successmessage|errormessage)(\s|$)/.test(c)
717 717   );
718 718   }
719 719  
720 - function saveStyle(el,map,property){
671 + function customCallout(el){
672 + if(!visible(el,220,42)||excluded(el))return false;
673 +
674 + var r=el.getBoundingClientRect();
675 +
676 + if(r.height>520)return false;
677 +
678 + var s=getComputedStyle(el);
679 +
680 + var bg=
681 + s.backgroundColor&&
682 + s.backgroundColor!=="rgba(0, 0, 0, 0)"&&
683 + s.backgroundColor!=="transparent"&&
684 + s.backgroundColor!=="rgb(255, 255, 255)";
685 +
686 + var left=
687 + num(s.borderLeftWidth);
688 +
689 + return (
690 + bg&&
691 + left>=2
692 + );
693 + }
694 +
695 + function harmoniseCustomCallouts(){
696 + Array.from(
697 + root.querySelectorAll(
698 + "div,aside,section"
699 + )
700 + ).forEach(function(el){
701 + if(nativeCallout(el))return;
702 + if(!customCallout(el))return;
703 +
704 + var s=getComputedStyle(el);
705 +
706 + el.setAttribute(
707 + "data-sn-callout-harmonized",
708 + "1"
709 + );
710 +
711 + if(
712 + s.borderLeftColor
713 + ){
714 + el.style.setProperty(
715 + "--sn-callout-accent",
716 + s.borderLeftColor
717 + );
718 + }
719 + });
720 + }
721 +
722 + /* ---------- Restore only values V7 itself changed ---------- */
723 +
724 + function saveOriginal(el,map,property){
721 721   if(map.has(el))return;
722 722  
723 723   map.set(el,{
724 - value:el.style.getPropertyValue(property),
725 - priority:el.style.getPropertyPriority(property)
728 + value:
729 + el.style.getPropertyValue(
730 + property
731 + ),
732 + priority:
733 + el.style.getPropertyPriority(
734 + property
735 + )
726 726   });
727 727   }
728 728  
729 - function restoreStyle(el,map,property){
739 + function restoreOriginal(el,map,property){
730 730   var original=map.get(el);
731 731  
732 732   if(original&&original.value){
... ... @@ -736,1069 +736,770 @@
736 736   original.priority||""
737 737   );
738 738   }else{
739 - el.style.removeProperty(property);
749 + el.style.removeProperty(
750 + property
751 + );
740 740   }
741 741   }
742 742  
743 743   function resetRuntime(){
744 - managedHeight.forEach(function(el){
745 - restoreStyle(
756 + heightManaged.forEach(function(el){
757 + restoreOriginal(
746 746   el,
747 - originalHeight,
759 + originalMinHeight,
748 748   "min-height"
749 749   );
762 +
750 750   el.removeAttribute(
751 - "data-sn-master-equal-height"
764 + "data-sn-equal-height-managed"
752 752   );
753 753   });
754 754  
755 - managedMargin.forEach(function(el){
756 - restoreStyle(
768 + sectionManaged.forEach(function(el){
769 + restoreOriginal(
757 757   el,
758 - originalMargin,
771 + originalMarginTop,
759 759   "margin-top"
760 760   );
774 +
761 761   el.removeAttribute(
762 - "data-sn-master-first-row"
776 + "data-sn-first-section-aligned"
763 763   );
764 764   });
765 765  
766 - managedHeight.clear();
767 - managedMargin.clear();
768 - }
780 + contentManaged.forEach(function(el){
781 + restoreOriginal(
782 + el,
783 + originalMarginTop,
784 + "margin-top"
785 + );
769 769  
770 - function themeFor(text){
771 - var value=norm(text);
787 + el.removeAttribute(
788 + "data-sn-first-content-aligned"
789 + );
790 + });
772 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;
792 + heightManaged.clear();
793 + sectionManaged.clear();
794 + contentManaged.clear();
789 789   }
790 790  
791 - /* =======================================================
792 - BORDERLESS FILLED RED/ORANGE CTA BUTTONS
793 - ======================================================= */
797 + /* ---------- Card detection ---------- */
794 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)
800 - );
799 + function namedLikeBox(el){
800 + var c=
801 + typeof el.className==="string"
802 + ? el.className
803 + : "";
804 +
805 + return /(^|[\s_-])(box|card|tile|panel|role|check|service|source|call|area|detail|resource|topic|warn|info)([\s_-]|$)/i.test(c);
801 801   }
802 802  
803 - function makeFilledRedOrangeCTAsBorderless(){
804 - var RED_ORANGE=[233,75,19];
808 + function boxLike(el){
809 + if(
810 + !visible(el,MIN_W,MIN_H)||
811 + excluded(el)
812 + ){
813 + return false;
814 + }
805 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;
816 + var s=getComputedStyle(el);
817 + var r=el.getBoundingClientRect();
812 812  
813 - var style=getComputedStyle(el);
814 - var rgb=parseRGB(style.backgroundColor);
819 + var border=
820 + num(s.borderTopWidth)+
821 + num(s.borderRightWidth)+
822 + num(s.borderBottomWidth)+
823 + num(s.borderLeftWidth);
815 815  
816 - if(!rgb)return;
825 + var radius=Math.max(
826 + num(s.borderTopLeftRadius),
827 + num(s.borderTopRightRadius),
828 + num(s.borderBottomLeftRadius),
829 + num(s.borderBottomRightRadius)
830 + );
817 817  
818 - if(
819 - colourDistance(
820 - rgb,
821 - RED_ORANGE
822 - )>55
823 - ){
824 - return;
825 - }
832 + var bg=
833 + s.backgroundColor&&
834 + s.backgroundColor!=="rgba(0, 0, 0, 0)"&&
835 + s.backgroundColor!=="transparent";
826 826  
827 - var rect=el.getBoundingClientRect();
837 + var shadow=
838 + s.boxShadow&&
839 + s.boxShadow!=="none";
828 828  
829 - if(
830 - rect.width<80||
831 - rect.height<24
832 - ){
833 - return;
834 - }
841 + return (
842 + namedLikeBox(el)||
843 + border>=1||
844 + (bg&&radius>=3)||
845 + (shadow&&r.width>=180)
846 + );
847 + }
835 835  
836 - el.style.setProperty(
837 - "border",
838 - "none",
839 - "important"
840 - );
849 + function pickTarget(child){
850 + if(!visible(child,MIN_W,MIN_H))return null;
841 841  
842 - el.style.setProperty(
843 - "border-left",
844 - "none",
845 - "important"
846 - );
852 + if(boxLike(child))return child;
847 847  
848 - el.style.setProperty(
849 - "border-top",
850 - "none",
851 - "important"
852 - );
854 + var cr=child.getBoundingClientRect();
855 + var q=[];
853 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 - );
857 + Array.from(child.children||[]).forEach(function(el){
858 + q.push({el:el,depth:1});
871 871   });
872 - }
873 873  
874 - /* =======================================================
875 - FULL-WIDTH THREE-LINE AREA LABELS
876 - ======================================================= */
861 + var best=null;
862 + var bestScore=-Infinity;
877 877  
878 - function compactText(value){
879 - return String(value||"")
880 - .replace(/\s+/g," ")
881 - .trim();
882 - }
864 + while(q.length){
865 + var item=q.shift();
866 + var el=item.el;
883 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 - }
868 + if(!visible(el,MIN_W,MIN_H))continue;
897 897  
898 - var number=
899 - label.querySelector(
900 - ":scope > .arsn-area-number"
901 - );
870 + var r=el.getBoundingClientRect();
902 902  
903 - var action=
904 - label.querySelector(
905 - ":scope > .arsn-area-action"
906 - );
907 -
908 908   if(
909 - !number||
910 - !action
873 + r.width>=cr.width*.68&&
874 + boxLike(el)
911 911   ){
912 - return;
913 - }
876 + var widthFit=
877 + 1-Math.min(
878 + 1,
879 + Math.abs(cr.width-r.width)/
880 + Math.max(1,cr.width)
881 + );
914 914  
915 - var clone=
916 - label.cloneNode(true);
883 + var topFit=
884 + 1-Math.min(
885 + 1,
886 + Math.abs(cr.top-r.top)/100
887 + );
917 917  
918 - var cloneNumber=
919 - clone.querySelector(
920 - ":scope > .arsn-area-number"
921 - );
889 + var score=
890 + widthFit*6+
891 + topFit*3+
892 + Math.min(r.height,900)/450+
893 + Math.min(r.width*r.height,900000)/900000;
922 922  
923 - var cloneAction=
924 - clone.querySelector(
925 - ":scope > .arsn-area-action"
926 - );
927 -
928 - if(cloneNumber){
929 - cloneNumber.remove();
895 + if(score>bestScore){
896 + best=el;
897 + bestScore=score;
898 + }
930 930   }
931 931  
932 - if(cloneAction){
933 - cloneAction.remove();
901 + if(item.depth<SEARCH_DEPTH){
902 + Array.from(el.children||[]).forEach(function(next){
903 + q.push({
904 + el:next,
905 + depth:item.depth+1
906 + });
907 + });
934 934   }
909 + }
935 935  
936 - var titleText=
937 - compactText(
938 - clone.textContent
939 - );
911 + return best;
912 + }
940 940  
941 - if(!titleText){
942 - return;
943 - }
914 + function groupRows(entries){
915 + var groups=[];
944 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"
917 + entries
918 + .slice()
919 + .sort(function(a,b){
920 + return (
921 + a.rect.top-b.rect.top||
922 + a.rect.left-b.rect.left
954 954   );
924 + })
925 + .forEach(function(entry){
926 + var group=null;
955 955  
956 - titleNode.className=
957 - "sn-area-label-title";
928 + for(var i=0;i<groups.length;i++){
929 + if(
930 + Math.abs(
931 + groups[i].top-
932 + entry.rect.top
933 + )<=ROW_TOLERANCE
934 + ){
935 + group=groups[i];
936 + break;
937 + }
938 + }
958 958  
959 - titleNode.textContent=
960 - titleText;
940 + if(!group){
941 + group={
942 + top:entry.rect.top,
943 + entries:[]
944 + };
945 + groups.push(group);
946 + }
961 961  
962 - while(label.firstChild){
963 - label.removeChild(
964 - label.firstChild
965 - );
966 - }
948 + group.entries.push(entry);
949 + });
967 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 - });
951 + return groups;
1010 1010   }
1011 1011  
1012 - /* =======================================================
1013 - PLACEHOLDER BADGE
1014 - ======================================================= */
954 + function validRow(group){
955 + if(group.entries.length<2)return false;
1015 1015  
1016 - function applyPlaceholderBadge(){
1017 - if(!PLACEHOLDER)return;
957 + var lefts=
958 + group.entries
959 + .map(function(e){return e.rect.left;})
960 + .sort(function(a,b){return a-b;});
1018 1018  
1019 1019   if(
1020 - document.querySelector(
1021 - ".sn-coming-soon-badge"
1022 - )
963 + lefts[lefts.length-1]-
964 + lefts[0]<
965 + 80
1023 1023   ){
1024 - return;
967 + return false;
1025 1025   }
1026 1026  
1027 - var title=
1028 - document.querySelector(
1029 - "#document-title"
1030 - )||
1031 - document.querySelector(
1032 - "h1"
1033 - );
970 + var widths=
971 + group.entries
972 + .map(function(e){return e.rect.width;})
973 + .filter(function(w){return w>0;});
1034 1034  
1035 - if(!title)return;
975 + if(widths.length<2)return false;
1036 1036  
1037 - var badge=
1038 - document.createElement(
1039 - "span"
1040 - );
977 + var minW=
978 + Math.min.apply(Math,widths);
1041 1041  
1042 - badge.className=
1043 - "sn-coming-soon-badge";
980 + var maxW=
981 + Math.max.apply(Math,widths);
1044 1044  
1045 - badge.textContent=
1046 - PLACEHOLDER_LABEL;
1047 -
1048 - badge.setAttribute(
1049 - "aria-label",
1050 - PLACEHOLDER_LABEL
983 + return (
984 + maxW/
985 + Math.max(1,minW)<=
986 + 1.9
1051 1051   );
988 + }
1052 1052  
1053 - title.appendChild(
1054 - badge
990 + /* ---------- Known ARSN first section bars ---------- */
991 +
992 + function knownBar(el){
993 + var text=
994 + normalizeText(
995 + el.textContent
996 + );
997 +
998 + return (
999 + text==="HIER STARTEN"||
1000 + text==="ORGANISIEREN & DOKUMENTIEREN"||
1001 + text==="ENTSCHEIDEN"||
1002 + text==="START HERE"||
1003 + text==="GET STARTED"||
1004 + text==="ORGANISE & DOCUMENT"||
1005 + text==="ORGANIZE & DOCUMENT"||
1006 + text==="DECIDE"
1055 1055   );
1056 1056   }
1057 1057  
1058 - /* =======================================================
1059 - DETAIL PAGE OWN-ACCENT PROPAGATION
1060 - ======================================================= */
1010 + function findKnownBar(card){
1011 + var cardRect=
1012 + card.getBoundingClientRect();
1061 1061  
1062 - function parseRGB(value){
1063 - var match=String(value||"").match(
1064 - /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i
1065 - );
1014 + var rows=
1015 + Array.from(
1016 + card.querySelectorAll(
1017 + "div,p,span,strong,h3,h4,h5,h6"
1018 + )
1019 + )
1020 + .filter(function(el){
1021 + if(!visible(el,20,6))return false;
1022 + if(!knownBar(el))return false;
1066 1066  
1067 - if(!match)return null;
1024 + var r=el.getBoundingClientRect();
1068 1068  
1069 - return [
1070 - Number(match[1]),
1071 - Number(match[2]),
1072 - Number(match[3])
1073 - ];
1074 - }
1026 + var rel=
1027 + r.top-
1028 + cardRect.top;
1075 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 - );
1030 + return (
1031 + rel>=35&&
1032 + rel<=
1033 + cardRect.height*.75
1034 + );
1035 + })
1036 + .sort(function(a,b){
1037 + return (
1038 + a.getBoundingClientRect().top-
1039 + b.getBoundingClientRect().top
1040 + );
1041 + });
1042 +
1043 + return rows[0]||null;
1082 1082   }
1083 1083  
1084 - function paletteMatch(cssColor){
1085 - var rgb=parseRGB(cssColor);
1046 + function alignKnownBars(cards){
1047 + var rows=
1048 + cards.map(function(card){
1049 + var bar=
1050 + findKnownBar(card);
1086 1086  
1087 - if(!rgb)return null;
1052 + if(!bar)return null;
1088 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 - ];
1054 + var cr=
1055 + card.getBoundingClientRect();
1095 1095  
1096 - var best=null;
1097 - var bestDistance=Infinity;
1057 + var br=
1058 + bar.getBoundingClientRect();
1098 1098  
1099 - palette.forEach(function(item){
1100 - var d=distance(rgb,item.rgb);
1060 + return {
1061 + bar:bar,
1062 + relativeTop:
1063 + br.top-
1064 + cr.top
1065 + };
1066 + });
1101 1101  
1102 - if(d<bestDistance){
1103 - best=item;
1104 - bestDistance=d;
1105 - }
1106 - });
1068 + if(
1069 + rows.some(function(row){
1070 + return !row;
1071 + })
1072 + ){
1073 + return false;
1074 + }
1107 1107  
1108 - return bestDistance<=30
1109 - ?best
1110 - :null;
1111 - }
1076 + var target=
1077 + Math.max.apply(
1078 + Math,
1079 + rows.map(function(row){
1080 + return row.relativeTop;
1081 + })
1082 + );
1112 1112  
1113 - function propagateDetailAccents(){
1114 - if(PAGE_KIND!=="detail")return;
1084 + rows.forEach(function(row){
1085 + var delta=
1086 + target-
1087 + row.relativeTop;
1115 1115  
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;
1089 + if(delta<=1)return;
1123 1123  
1124 - var style=getComputedStyle(el);
1091 + saveOriginal(
1092 + row.bar,
1093 + originalMarginTop,
1094 + "margin-top"
1095 + );
1125 1125  
1126 - if(
1127 - num(style.borderTopWidth)>=2
1128 - ){
1129 - var match=
1130 - paletteMatch(
1131 - style.borderTopColor
1132 - );
1097 + var current=
1098 + num(
1099 + getComputedStyle(
1100 + row.bar
1101 + ).marginTop
1102 + );
1133 1133  
1134 - if(match){
1135 - el.style.setProperty(
1136 - "border-left",
1137 - "4px solid "+match.hex,
1138 - "important"
1139 - );
1140 - }
1141 - }
1142 - });
1104 + row.bar.style.setProperty(
1105 + "margin-top",
1106 + (
1107 + current+
1108 + delta
1109 + )+"px"
1110 + );
1143 1143  
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"
1112 + row.bar.setAttribute(
1113 + "data-sn-first-section-aligned",
1114 + "7"
1157 1157   );
1158 - });
1159 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"
1117 + sectionManaged.add(
1118 + row.bar
1172 1172   );
1173 1173   });
1121 +
1122 + return true;
1174 1174   }
1175 1175  
1176 - /* =======================================================
1177 - OVERVIEW SEMANTIC THEME PALETTE
1178 - ======================================================= */
1125 + /* ---------- Generic first content after heading ---------- */
1179 1179  
1180 - function smallestThemeHeaders(){
1181 - return Array.from(
1182 - root.querySelectorAll(
1183 - "div,span,p,strong,h3,h4,h5,h6"
1127 + function heading(card){
1128 + var cr=
1129 + card.getBoundingClientRect();
1130 +
1131 + var rows=
1132 + Array.from(
1133 + card.querySelectorAll(
1134 + "h1,h2,h3,h4,h5,h6,.box-title,[role=heading]"
1135 + )
1184 1184   )
1185 - ).filter(function(el){
1186 - if(!visible(el))return false;
1187 - if(!themeFor(el.textContent))return false;
1137 + .filter(function(el){
1138 + if(!visible(el,20,8))return false;
1188 1188  
1189 - return !Array.from(
1190 - el.children||[]
1191 - ).some(function(child){
1192 - return !!themeFor(
1193 - child.textContent
1140 + var r=el.getBoundingClientRect();
1141 +
1142 + var rel=
1143 + r.top-
1144 + cr.top;
1145 +
1146 + return (
1147 + rel>=0&&
1148 + rel<=
1149 + Math.min(
1150 + 160,
1151 + cr.height*.45
1152 + )
1194 1194   );
1154 + })
1155 + .sort(function(a,b){
1156 + return (
1157 + a.getBoundingClientRect().top-
1158 + b.getBoundingClientRect().top
1159 + );
1195 1195   });
1196 - });
1161 +
1162 + return rows[0]||null;
1197 1197   }
1198 1198  
1199 - function findOverviewCard(header){
1200 - var node=header.parentElement;
1201 - var candidates=[];
1165 + function firstContent(card,h){
1166 + if(!h)return null;
1202 1202  
1203 - while(node&&node!==root){
1204 - var rect=node.getBoundingClientRect();
1205 - var style=getComputedStyle(node);
1168 + var cr=
1169 + card.getBoundingClientRect();
1206 1206  
1207 - var border=
1208 - num(style.borderTopWidth)+
1209 - num(style.borderRightWidth)+
1210 - num(style.borderBottomWidth)+
1211 - num(style.borderLeftWidth);
1171 + var hr=
1172 + h.getBoundingClientRect();
1212 1212  
1213 - if(
1214 - rect.width>=220&&
1215 - rect.width<=800&&
1216 - rect.height>=120&&
1217 - border>=1
1218 - ){
1219 - candidates.push(node);
1220 - }
1174 + var rows=
1175 + Array.from(
1176 + card.querySelectorAll(
1177 + "p,div,ul,ol,dl,blockquote"
1178 + )
1179 + )
1180 + .filter(function(el){
1181 + if(
1182 + el===h||
1183 + h.contains(el)||
1184 + el.contains(h)
1185 + ){
1186 + return false;
1187 + }
1221 1221  
1222 - node=node.parentElement;
1223 - }
1189 + if(!visible(el,30,8))return false;
1224 1224  
1225 - if(!candidates.length)return null;
1191 + var text=
1192 + String(el.textContent||"")
1193 + .replace(/\s+/g," ")
1194 + .trim();
1226 1226  
1227 - candidates.sort(function(a,b){
1228 - return (
1229 - b.getBoundingClientRect().height-
1230 - a.getBoundingClientRect().height
1231 - );
1232 - });
1196 + if(text.length<3)return false;
1233 1233  
1234 - return candidates[0];
1235 - }
1198 + var r=el.getBoundingClientRect();
1236 1236  
1237 - function rowCandidates(link,card){
1238 - var result=[];
1239 - var cardRect=
1240 - card.getBoundingClientRect();
1200 + if(
1201 + r.top<
1202 + hr.bottom-1
1203 + ){
1204 + return false;
1205 + }
1241 1241  
1242 - var node=link;
1207 + if(
1208 + r.top-cr.top>
1209 + Math.min(
1210 + 280,
1211 + cr.height*.65
1212 + )
1213 + ){
1214 + return false;
1215 + }
1243 1243  
1244 - while(node&&node!==card){
1245 - if(visible(node)){
1246 - var rect=
1247 - node.getBoundingClientRect();
1248 -
1249 1249   if(
1250 - rect.height<=105&&
1251 - rect.width>=
1252 - cardRect.width*.50&&
1253 - rect.width<=
1254 - cardRect.width*1.03
1218 + r.height>
1219 + cr.height*.58
1255 1255   ){
1256 - result.push(node);
1221 + return false;
1257 1257   }
1258 - }
1259 1259  
1260 - node=node.parentElement;
1261 - }
1224 + return true;
1225 + })
1226 + .sort(function(a,b){
1227 + var ar=
1228 + a.getBoundingClientRect();
1262 1262  
1263 - return result;
1264 - }
1230 + var br=
1231 + b.getBoundingClientRect();
1265 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 1276   return (
1277 - num(
1278 - getComputedStyle(el)
1279 - .borderLeftWidth
1280 - )>=1
1234 + ar.top-br.top||
1235 + ar.height-br.height
1281 1281   );
1282 1282   });
1283 1283  
1284 - var pool=
1285 - bordered.length
1286 - ?bordered
1287 - :candidates;
1239 + return rows[0]||null;
1240 + }
1288 1288  
1289 - pool.sort(function(a,b){
1290 - var ar=
1291 - a.getBoundingClientRect();
1242 + function alignGeneric(cards){
1243 + var rows=
1244 + cards.map(function(card){
1245 + var h=
1246 + heading(card);
1292 1292  
1293 - var br=
1294 - b.getBoundingClientRect();
1248 + var c=
1249 + firstContent(
1250 + card,
1251 + h
1252 + );
1295 1295  
1296 - return (
1297 - ar.left-br.left||
1298 - br.width-ar.width
1299 - );
1300 - });
1254 + if(!h||!c)return null;
1301 1301  
1302 - return pool[0]||link;
1303 - }
1256 + var cr=
1257 + card.getBoundingClientRect();
1304 1304  
1305 - function applyOverviewPalette(){
1306 - if(PAGE_KIND!=="overview"){
1307 - return [];
1259 + var rr=
1260 + c.getBoundingClientRect();
1261 +
1262 + return {
1263 + content:c,
1264 + relativeTop:
1265 + rr.top-cr.top
1266 + };
1267 + });
1268 +
1269 + if(
1270 + rows.some(function(row){
1271 + return !row;
1272 + })
1273 + ){
1274 + return false;
1308 1308   }
1309 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 - };
1277 + var target=
1278 + Math.max.apply(
1279 + Math,
1280 + rows.map(function(row){
1281 + return row.relativeTop;
1324 1324   })
1325 - .filter(function(row){
1326 - return !!row.card;
1327 - });
1283 + );
1328 1328  
1329 - var unique=[];
1330 - var seenHeaders=new Set();
1285 + rows.forEach(function(row){
1286 + var delta=
1287 + target-
1288 + row.relativeTop;
1331 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 - );
1290 + if(delta<=1)return;
1347 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"
1292 + saveOriginal(
1293 + row.content,
1294 + originalMarginTop,
1295 + "margin-top"
1363 1363   );
1364 1364  
1365 - row.el.style.setProperty(
1366 - "color",
1367 - row.theme.text,
1368 - "important"
1369 - );
1298 + var current=
1299 + num(
1300 + getComputedStyle(
1301 + row.content
1302 + ).marginTop
1303 + );
1370 1370  
1371 - row.el.style.setProperty(
1372 - "text-align",
1373 - "left",
1374 - "important"
1305 + row.content.style.setProperty(
1306 + "margin-top",
1307 + (
1308 + current+
1309 + delta
1310 + )+"px"
1375 1375   );
1376 1376  
1377 - row.el.style.setProperty(
1378 - "word-spacing",
1379 - "normal",
1380 - "important"
1313 + row.content.setAttribute(
1314 + "data-sn-first-content-aligned",
1315 + "7"
1381 1381   );
1382 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 - });
1318 + contentManaged.add(
1319 + row.content
1320 + );
1462 1462   });
1463 1463  
1464 - return unique;
1323 + return true;
1465 1465   }
1466 1466  
1467 - /* =======================================================
1468 - OVERVIEW CARD HEIGHT + FIRST THEMATIC ROW
1469 - ======================================================= */
1326 + function applyRow(group){
1327 + if(!validRow(group))return false;
1470 1470  
1471 - function alignOverviewCards(headers){
1472 - if(
1473 - PAGE_KIND!=="overview"||
1474 - window.innerWidth<=MOBILE_MAX
1475 - ){
1476 - return;
1477 - }
1478 -
1479 1479   var cards=[];
1480 1480   var seen=new Set();
1481 1481  
1482 - headers.forEach(function(row){
1483 - if(!seen.has(row.card)){
1484 - seen.add(row.card);
1485 - cards.push(row.card);
1332 + group.entries.forEach(function(entry){
1333 + if(!seen.has(entry.target)){
1334 + seen.add(entry.target);
1335 + cards.push(entry.target);
1486 1486   }
1487 1487   });
1488 1488  
1489 - if(cards.length<2){
1490 - return;
1339 + if(cards.length<2)return false;
1340 +
1341 + if(
1342 + !alignKnownBars(cards)
1343 + ){
1344 + alignGeneric(cards);
1491 1491   }
1492 1492  
1493 - // Group cards by actual top position.
1494 - var groups=[];
1347 + var maxHeight=0;
1495 1495  
1496 1496   cards.forEach(function(card){
1497 - var top=
1498 - card.getBoundingClientRect().top;
1499 -
1500 - var group=null;
1501 -
1502 - for(var i=0;i<groups.length;i++){
1503 - if(
1504 - Math.abs(
1505 - groups[i].top-top
1506 - )<=ROW_TOLERANCE
1507 - ){
1508 - group=groups[i];
1509 - break;
1510 - }
1511 - }
1512 -
1513 - if(!group){
1514 - group={
1515 - top:top,
1516 - cards:[]
1517 - };
1518 - groups.push(group);
1519 - }
1520 -
1521 - group.cards.push(card);
1350 + maxHeight=
1351 + Math.max(
1352 + maxHeight,
1353 + card.getBoundingClientRect().height
1354 + );
1522 1522   });
1523 1523  
1524 - groups.forEach(function(group){
1525 - if(group.cards.length<2){
1526 - return;
1527 - }
1357 + maxHeight=
1358 + Math.ceil(
1359 + maxHeight
1360 + );
1528 1528  
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 - });
1362 + if(maxHeight<MIN_H)return false;
1546 1546  
1547 - return candidates.length
1548 - ?candidates[0]
1549 - :null;
1550 - });
1364 + cards.forEach(function(card){
1365 + saveOriginal(
1366 + card,
1367 + originalMinHeight,
1368 + "min-height"
1369 + );
1551 1551  
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 - );
1371 + card.style.setProperty(
1372 + "min-height",
1373 + maxHeight+"px"
1374 + );
1571 1571  
1572 - firstHeaders.forEach(function(row){
1573 - var relativeTop=
1574 - row.el
1575 - .getBoundingClientRect()
1576 - .top-
1577 - row.card
1578 - .getBoundingClientRect()
1579 - .top;
1376 + card.setAttribute(
1377 + "data-sn-equal-height-managed",
1378 + "7"
1379 + );
1580 1580  
1581 - var delta=
1582 - targetTop-relativeTop;
1381 + heightManaged.add(card);
1382 + });
1583 1583  
1584 - if(delta>1){
1585 - saveStyle(
1586 - row.el,
1587 - originalMargin,
1588 - "margin-top"
1589 - );
1384 + return true;
1385 + }
1590 1590  
1591 - var current=
1592 - num(
1593 - getComputedStyle(
1594 - row.el
1595 - ).marginTop
1596 - );
1387 + function calculate(force){
1388 + if(applying)return;
1597 1597  
1598 - row.el.style.setProperty(
1599 - "margin-top",
1600 - (
1601 - current+delta
1602 - )+"px"
1603 - );
1390 + var width=
1391 + Math.round(
1392 + window.innerWidth
1393 + );
1604 1604  
1605 - row.el.setAttribute(
1606 - "data-sn-master-first-row",
1607 - "1"
1608 - );
1395 + var meaningful=
1396 + lastWidth<0||
1397 + Math.abs(
1398 + width-
1399 + lastWidth
1400 + )>=
1401 + MIN_WIDTH_CHANGE;
1609 1609  
1610 - managedMargin.add(
1611 - row.el
1612 - );
1613 - }
1614 - });
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 - );
1627 - });
1628 -
1629 - maxHeight=
1630 - Math.ceil(maxHeight);
1631 -
1632 - group.cards.forEach(function(card){
1633 - saveStyle(
1634 - card,
1635 - originalHeight,
1636 - "min-height"
1637 - );
1638 -
1639 - card.style.setProperty(
1640 - "min-height",
1641 - maxHeight+"px"
1642 - );
1643 -
1644 - card.setAttribute(
1645 - "data-sn-master-equal-height",
1646 - "1"
1647 - );
1648 -
1649 - managedHeight.add(
1650 - card
1651 - );
1652 - });
1653 - });
1654 - }
1655 -
1656 - /* =======================================================
1657 - DETAIL GRID EQUAL HEIGHT, DESKTOP ONLY
1658 - ======================================================= */
1659 -
1660 - function equaliseDetailGrids(){
1661 1661   if(
1662 - PAGE_KIND!=="detail"||
1663 - window.innerWidth<=MOBILE_MAX
1404 + hasApplied&&
1405 + !force&&
1406 + !meaningful
1664 1664   ){
1665 1665   return;
1666 1666   }
1667 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 - ];
1411 + applying=true;
1676 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);
1413 + try{
1414 + harmoniseCustomCallouts();
1685 1685  
1686 - if(children.length<2){
1687 - return;
1416 + if(width<=MOBILE_MAX){
1417 + if(hasApplied){
1418 + resetRuntime();
1688 1688   }
1689 1689  
1690 - var groups=[];
1421 + hasApplied=false;
1422 + lastWidth=width;
1423 + return;
1424 + }
1691 1691  
1692 - children.forEach(function(child){
1693 - var top=
1694 - child
1695 - .getBoundingClientRect()
1696 - .top;
1426 + if(hasApplied){
1427 + resetRuntime();
1428 + }
1697 1697  
1698 - var group=null;
1430 + var parents=
1431 + Array.from(
1432 + root.querySelectorAll("*")
1433 + )
1434 + .filter(function(parent){
1435 + return (
1436 + visible(
1437 + parent,
1438 + MIN_W,
1439 + MIN_H
1440 + )&&
1441 + parent.children&&
1442 + parent.children.length>=2&&
1443 + parent.children.length<=
1444 + MAX_PARENT_CHILDREN
1445 + );
1446 + });
1699 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 - }
1709 - }
1448 + var touched=
1449 + new Set();
1710 1710  
1711 - if(!group){
1712 - group={
1713 - top:top,
1714 - items:[]
1715 - };
1716 - groups.push(group);
1717 - }
1451 + parents.forEach(function(parent){
1452 + var entries=[];
1718 1718  
1719 - group.items.push(child);
1720 - });
1721 -
1722 - groups.forEach(function(group){
1723 - if(group.items.length<2){
1454 + Array.from(
1455 + parent.children
1456 + ).forEach(function(child){
1457 + if(
1458 + !visible(
1459 + child,
1460 + MIN_W,
1461 + MIN_H
1462 + )
1463 + ){
1724 1724   return;
1725 1725   }
1726 1726  
1727 - var maxHeight=0;
1467 + var target=
1468 + pickTarget(child);
1728 1728  
1729 - group.items.forEach(function(item){
1730 - maxHeight=
1731 - Math.max(
1732 - maxHeight,
1733 - item
1734 - .getBoundingClientRect()
1735 - .height
1736 - );
1470 + if(!target)return;
1471 +
1472 + entries.push({
1473 + target:target,
1474 + rect:
1475 + target.getBoundingClientRect()
1737 1737   });
1477 + });
1738 1738  
1739 - maxHeight=
1740 - Math.ceil(maxHeight);
1479 + groupRows(
1480 + entries
1481 + ).forEach(function(group){
1482 + if(!validRow(group))return;
1741 1741  
1742 - group.items.forEach(function(item){
1743 - saveStyle(
1744 - item,
1745 - originalHeight,
1746 - "min-height"
1747 - );
1484 + var targets=
1485 + group.entries.map(function(entry){
1486 + return entry.target;
1487 + });
1748 1748  
1749 - item.style.setProperty(
1750 - "min-height",
1751 - maxHeight+"px"
1752 - );
1489 + if(
1490 + !targets.some(function(el){
1491 + return !touched.has(el);
1492 + })
1493 + ){
1494 + return;
1495 + }
1753 1753  
1754 - item.setAttribute(
1755 - "data-sn-master-equal-height",
1756 - "1"
1757 - );
1758 -
1759 - managedHeight.add(item);
1760 - });
1497 + if(applyRow(group)){
1498 + targets.forEach(function(el){
1499 + touched.add(el);
1500 + });
1501 + }
1761 1761   });
1762 1762   });
1763 - });
1764 - }
1765 1765  
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 - }
1505 + lastWidth=width;
1506 + hasApplied=true;
1796 1796   }finally{
1797 - running=false;
1508 + applying=false;
1798 1798   }
1799 1799   }
1800 1800  
1801 - function onResize(){
1512 + function resize(){
1802 1802   if(resizeTimer){
1803 1803   clearTimeout(
1804 1804   resizeTimer
... ... @@ -1809,40 +1809,19 @@
1809 1809   setTimeout(
1810 1810   function(){
1811 1811   resizeTimer=0;
1812 - run();
1523 + calculate(false);
1813 1813   },
1814 1814   RESIZE_DEBOUNCE
1815 1815   );
1816 1816   }
1817 1817  
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 -
1529 + function waitImages(){
1840 1840   var images=
1841 1841   Array.from(
1842 1842   root.querySelectorAll("img")
1843 1843   );
1844 1844  
1845 - await Promise.all(
1535 + return Promise.all(
1846 1846   images.map(function(img){
1847 1847   if(img.complete){
1848 1848   return Promise.resolve();
... ... @@ -1867,20 +1867,46 @@
1867 1867   });
1868 1868   })
1869 1869   );
1560 + }
1870 1870  
1871 - run();
1562 + async function initial(){
1563 + if(
1564 + document.readyState!==
1565 + "complete"
1566 + ){
1567 + await new Promise(function(resolve){
1568 + addEventListener(
1569 + "load",
1570 + resolve,
1571 + {once:true}
1572 + );
1573 + });
1574 + }
1575 +
1576 + if(
1577 + document.fonts&&
1578 + document.fonts.ready
1579 + ){
1580 + try{
1581 + await document.fonts.ready;
1582 + }catch(error){}
1583 + }
1584 +
1585 + await waitImages();
1586 +
1587 + // Exactly one initial layout calculation.
1588 + calculate(true);
1872 1872   }
1873 1873  
1874 - window.addEventListener(
1591 + addEventListener(
1875 1875   "resize",
1876 - onResize,
1593 + resize,
1877 1877   {passive:true}
1878 1878   );
1879 1879  
1880 - waitForReady();
1597 + initial();
1881 1881  })();
1882 1882  </script>
1883 1883  
1884 -<!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_END -->
1885 -{{/html}}
1886 -
1601 +<!-- SN_HORIZONTAL_BOX_HARMONIZER_END -->
1602 +{{/html}}\n