Enable
Version 29.8 by Veronika Kocher on Thursday, 03 Sep 2026 9:34
.arsn-phase {
max-width: 1400px;
margin: 0 auto;
color: #322f2b;
}
.arsn-phase * {
box-sizing: border-box;
}
.arsn-eyebrow {
font-size: 12px;
font-weight: 700;
letter-spacing: .075em;
text-transform: uppercase;
}
.arsn-card {
border-radius: 11px;
box-shadow: 0 1px 3px rgba(0,0,0,.035);
}
.arsn-hero-image {
height: 138px;
overflow: hidden;
border-radius: 11px 11px 0 0;
background: #f1eee9;
}
.arsn-hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.arsn-progress {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 14px;
margin: 0 0 26px 0;
padding: 4px 0 0 0;
}
.arsn-progress:before {
content: "";
position: absolute;
top: 21px;
left: 9%;
right: 9%;
height: 2px;
background: #e9cfc2;
z-index: 0;
}
.arsn-step {
position: relative;
z-index: 1;
text-align: center;
}
.arsn-step-dot {
width: 14px;
height: 14px;
margin: 0 auto 7px auto;
border-radius: 50%;
border: 3px solid #fff;
box-shadow: 0 0 0 1px #d5cfc7;
background: #d8d2ca;
}
.arsn-step.active .arsn-step-dot {
background: #e94b13;
box-shadow: 0 0 0 1px #e94b13;
}
.arsn-step.done .arsn-step-dot {
background: #8c837a;
box-shadow: 0 0 0 1px #8c837a;
}
.arsn-step-label {
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
color: #746d65;
}
.arsn-step.active .arsn-step-label {
color: #7d4a37;
}
.arsn-step-desc {
margin-top: 3px;
font-size: 13px;
color: #6a655e;
}
.arsn-focus-grid {
display: grid;
grid-template-columns: repeat(3, minmax(230px,1fr));
gap: 12px;
}
.arsn-focus-group {
padding: 13px 14px;
background: rgba(255,255,255,.52);
border: 1px solid #cfe8ef;
border-radius: 8px;
}
.arsn-focus-group strong {
display: block;
margin-bottom: 6px;
color: #2f5661;
}
.arsn-focus-group ul {
margin: 0 0 0 17px;
padding: 0;
color: #365862;
}
.arsn-focus-group li {
margin: 4px 0;
}
.arsn-outcome-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px,1fr));
gap: 10px;
}
.arsn-outcome {
position: relative;
padding: 12px 13px 12px 36px;
background: #fcfbf8;
border: 1px solid #e3ded6;
border-radius: 8px;
color: #4f4a44;
}
.arsn-outcome:before {
content: "✓";
position: absolute;
left: 13px;
top: 10px;
color: #e94b13;
font-weight: 800;
}
.arsn-area-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(310px,1fr));
gap: 18px;
align-items: stretch;
}
.arsn-area {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid #e3ded6;
border-radius: 11px;
background: #fcfbf8;
box-shadow: 0 1px 3px rgba(0,0,0,.035);
}
.arsn-area-head {
padding: 18px 19px 12px 19px;
}
.arsn-area-body {
padding: 3px 19px 19px 19px;
}
.arsn-area-label {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 8px;
margin-bottom: 9px;
border-radius: 5px;
font-size: 12px;
font-weight: 700;
letter-spacing: .065em;
}
.arsn-area-number {
opacity: .72;
}
.arsn-area-action {
margin-left: 2px;
font-weight: 600;
opacity: .74;
letter-spacing: .02em;
text-transform: none;
}
.arsn-area h4 {
font-size: 19px;
line-height: 1.3;
margin: 0 0 7px 0;
color: #2f2b27;
}
.arsn-area p {
margin: 0;
line-height: 1.5;
color: #625d56;
}
.arsn-topic {
display: block;
margin: 6px 0;
padding: 10px 11px;
border: 1px solid #e9e4dc;
border-radius: 6px;
background: #fffdf9;
color: #252321;
text-decoration: none;
font-weight: 600;
transition: transform .08s ease, box-shadow .08s ease, background .08s ease;
}
.arsn-topic:hover,
.arsn-topic:focus {
background: #fff7f1;
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 2px 5px rgba(0,0,0,.06);
}
.arsn-resource-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px,1fr));
gap: 12px;
}
.arsn-related-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
gap: 8px;
}
.arsn-related-link {
display: block;
padding: 9px 10px;
border: 1px solid #e9e4dc;
border-left: 3px solid #e94b13;
border-radius: 6px;
background: #fffdf9;
color: #252321;
text-decoration: none;
font-weight: 600;
}
.arsn-related-link:hover,
.arsn-related-link:focus {
background: #fff7f1;
text-decoration: none;
}
.arsn-tip {
padding: 12px 15px;
border: 1px solid #c7e5ed;
border-left: 4px solid #21b6d7;
background: #eaf6f9;
border-radius: 7px;
color: #365e68;
font-size: 13px;
}
.arsn-tip strong {
color: #2d5661;
}
@media (max-width: 800px) {
.arsn-focus-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.arsn-progress:before {
display: none;
}
.arsn-progress {
grid-template-columns: 1fr;
gap: 8px;
}
.arsn-step {
text-align: left;
display: grid;
grid-template-columns: 24px 1fr;
column-gap: 8px;
align-items: center;
}
.arsn-step-dot {
margin: 0;
}
.arsn-step-desc {
grid-column: 2;
}
}
1 · ENABLE
Plan & set up
2 · WORK & MANAGE
Run & document
3 · PUBLISH & SHARE
Publish, preserve & hand over
RIGHT NOW
What should I be focusing on now?
You do not need every detail fixed before you start. You do need enough shared decisions to make the project workable, responsible and easy to continue.
Project
- What is the scope, and who is responsible for which decisions?
- Which funding opportunities and funder requirements apply?
- What data, materials and outputs will be created, collected or reused?
- Do I need a Data Management Plan?
Rights & responsibilities
- Which copyright, permissions or licences need to be clarified?
- Will personal, sensitive, confidential or ethically complex materials be involved?
- Which decisions should be documented from the beginning?
- Who will be responsible for shared accounts, access and handover?
Working setup
- How should files and folders be organised and named?
- Where will materials be stored and backed up?
- Who should have access?
- Which infrastructure, services and tools are appropriate?
BY THE END OF THIS PHASE
You should have a workable project setup
a clear project scope and named responsibilities
a basic plan for data, materials and expected outputs
key rights, ethics and protection issues identified
agreed storage, backup, access and collaboration arrangements
EXPLORE THIS PHASE
Four areas to get your project ready
Start with the area that matches what you need to decide or set up now.
01 START HERE · Orient
Orient yourself and choose the right level of setup
Use these pages if you are just starting out, unsure which topics apply, or need a practical minimum setup for a smaller project.
02 PLAN & ORGANISE · Decide
Define what the project needs and how it will be organised
Clarify scope, responsibilities, funding conditions, expected materials and outputs, and the basic data-management approach before active work begins.
03 PROTECT & CLARIFY · Check
Clarify rights, permissions, protection needs and responsibilities
Identify legal, ethical or data-protection issues early enough to obtain permissions, make agreements and avoid unnecessary restrictions later.
04 SET UP INFRASTRUCTURE & COLLABORATION · Prepare
Create a working environment the project can actually use
Decide where project materials live, how they are backed up and protected, which tools are appropriate and how access and collaboration will work.
NEXT PHASE
Continue in Work & Manage
The setup decisions made here should guide the project, but they are not fixed forever. During active project work, organise, document, secure and review how the project is actually working.
Continue to Work & ManageUSEFUL MATERIALS
Practical resources
Info Sheets
COMING SOON
COMING SOON
Short reference guides for common questions and decisions.
Tutorials
COMING SOON
COMING SOON
Step-by-step instructions for specific tasks and workflows.
Checklists & Templates
COMING SOON
COMING SOON
Reusable aids for planning, documenting and reviewing your project setup.
Tip · A useful rule of thumb: Plan early, document decisions, and review them as the project changes. A simple setup that is actually used is usually more effective than a complex plan that is never updated.
[data-sn-equal-height-managed],
[data-sn-first-section-aligned]{
box-sizing:border-box;
}
(function(){
"use strict";
var MOBILE_MAX=767;
var ROW_TOLERANCE=6;
var MIN_W=150;
var MIN_H=36;
var MAX_PARENT_CHILDREN=16;
var SEARCH_DEPTH=5;
var root=
document.getElementById("xwikicontent")||
document.querySelector(".xwiki-rendering-content")||
document.querySelector("main")||
document.body;
if(!root)return;
var heightManaged=new Set();
var sectionManaged=new Set();
var originalMinHeight=new WeakMap();
var originalMarginTop=new WeakMap();
var raf=0;
function num(v){
var n=parseFloat(v);
return Number.isFinite(n)?n:0;
}
function visible(el,minW,minH){
if(!el||el.nodeType!==1)return false;
var s=getComputedStyle(el);
if(
s.display==="none"||
s.visibility==="hidden"||
Number(s.opacity)===0
){
return false;
}
var r=el.getBoundingClientRect();
return (
r.width>=(minW||1)&&
r.height>=(minH||1)
);
}
function excluded(el){
return (
!el.matches||
el.matches(
"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]"
)
);
}
function namedLikeBox(el){
var c=
typeof el.className==="string"
? el.className
: "";
return /(^|[s_-])(box|card|tile|panel|role|check|service|source|call|area|detail|resource|topic|warn|info)([s_-]|$)/i.test(c);
}
function boxLike(el){
if(!visible(el,MIN_W,MIN_H)||excluded(el))return false;
var s=getComputedStyle(el);
var r=el.getBoundingClientRect();
var border=
num(s.borderTopWidth)+
num(s.borderRightWidth)+
num(s.borderBottomWidth)+
num(s.borderLeftWidth);
var radius=Math.max(
num(s.borderTopLeftRadius),
num(s.borderTopRightRadius),
num(s.borderBottomLeftRadius),
num(s.borderBottomRightRadius)
);
var bg=
s.backgroundColor&&
s.backgroundColor!=="rgba(0, 0, 0, 0)"&&
s.backgroundColor!=="transparent";
var shadow=
s.boxShadow&&
s.boxShadow!=="none";
return (
namedLikeBox(el)||
border>=1||
(bg&&radius>=3)||
(shadow&&r.width>=180)
);
}
function saveOriginal(el,map,property){
if(map.has(el))return;
map.set(el,{
value:el.style.getPropertyValue(property),
priority:el.style.getPropertyPriority(property)
});
}
function restoreOriginal(el,map,property){
var original=map.get(el);
if(original&&original.value){
el.style.setProperty(
property,
original.value,
original.priority||""
);
}else{
el.style.removeProperty(property);
}
}
function reset(){
heightManaged.forEach(function(el){
restoreOriginal(
el,
originalMinHeight,
"min-height"
);
el.removeAttribute(
"data-sn-equal-height-managed"
);
});
sectionManaged.forEach(function(el){
restoreOriginal(
el,
originalMarginTop,
"margin-top"
);
el.removeAttribute(
"data-sn-first-section-aligned"
);
});
heightManaged.clear();
sectionManaged.clear();
}
function pickTarget(child){
if(!visible(child,MIN_W,MIN_H))return null;
if(boxLike(child)){
return child;
}
var cr=child.getBoundingClientRect();
var q=[];
Array.from(child.children||[]).forEach(function(el){
q.push({el:el,depth:1});
});
var best=null;
var bestScore=-Infinity;
while(q.length){
var item=q.shift();
var el=item.el;
if(!visible(el,MIN_W,MIN_H))continue;
var r=el.getBoundingClientRect();
if(
r.width>=cr.width*.68&&
boxLike(el)
){
var widthFit=
1-Math.min(
1,
Math.abs(cr.width-r.width)/
Math.max(1,cr.width)
);
var topFit=
1-Math.min(
1,
Math.abs(cr.top-r.top)/100
);
var score=
widthFit*6+
topFit*3+
Math.min(r.height,900)/450+
Math.min(r.width*r.height,900000)/900000;
if(score>bestScore){
best=el;
bestScore=score;
}
}
if(item.depth0;});
if(widths.length<2)return false;
var minWidth=Math.min.apply(Math,widths);
var maxWidth=Math.max.apply(Math,widths);
return (
maxWidth/
Math.max(1,minWidth)<=
1.9
);
}
function normalizeText(text){
return String(text||"")
.replace(/s+/g," ")
.trim()
.toUpperCase();
}
function exactKnownFirstSection(el){
var text=normalizeText(el.textContent);
return (
text==="HIER STARTEN"||
text==="ORGANISIEREN & DOKUMENTIEREN"||
text==="ENTSCHEIDEN"||
text==="START HERE"||
text==="GET STARTED"||
text==="ORGANISE & DOCUMENT"||
text==="ORGANIZE & DOCUMENT"||
text==="DECIDE"
);
}
function visuallyFirstSectionBar(card){
var cardRect=card.getBoundingClientRect();
var candidates=[];
Array.from(
card.querySelectorAll(
"div,p,span,strong,h3,h4,h5,h6"
)
).forEach(function(el){
if(!visible(el,20,6))return;
if(excluded(el))return;
var r=el.getBoundingClientRect();
var relativeTop=r.top-cardRect.top;
if(
relativeTop<45||
relativeTop>cardRect.height*.72
){
return;
}
var widthRatio=
r.width/
Math.max(1,cardRect.width);
if(
widthRatio<.55||
widthRatio>1.05||
r.height>54
){
return;
}
var text=normalizeText(el.textContent);
if(
text.length<2||
text.length>90
){
return;
}
var style=getComputedStyle(el);
var bg=
style.backgroundColor&&
style.backgroundColor!=="rgba(0, 0, 0, 0)"&&
style.backgroundColor!=="transparent";
var border=
num(style.borderTopWidth)+
num(style.borderRightWidth)+
num(style.borderBottomWidth)+
num(style.borderLeftWidth);
var mostlyUpper=
text.length>=3&&
text===text.toUpperCase();
var exact=exactKnownFirstSection(el);
var score=
(exact?20:0)+
(bg?6:0)+
(border>=1?2:0)+
(mostlyUpper?4:0)+
(num(style.fontWeight)>=600?1:0);
if(score>=7){
candidates.push({
el:el,
relativeTop:relativeTop,
width:r.width,
score:score
});
}
});
if(!candidates.length)return null;
candidates.sort(function(a,b){
if(a.score!==b.score)return b.score-a.score;
if(Math.abs(a.relativeTop-b.relativeTop)>3){
return a.relativeTop-b.relativeTop;
}
return b.width-a.width;
});
// For exact known labels always prefer the earliest exact match.
var exacts=candidates.filter(function(c){
return exactKnownFirstSection(c.el);
});
if(exacts.length){
exacts.sort(function(a,b){
return a.relativeTop-b.relativeTop||b.width-a.width;
});
return exacts[0].el;
}
// Generic fallback: earliest high-confidence bar.
candidates.sort(function(a,b){
return a.relativeTop-b.relativeTop||b.score-a.score||b.width-a.width;
});
return candidates[0].el;
}
function alignFirstSections(cards){
var rows=
cards.map(function(card){
var bar=
visuallyFirstSectionBar(card);
if(!bar)return null;
var cardRect=
card.getBoundingClientRect();
var barRect=
bar.getBoundingClientRect();
return {
card:card,
bar:bar,
relativeTop:
barRect.top-cardRect.top,
label:
normalizeText(bar.textContent)
};
});
// Conservative: only align when every card in the horizontal row
// has a reliable first section bar.
if(
rows.some(function(row){
return !row;
})
){
return null;
}
var targetTop=
Math.max.apply(
Math,
rows.map(function(row){
return row.relativeTop;
})
);
rows.forEach(function(row){
var delta=
targetTop-
row.relativeTop;
if(delta<=1)return;
saveOriginal(
row.bar,
originalMarginTop,
"margin-top"
);
var currentMargin=
num(
getComputedStyle(
row.bar
).marginTop
);
row.bar.style.setProperty(
"margin-top",
(
currentMargin+
delta
)+"px"
);
row.bar.setAttribute(
"data-sn-first-section-aligned",
"4"
);
sectionManaged.add(row.bar);
});
return {
labels:
rows.map(function(row){
return row.label;
}),
targetRelativeTop:
Math.round(targetTop)
};
}
function applyGroup(group){
if(!validHorizontalGroup(group)){
return null;
}
var cards=[];
var seen=new Set();
group.entries.forEach(function(entry){
if(!seen.has(entry.target)){
seen.add(entry.target);
cards.push(entry.target);
}
});
if(cards.length<2)return null;
var firstSection=
alignFirstSections(cards);
// The section alignment can change natural card heights.
// Measure only afterwards.
var maxHeight=0;
cards.forEach(function(card){
maxHeight=Math.max(
maxHeight,
card.getBoundingClientRect().height
);
});
maxHeight=Math.ceil(maxHeight);
if(maxHeight=2&&
parent.children.length<=MAX_PARENT_CHILDREN
);
});
var touched=new Set();
parents.forEach(function(parent){
var entries=[];
Array.from(parent.children).forEach(function(child){
if(!visible(child,MIN_W,MIN_H))return;
var target=pickTarget(child);
if(!target)return;
entries.push({
target:target,
rect:target.getBoundingClientRect()
});
});
if(entries.length<2)return;
groupsByVisualRow(entries).forEach(function(group){
if(!validHorizontalGroup(group))return;
var signature=
group.entries.map(function(entry){
return entry.target;
});
if(
!signature.some(function(el){
return !touched.has(el);
})
){
return;
}
var applied=
applyGroup(group);
if(applied){
signature.forEach(function(el){
touched.add(el);
});
}
});
});
}
function schedule(){
if(raf)cancelAnimationFrame(raf);
raf=requestAnimationFrame(function(){
raf=requestAnimationFrame(function(){
raf=0;
run();
});
});
}
addEventListener("resize",schedule,{passive:true});
addEventListener("load",schedule,{once:true});
root.addEventListener(
"click",
function(){
setTimeout(schedule,0);
},
true
);
Array.from(root.querySelectorAll("img")).forEach(function(img){
if(!img.complete){
img.addEventListener("load",schedule,{once:true});
}
});
if(document.fonts&&document.fonts.ready){
document.fonts.ready.then(schedule);
}
schedule();
setTimeout(schedule,200);
setTimeout(schedule,650);
setTimeout(schedule,1400);
})();