Changes for page Get Started
Last modified by Veronika Kocher on Friday, 04 Sep 2026 15:32
From version 8.5
edited by Veronika Kocher
on Thursday, 03 Sep 2026 9:34
on Thursday, 03 Sep 2026 9:34
Change comment:
There is no comment for this version
To version 5.1
edited by Veronika Kocher
on Monday, 31 Aug 2026 14:02
on Monday, 31 Aug 2026 14:02
Change comment:
There is no comment for this version
Summary
-
Page properties (2 modified, 0 added, 0 removed)
Details
- Page properties
-
- Default language
-
... ... @@ -1,1 +1,0 @@ 1 -en - Content
-
... ... @@ -434,699 +434,3 @@ 434 434 435 435 </div> 436 436 {{/html}} 437 - 438 -{{html clean="false"}} 439 -<!-- SN_HORIZONTAL_BOX_HARMONIZER_START --> 440 -<style data-sn-horizontal-box-harmonizer="4"> 441 -[data-sn-equal-height-managed], 442 -[data-sn-first-section-aligned]{ 443 - box-sizing:border-box; 444 -} 445 -</style> 446 -<script data-sn-horizontal-box-harmonizer="4"> 447 -(function(){ 448 - "use strict"; 449 - 450 - var MOBILE_MAX=767; 451 - var ROW_TOLERANCE=6; 452 - var MIN_W=150; 453 - var MIN_H=36; 454 - var MAX_PARENT_CHILDREN=16; 455 - var SEARCH_DEPTH=5; 456 - 457 - var root= 458 - document.getElementById("xwikicontent")|| 459 - document.querySelector(".xwiki-rendering-content")|| 460 - document.querySelector("main")|| 461 - document.body; 462 - 463 - if(!root)return; 464 - 465 - var heightManaged=new Set(); 466 - var sectionManaged=new Set(); 467 - var originalMinHeight=new WeakMap(); 468 - var originalMarginTop=new WeakMap(); 469 - var raf=0; 470 - 471 - function num(v){ 472 - var n=parseFloat(v); 473 - return Number.isFinite(n)?n:0; 474 - } 475 - 476 - function visible(el,minW,minH){ 477 - if(!el||el.nodeType!==1)return false; 478 - 479 - var s=getComputedStyle(el); 480 - 481 - if( 482 - s.display==="none"|| 483 - s.visibility==="hidden"|| 484 - Number(s.opacity)===0 485 - ){ 486 - return false; 487 - } 488 - 489 - var r=el.getBoundingClientRect(); 490 - 491 - return ( 492 - r.width>=(minW||1)&& 493 - r.height>=(minH||1) 494 - ); 495 - } 496 - 497 - function excluded(el){ 498 - return ( 499 - !el.matches|| 500 - el.matches( 501 - "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]" 502 - ) 503 - ); 504 - } 505 - 506 - function namedLikeBox(el){ 507 - var c= 508 - typeof el.className==="string" 509 - ? el.className 510 - : ""; 511 - 512 - return /(^|[s_-])(box|card|tile|panel|role|check|service|source|call|area|detail|resource|topic|warn|info)([s_-]|$)/i.test(c); 513 - } 514 - 515 - function boxLike(el){ 516 - if(!visible(el,MIN_W,MIN_H)||excluded(el))return false; 517 - 518 - var s=getComputedStyle(el); 519 - var r=el.getBoundingClientRect(); 520 - 521 - var border= 522 - num(s.borderTopWidth)+ 523 - num(s.borderRightWidth)+ 524 - num(s.borderBottomWidth)+ 525 - num(s.borderLeftWidth); 526 - 527 - var radius=Math.max( 528 - num(s.borderTopLeftRadius), 529 - num(s.borderTopRightRadius), 530 - num(s.borderBottomLeftRadius), 531 - num(s.borderBottomRightRadius) 532 - ); 533 - 534 - var bg= 535 - s.backgroundColor&& 536 - s.backgroundColor!=="rgba(0, 0, 0, 0)"&& 537 - s.backgroundColor!=="transparent"; 538 - 539 - var shadow= 540 - s.boxShadow&& 541 - s.boxShadow!=="none"; 542 - 543 - return ( 544 - namedLikeBox(el)|| 545 - border>=1|| 546 - (bg&&radius>=3)|| 547 - (shadow&&r.width>=180) 548 - ); 549 - } 550 - 551 - function saveOriginal(el,map,property){ 552 - if(map.has(el))return; 553 - 554 - map.set(el,{ 555 - value:el.style.getPropertyValue(property), 556 - priority:el.style.getPropertyPriority(property) 557 - }); 558 - } 559 - 560 - function restoreOriginal(el,map,property){ 561 - var original=map.get(el); 562 - 563 - if(original&&original.value){ 564 - el.style.setProperty( 565 - property, 566 - original.value, 567 - original.priority||"" 568 - ); 569 - }else{ 570 - el.style.removeProperty(property); 571 - } 572 - } 573 - 574 - function reset(){ 575 - heightManaged.forEach(function(el){ 576 - restoreOriginal( 577 - el, 578 - originalMinHeight, 579 - "min-height" 580 - ); 581 - 582 - el.removeAttribute( 583 - "data-sn-equal-height-managed" 584 - ); 585 - }); 586 - 587 - sectionManaged.forEach(function(el){ 588 - restoreOriginal( 589 - el, 590 - originalMarginTop, 591 - "margin-top" 592 - ); 593 - 594 - el.removeAttribute( 595 - "data-sn-first-section-aligned" 596 - ); 597 - }); 598 - 599 - heightManaged.clear(); 600 - sectionManaged.clear(); 601 - } 602 - 603 - function pickTarget(child){ 604 - if(!visible(child,MIN_W,MIN_H))return null; 605 - 606 - if(boxLike(child)){ 607 - return child; 608 - } 609 - 610 - var cr=child.getBoundingClientRect(); 611 - var q=[]; 612 - 613 - Array.from(child.children||[]).forEach(function(el){ 614 - q.push({el:el,depth:1}); 615 - }); 616 - 617 - var best=null; 618 - var bestScore=-Infinity; 619 - 620 - while(q.length){ 621 - var item=q.shift(); 622 - var el=item.el; 623 - 624 - if(!visible(el,MIN_W,MIN_H))continue; 625 - 626 - var r=el.getBoundingClientRect(); 627 - 628 - if( 629 - r.width>=cr.width*.68&& 630 - boxLike(el) 631 - ){ 632 - var widthFit= 633 - 1-Math.min( 634 - 1, 635 - Math.abs(cr.width-r.width)/ 636 - Math.max(1,cr.width) 637 - ); 638 - 639 - var topFit= 640 - 1-Math.min( 641 - 1, 642 - Math.abs(cr.top-r.top)/100 643 - ); 644 - 645 - var score= 646 - widthFit*6+ 647 - topFit*3+ 648 - Math.min(r.height,900)/450+ 649 - Math.min(r.width*r.height,900000)/900000; 650 - 651 - if(score>bestScore){ 652 - best=el; 653 - bestScore=score; 654 - } 655 - } 656 - 657 - if(item.depth<SEARCH_DEPTH){ 658 - Array.from(el.children||[]).forEach(function(next){ 659 - q.push({ 660 - el:next, 661 - depth:item.depth+1 662 - }); 663 - }); 664 - } 665 - } 666 - 667 - return best; 668 - } 669 - 670 - function groupsByVisualRow(entries){ 671 - var groups=[]; 672 - 673 - entries 674 - .slice() 675 - .sort(function(a,b){ 676 - return ( 677 - a.rect.top-b.rect.top|| 678 - a.rect.left-b.rect.left 679 - ); 680 - }) 681 - .forEach(function(entry){ 682 - var group=null; 683 - 684 - for(var i=0;i<groups.length;i++){ 685 - if( 686 - Math.abs( 687 - groups[i].top- 688 - entry.rect.top 689 - )<=ROW_TOLERANCE 690 - ){ 691 - group=groups[i]; 692 - break; 693 - } 694 - } 695 - 696 - if(!group){ 697 - group={ 698 - top:entry.rect.top, 699 - entries:[] 700 - }; 701 - groups.push(group); 702 - } 703 - 704 - group.entries.push(entry); 705 - }); 706 - 707 - return groups; 708 - } 709 - 710 - function validHorizontalGroup(group){ 711 - if(group.entries.length<2)return false; 712 - 713 - var lefts= 714 - group.entries 715 - .map(function(e){return e.rect.left;}) 716 - .sort(function(a,b){return a-b;}); 717 - 718 - if( 719 - lefts[lefts.length-1]- 720 - lefts[0]< 721 - 80 722 - ){ 723 - return false; 724 - } 725 - 726 - var widths= 727 - group.entries 728 - .map(function(e){return e.rect.width;}) 729 - .filter(function(w){return w>0;}); 730 - 731 - if(widths.length<2)return false; 732 - 733 - var minWidth=Math.min.apply(Math,widths); 734 - var maxWidth=Math.max.apply(Math,widths); 735 - 736 - return ( 737 - maxWidth/ 738 - Math.max(1,minWidth)<= 739 - 1.9 740 - ); 741 - } 742 - 743 - function normalizeText(text){ 744 - return String(text||"") 745 - .replace(/s+/g," ") 746 - .trim() 747 - .toUpperCase(); 748 - } 749 - 750 - function exactKnownFirstSection(el){ 751 - var text=normalizeText(el.textContent); 752 - 753 - return ( 754 - text==="HIER STARTEN"|| 755 - text==="ORGANISIEREN & DOKUMENTIEREN"|| 756 - text==="ENTSCHEIDEN"|| 757 - text==="START HERE"|| 758 - text==="GET STARTED"|| 759 - text==="ORGANISE & DOCUMENT"|| 760 - text==="ORGANIZE & DOCUMENT"|| 761 - text==="DECIDE" 762 - ); 763 - } 764 - 765 - function visuallyFirstSectionBar(card){ 766 - var cardRect=card.getBoundingClientRect(); 767 - var candidates=[]; 768 - 769 - Array.from( 770 - card.querySelectorAll( 771 - "div,p,span,strong,h3,h4,h5,h6" 772 - ) 773 - ).forEach(function(el){ 774 - if(!visible(el,20,6))return; 775 - if(excluded(el))return; 776 - 777 - var r=el.getBoundingClientRect(); 778 - var relativeTop=r.top-cardRect.top; 779 - 780 - if( 781 - relativeTop<45|| 782 - relativeTop>cardRect.height*.72 783 - ){ 784 - return; 785 - } 786 - 787 - var widthRatio= 788 - r.width/ 789 - Math.max(1,cardRect.width); 790 - 791 - if( 792 - widthRatio<.55|| 793 - widthRatio>1.05|| 794 - r.height>54 795 - ){ 796 - return; 797 - } 798 - 799 - var text=normalizeText(el.textContent); 800 - 801 - if( 802 - text.length<2|| 803 - text.length>90 804 - ){ 805 - return; 806 - } 807 - 808 - var style=getComputedStyle(el); 809 - 810 - var bg= 811 - style.backgroundColor&& 812 - style.backgroundColor!=="rgba(0, 0, 0, 0)"&& 813 - style.backgroundColor!=="transparent"; 814 - 815 - var border= 816 - num(style.borderTopWidth)+ 817 - num(style.borderRightWidth)+ 818 - num(style.borderBottomWidth)+ 819 - num(style.borderLeftWidth); 820 - 821 - var mostlyUpper= 822 - text.length>=3&& 823 - text===text.toUpperCase(); 824 - 825 - var exact=exactKnownFirstSection(el); 826 - 827 - var score= 828 - (exact?20:0)+ 829 - (bg?6:0)+ 830 - (border>=1?2:0)+ 831 - (mostlyUpper?4:0)+ 832 - (num(style.fontWeight)>=600?1:0); 833 - 834 - if(score>=7){ 835 - candidates.push({ 836 - el:el, 837 - relativeTop:relativeTop, 838 - width:r.width, 839 - score:score 840 - }); 841 - } 842 - }); 843 - 844 - if(!candidates.length)return null; 845 - 846 - candidates.sort(function(a,b){ 847 - if(a.score!==b.score)return b.score-a.score; 848 - if(Math.abs(a.relativeTop-b.relativeTop)>3){ 849 - return a.relativeTop-b.relativeTop; 850 - } 851 - return b.width-a.width; 852 - }); 853 - 854 - // For exact known labels always prefer the earliest exact match. 855 - var exacts=candidates.filter(function(c){ 856 - return exactKnownFirstSection(c.el); 857 - }); 858 - 859 - if(exacts.length){ 860 - exacts.sort(function(a,b){ 861 - return a.relativeTop-b.relativeTop||b.width-a.width; 862 - }); 863 - return exacts[0].el; 864 - } 865 - 866 - // Generic fallback: earliest high-confidence bar. 867 - candidates.sort(function(a,b){ 868 - return a.relativeTop-b.relativeTop||b.score-a.score||b.width-a.width; 869 - }); 870 - 871 - return candidates[0].el; 872 - } 873 - 874 - function alignFirstSections(cards){ 875 - var rows= 876 - cards.map(function(card){ 877 - var bar= 878 - visuallyFirstSectionBar(card); 879 - 880 - if(!bar)return null; 881 - 882 - var cardRect= 883 - card.getBoundingClientRect(); 884 - 885 - var barRect= 886 - bar.getBoundingClientRect(); 887 - 888 - return { 889 - card:card, 890 - bar:bar, 891 - relativeTop: 892 - barRect.top-cardRect.top, 893 - label: 894 - normalizeText(bar.textContent) 895 - }; 896 - }); 897 - 898 - // Conservative: only align when every card in the horizontal row 899 - // has a reliable first section bar. 900 - if( 901 - rows.some(function(row){ 902 - return !row; 903 - }) 904 - ){ 905 - return null; 906 - } 907 - 908 - var targetTop= 909 - Math.max.apply( 910 - Math, 911 - rows.map(function(row){ 912 - return row.relativeTop; 913 - }) 914 - ); 915 - 916 - rows.forEach(function(row){ 917 - var delta= 918 - targetTop- 919 - row.relativeTop; 920 - 921 - if(delta<=1)return; 922 - 923 - saveOriginal( 924 - row.bar, 925 - originalMarginTop, 926 - "margin-top" 927 - ); 928 - 929 - var currentMargin= 930 - num( 931 - getComputedStyle( 932 - row.bar 933 - ).marginTop 934 - ); 935 - 936 - row.bar.style.setProperty( 937 - "margin-top", 938 - ( 939 - currentMargin+ 940 - delta 941 - )+"px" 942 - ); 943 - 944 - row.bar.setAttribute( 945 - "data-sn-first-section-aligned", 946 - "4" 947 - ); 948 - 949 - sectionManaged.add(row.bar); 950 - }); 951 - 952 - return { 953 - labels: 954 - rows.map(function(row){ 955 - return row.label; 956 - }), 957 - targetRelativeTop: 958 - Math.round(targetTop) 959 - }; 960 - } 961 - 962 - function applyGroup(group){ 963 - if(!validHorizontalGroup(group)){ 964 - return null; 965 - } 966 - 967 - var cards=[]; 968 - var seen=new Set(); 969 - 970 - group.entries.forEach(function(entry){ 971 - if(!seen.has(entry.target)){ 972 - seen.add(entry.target); 973 - cards.push(entry.target); 974 - } 975 - }); 976 - 977 - if(cards.length<2)return null; 978 - 979 - var firstSection= 980 - alignFirstSections(cards); 981 - 982 - // The section alignment can change natural card heights. 983 - // Measure only afterwards. 984 - var maxHeight=0; 985 - 986 - cards.forEach(function(card){ 987 - maxHeight=Math.max( 988 - maxHeight, 989 - card.getBoundingClientRect().height 990 - ); 991 - }); 992 - 993 - maxHeight=Math.ceil(maxHeight); 994 - 995 - if(maxHeight<MIN_H)return null; 996 - 997 - cards.forEach(function(card){ 998 - saveOriginal( 999 - card, 1000 - originalMinHeight, 1001 - "min-height" 1002 - ); 1003 - 1004 - card.style.setProperty( 1005 - "min-height", 1006 - maxHeight+"px" 1007 - ); 1008 - 1009 - card.setAttribute( 1010 - "data-sn-equal-height-managed", 1011 - "4" 1012 - ); 1013 - 1014 - heightManaged.add(card); 1015 - }); 1016 - 1017 - return { 1018 - cards:cards.length, 1019 - height:maxHeight, 1020 - firstSection:firstSection 1021 - }; 1022 - } 1023 - 1024 - function run(){ 1025 - reset(); 1026 - 1027 - if( 1028 - window.innerWidth<=MOBILE_MAX 1029 - ){ 1030 - return; 1031 - } 1032 - 1033 - var parents= 1034 - Array.from( 1035 - root.querySelectorAll("*") 1036 - ).filter(function(parent){ 1037 - return ( 1038 - visible(parent,MIN_W,MIN_H)&& 1039 - parent.children&& 1040 - parent.children.length>=2&& 1041 - parent.children.length<=MAX_PARENT_CHILDREN 1042 - ); 1043 - }); 1044 - 1045 - var touched=new Set(); 1046 - 1047 - parents.forEach(function(parent){ 1048 - var entries=[]; 1049 - 1050 - Array.from(parent.children).forEach(function(child){ 1051 - if(!visible(child,MIN_W,MIN_H))return; 1052 - 1053 - var target=pickTarget(child); 1054 - if(!target)return; 1055 - 1056 - entries.push({ 1057 - target:target, 1058 - rect:target.getBoundingClientRect() 1059 - }); 1060 - }); 1061 - 1062 - if(entries.length<2)return; 1063 - 1064 - groupsByVisualRow(entries).forEach(function(group){ 1065 - if(!validHorizontalGroup(group))return; 1066 - 1067 - var signature= 1068 - group.entries.map(function(entry){ 1069 - return entry.target; 1070 - }); 1071 - 1072 - if( 1073 - !signature.some(function(el){ 1074 - return !touched.has(el); 1075 - }) 1076 - ){ 1077 - return; 1078 - } 1079 - 1080 - var applied= 1081 - applyGroup(group); 1082 - 1083 - if(applied){ 1084 - signature.forEach(function(el){ 1085 - touched.add(el); 1086 - }); 1087 - } 1088 - }); 1089 - }); 1090 - } 1091 - 1092 - function schedule(){ 1093 - if(raf)cancelAnimationFrame(raf); 1094 - 1095 - raf=requestAnimationFrame(function(){ 1096 - raf=requestAnimationFrame(function(){ 1097 - raf=0; 1098 - run(); 1099 - }); 1100 - }); 1101 - } 1102 - 1103 - addEventListener("resize",schedule,{passive:true}); 1104 - addEventListener("load",schedule,{once:true}); 1105 - 1106 - root.addEventListener( 1107 - "click", 1108 - function(){ 1109 - setTimeout(schedule,0); 1110 - }, 1111 - true 1112 - ); 1113 - 1114 - Array.from(root.querySelectorAll("img")).forEach(function(img){ 1115 - if(!img.complete){ 1116 - img.addEventListener("load",schedule,{once:true}); 1117 - } 1118 - }); 1119 - 1120 - if(document.fonts&&document.fonts.ready){ 1121 - document.fonts.ready.then(schedule); 1122 - } 1123 - 1124 - schedule(); 1125 - setTimeout(schedule,200); 1126 - setTimeout(schedule,650); 1127 - setTimeout(schedule,1400); 1128 -})(); 1129 -</script> 1130 -<!-- SN_HORIZONTAL_BOX_HARMONIZER_END --> 1131 -{{/html}} 1132 -