Skip to Content

Wiki source code of Enable

Version 29.8 by Veronika Kocher on Thursday, 03 Sep 2026 9:34
Show last authors
1 {{html clean="false"}}
2
3 <style>
4 .arsn-phase {
5 max-width: 1400px;
6 margin: 0 auto;
7 color: #322f2b;
8 }
9
10 .arsn-phase * {
11 box-sizing: border-box;
12 }
13
14 .arsn-eyebrow {
15 font-size: 12px;
16 font-weight: 700;
17 letter-spacing: .075em;
18 text-transform: uppercase;
19 }
20
21 .arsn-card {
22 border-radius: 11px;
23 box-shadow: 0 1px 3px rgba(0,0,0,.035);
24 }
25
26 .arsn-hero-image {
27 height: 138px;
28 overflow: hidden;
29 border-radius: 11px 11px 0 0;
30 background: #f1eee9;
31 }
32
33 .arsn-hero-image img {
34 width: 100%;
35 height: 100%;
36 object-fit: cover;
37 display: block;
38 }
39
40 .arsn-progress {
41 position: relative;
42 display: grid;
43 grid-template-columns: repeat(3, minmax(0,1fr));
44 gap: 14px;
45 margin: 0 0 26px 0;
46 padding: 4px 0 0 0;
47 }
48
49 .arsn-progress:before {
50 content: "";
51 position: absolute;
52 top: 21px;
53 left: 9%;
54 right: 9%;
55 height: 2px;
56 background: #e9cfc2;
57 z-index: 0;
58 }
59
60 .arsn-step {
61 position: relative;
62 z-index: 1;
63 text-align: center;
64 }
65
66 .arsn-step-dot {
67 width: 14px;
68 height: 14px;
69 margin: 0 auto 7px auto;
70 border-radius: 50%;
71 border: 3px solid #fff;
72 box-shadow: 0 0 0 1px #d5cfc7;
73 background: #d8d2ca;
74 }
75
76 .arsn-step.active .arsn-step-dot {
77 background: #e94b13;
78 box-shadow: 0 0 0 1px #e94b13;
79 }
80
81 .arsn-step.done .arsn-step-dot {
82 background: #8c837a;
83 box-shadow: 0 0 0 1px #8c837a;
84 }
85
86 .arsn-step-label {
87 font-size: 11px;
88 font-weight: 700;
89 letter-spacing: .06em;
90 color: #746d65;
91 }
92
93 .arsn-step.active .arsn-step-label {
94 color: #7d4a37;
95 }
96
97 .arsn-step-desc {
98 margin-top: 3px;
99 font-size: 13px;
100 color: #6a655e;
101 }
102
103 .arsn-focus-grid {
104 display: grid;
105 grid-template-columns: repeat(3, minmax(230px,1fr));
106 gap: 12px;
107 }
108
109 .arsn-focus-group {
110 padding: 13px 14px;
111 background: rgba(255,255,255,.52);
112 border: 1px solid #cfe8ef;
113 border-radius: 8px;
114 }
115
116 .arsn-focus-group strong {
117 display: block;
118 margin-bottom: 6px;
119 color: #2f5661;
120 }
121
122 .arsn-focus-group ul {
123 margin: 0 0 0 17px;
124 padding: 0;
125 color: #365862;
126 }
127
128 .arsn-focus-group li {
129 margin: 4px 0;
130 }
131
132 .arsn-outcome-grid {
133 display: grid;
134 grid-template-columns: repeat(auto-fit, minmax(230px,1fr));
135 gap: 10px;
136 }
137
138 .arsn-outcome {
139 position: relative;
140 padding: 12px 13px 12px 36px;
141 background: #fcfbf8;
142 border: 1px solid #e3ded6;
143 border-radius: 8px;
144 color: #4f4a44;
145 }
146
147 .arsn-outcome:before {
148 content: "✓";
149 position: absolute;
150 left: 13px;
151 top: 10px;
152 color: #e94b13;
153 font-weight: 800;
154 }
155
156 .arsn-area-grid {
157 display: grid;
158 grid-template-columns: repeat(auto-fit, minmax(310px,1fr));
159 gap: 18px;
160 align-items: stretch;
161 }
162
163 .arsn-area {
164 display: flex;
165 flex-direction: column;
166 overflow: hidden;
167 border: 1px solid #e3ded6;
168 border-radius: 11px;
169 background: #fcfbf8;
170 box-shadow: 0 1px 3px rgba(0,0,0,.035);
171 }
172
173 .arsn-area-head {
174 padding: 18px 19px 12px 19px;
175 }
176
177 .arsn-area-body {
178 padding: 3px 19px 19px 19px;
179 }
180
181 .arsn-area-label {
182 display: inline-flex;
183 align-items: center;
184 gap: 7px;
185 padding: 5px 8px;
186 margin-bottom: 9px;
187 border-radius: 5px;
188 font-size: 12px;
189 font-weight: 700;
190 letter-spacing: .065em;
191 }
192
193 .arsn-area-number {
194 opacity: .72;
195 }
196
197 .arsn-area-action {
198 margin-left: 2px;
199 font-weight: 600;
200 opacity: .74;
201 letter-spacing: .02em;
202 text-transform: none;
203 }
204
205 .arsn-area h4 {
206 font-size: 19px;
207 line-height: 1.3;
208 margin: 0 0 7px 0;
209 color: #2f2b27;
210 }
211
212 .arsn-area p {
213 margin: 0;
214 line-height: 1.5;
215 color: #625d56;
216 }
217
218 .arsn-topic {
219 display: block;
220 margin: 6px 0;
221 padding: 10px 11px;
222 border: 1px solid #e9e4dc;
223 border-radius: 6px;
224 background: #fffdf9;
225 color: #252321;
226 text-decoration: none;
227 font-weight: 600;
228 transition: transform .08s ease, box-shadow .08s ease, background .08s ease;
229 }
230
231 .arsn-topic:hover,
232 .arsn-topic:focus {
233 background: #fff7f1;
234 text-decoration: none;
235 transform: translateY(-1px);
236 box-shadow: 0 2px 5px rgba(0,0,0,.06);
237 }
238
239 .arsn-resource-grid {
240 display: grid;
241 grid-template-columns: repeat(auto-fit, minmax(230px,1fr));
242 gap: 12px;
243 }
244
245 .arsn-related-grid {
246 display: grid;
247 grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
248 gap: 8px;
249 }
250
251 .arsn-related-link {
252 display: block;
253 padding: 9px 10px;
254 border: 1px solid #e9e4dc;
255 border-left: 3px solid #e94b13;
256 border-radius: 6px;
257 background: #fffdf9;
258 color: #252321;
259 text-decoration: none;
260 font-weight: 600;
261 }
262
263 .arsn-related-link:hover,
264 .arsn-related-link:focus {
265 background: #fff7f1;
266 text-decoration: none;
267 }
268
269 .arsn-tip {
270 padding: 12px 15px;
271 border: 1px solid #c7e5ed;
272 border-left: 4px solid #21b6d7;
273 background: #eaf6f9;
274 border-radius: 7px;
275 color: #365e68;
276 font-size: 13px;
277 }
278
279 .arsn-tip strong {
280 color: #2d5661;
281 }
282
283 @media (max-width: 800px) {
284 .arsn-focus-grid {
285 grid-template-columns: 1fr;
286 }
287 }
288
289 @media (max-width: 700px) {
290 .arsn-progress:before {
291 display: none;
292 }
293 .arsn-progress {
294 grid-template-columns: 1fr;
295 gap: 8px;
296 }
297 .arsn-step {
298 text-align: left;
299 display: grid;
300 grid-template-columns: 24px 1fr;
301 column-gap: 8px;
302 align-items: center;
303 }
304 .arsn-step-dot {
305 margin: 0;
306 }
307 .arsn-step-desc {
308 grid-column: 2;
309 }
310 }
311 </style>
312
313 <div class="arsn-phase">
314
315 <section class="arsn-card" style="margin:0 0 18px 0;border:1px solid #e3ded6;border-left:6px solid #e94b13;background:#fcfbf8;overflow:hidden;">
316 <div class="arsn-hero-image">
317 <img src="https://xwiki.uni-ak.ac.at/bin/download/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/WebHome/enable.png" alt="Enable — planning and setting up an artistic or research project" />
318 </div>
319 <div style="padding:18px 22px 21px 22px;">
320 <div class="arsn-eyebrow" style="color:#8a4d36;margin-bottom:6px;">PROJECT PHASE 1 · ENABLE</div>
321 <h2 style="font-size:28px;line-height:1.18;margin:0 0 9px 0;color:#2c2926;">I develop my project idea — I plan, fund &amp; set up my project</h2>
322 <p style="font-size:15px;line-height:1.58;color:#5e5953;max-width:1080px;margin:0;">
323 Before active project work begins, clarify how the project will be organised, funded and supported,
324 what materials and research outputs are expected, and how rights, responsibilities, infrastructure
325 and data management will be handled from the start.
326 </p>
327 </div>
328 </section>
329
330 <div class="arsn-progress">
331
332 <div class="arsn-step active">
333 <div class="arsn-step-dot"></div>
334 <div class="arsn-step-label">1 · ENABLE</div>
335 <div class="arsn-step-desc">Plan & set up</div>
336 </div>
337
338 <div class="arsn-step">
339 <div class="arsn-step-dot"></div>
340 <div class="arsn-step-label">2 · WORK & MANAGE</div>
341 <div class="arsn-step-desc">Run & document</div>
342 </div>
343
344 <div class="arsn-step">
345 <div class="arsn-step-dot"></div>
346 <div class="arsn-step-label">3 · PUBLISH & SHARE</div>
347 <div class="arsn-step-desc">Publish, preserve & hand over</div>
348 </div>
349 </div>
350
351 <section class="arsn-card" style="margin:0 0 22px 0;padding:19px 21px;background:#eaf6f9;border:1px solid #cfe8ef;border-left:5px solid #21b6d7;">
352 <div class="arsn-eyebrow" style="color:#3f6871;margin-bottom:5px;">RIGHT NOW</div>
353 <h3 style="font-size:22px;margin:0 0 8px 0;color:#2f4e56;">What should I be focusing on now?</h3>
354 <p style="margin:0 0 15px 0;color:#49636a;">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.</p>
355
356 <div class="arsn-focus-grid">
357 <div class="arsn-focus-group">
358 <strong>Project</strong>
359 <ul>
360 <li>What is the scope, and who is responsible for which decisions?</li>
361 <li>Which funding opportunities and funder requirements apply?</li>
362 <li>What data, materials and outputs will be created, collected or reused?</li>
363 <li>Do I need a Data Management Plan?</li>
364 </ul>
365 </div>
366
367 <div class="arsn-focus-group">
368 <strong>Rights & responsibilities</strong>
369 <ul>
370 <li>Which copyright, permissions or licences need to be clarified?</li>
371 <li>Will personal, sensitive, confidential or ethically complex materials be involved?</li>
372 <li>Which decisions should be documented from the beginning?</li>
373 <li>Who will be responsible for shared accounts, access and handover?</li>
374 </ul>
375 </div>
376
377 <div class="arsn-focus-group">
378 <strong>Working setup</strong>
379 <ul>
380 <li>How should files and folders be organised and named?</li>
381 <li>Where will materials be stored and backed up?</li>
382 <li>Who should have access?</li>
383 <li>Which infrastructure, services and tools are appropriate?</li>
384 </ul>
385 </div>
386 </div>
387 </section>
388
389 <section style="margin:0 0 28px 0;">
390 <div class="arsn-eyebrow" style="color:#8a4d36;margin-bottom:5px;">BY THE END OF THIS PHASE</div>
391 <h3 style="font-size:21px;margin:0 0 10px 0;color:#35312d;">You should have a workable project setup</h3>
392 <div class="arsn-outcome-grid">
393 <div class="arsn-outcome">a clear project scope and named responsibilities</div>
394 <div class="arsn-outcome">a basic plan for data, materials and expected outputs</div>
395 <div class="arsn-outcome">key rights, ethics and protection issues identified</div>
396 <div class="arsn-outcome">agreed storage, backup, access and collaboration arrangements</div>
397 </div>
398 </section>
399
400 <div style="margin:0 0 15px 0;">
401 <div class="arsn-eyebrow" style="color:#8a4d36;margin-bottom:4px;">EXPLORE THIS PHASE</div>
402 <h3 style="font-size:24px;margin:0 0 5px 0;color:#35312d;">Four areas to get your project ready</h3>
403 <p style="margin:0;color:#6a655e;">Start with the area that matches what you need to decide or set up now.</p>
404 </div>
405
406 <div class="arsn-area-grid" style="margin-bottom:30px;">
407 <section class="arsn-area" style="border-top:4px solid #21b6d7;">
408 <div class="arsn-area-head">
409 <div class="arsn-area-label" style="background:#eaf6f9;color:#355f69;"><span class="arsn-area-number">01</span> START HERE <span class="arsn-area-action">· Orient</span></div>
410 <h4>Orient yourself and choose the right level of setup</h4>
411 <p>Use these pages if you are just starting out, unsure which topics apply, or need a practical minimum setup for a smaller project.</p>
412 </div>
413 <div class="arsn-area-body">
414 <a class="arsn-topic" href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/Get%20Started/" style="border-left:3px solid #21b6d7;">Get Started</a>
415 <a class="arsn-topic" href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/Quick%20Start%20for%20Small%20Projects/" style="border-left:3px solid #21b6d7;">Quick Start for Small Projects</a>
416 </div>
417 </section>
418
419 <section class="arsn-area" style="border-top:4px solid #e94b13;">
420 <div class="arsn-area-head">
421 <div class="arsn-area-label" style="background:#f7e6dd;color:#7b4430;"><span class="arsn-area-number">02</span> PLAN &amp; ORGANISE <span class="arsn-area-action">· Decide</span></div>
422 <h4>Define what the project needs and how it will be organised</h4>
423 <p>Clarify scope, responsibilities, funding conditions, expected materials and outputs, and the basic data-management approach before active work begins.</p>
424 </div>
425 <div class="arsn-area-body">
426 <a class="arsn-topic" href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/Project%20Planning%20%26%20Organisation/" style="border-left:3px solid #e94b13;">Project Planning &amp; Organisation</a>
427 <a class="arsn-topic" href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/Funding%20%26%20Funder%20Requirements/" style="border-left:3px solid #e94b13;">Funding &amp; Funder Requirements</a>
428 <a class="arsn-topic" href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/Identify%20Your%20Data%20%26%20Research%20Outputs/" style="border-left:3px solid #e94b13;">Identify Your Data &amp; Research Outputs</a>
429 <a class="arsn-topic" href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/Plan%20Your%20Data%20Management/" style="border-left:3px solid #e94b13;">Plan Your Data Management</a>
430 <a class="arsn-topic" href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/File%20Organisation%20%26%20Naming/" style="border-left:3px solid #e94b13;">File Organisation &amp; Naming</a>
431 </div>
432 </section>
433
434 <section class="arsn-area" style="border-top:4px solid #f0aa00;">
435 <div class="arsn-area-head">
436 <div class="arsn-area-label" style="background:#fff3d5;color:#7a5b12;"><span class="arsn-area-number">03</span> PROTECT &amp; CLARIFY <span class="arsn-area-action">· Check</span></div>
437 <h4>Clarify rights, permissions, protection needs and responsibilities</h4>
438 <p>Identify legal, ethical or data-protection issues early enough to obtain permissions, make agreements and avoid unnecessary restrictions later.</p>
439 </div>
440 <div class="arsn-area-body">
441 <a class="arsn-topic" href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/Copyright%2C%20Rights%20%26%20Licences/" style="border-left:3px solid #f0aa00;">Copyright, Rights &amp; Licences</a>
442 <a class="arsn-topic" href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/Data%20Protection%20%26%20Ethics/" style="border-left:3px solid #f0aa00;">Data Protection &amp; Ethics</a>
443 </div>
444 </section>
445
446 <section class="arsn-area" style="border-top:4px solid #38b76a;">
447 <div class="arsn-area-head">
448 <div class="arsn-area-label" style="background:#e6f3e9;color:#3f6d4b;"><span class="arsn-area-number">04</span> SET UP INFRASTRUCTURE &amp; COLLABORATION <span class="arsn-area-action">· Prepare</span></div>
449 <h4>Create a working environment the project can actually use</h4>
450 <p>Decide where project materials live, how they are backed up and protected, which tools are appropriate and how access and collaboration will work.</p>
451 </div>
452 <div class="arsn-area-body">
453 <a class="arsn-topic" href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/Storage%2C%20Backup%20%26%20Security/" style="border-left:3px solid #38b76a;">Storage, Backup &amp; Security</a>
454 <a class="arsn-topic" href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/Infrastructure%2C%20Services%20%26%20Tools/" style="border-left:3px solid #38b76a;">Infrastructure, Services &amp; Tools</a>
455 <a class="arsn-topic" href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/Collaboration%20Setup/" style="border-left:3px solid #38b76a;">Collaboration Setup</a>
456 </div>
457 </section>
458 </div>
459
460 <section class="arsn-card" style="margin:0 0 27px 0;padding:18px 20px;background:#fcfbf8;border:1px solid #e3ded6;border-left:5px solid #e94b13;">
461 <div class="arsn-eyebrow" style="color:#8a4d36;margin-bottom:5px;">NEXT PHASE</div>
462 <h3 style="font-size:21px;margin:0 0 7px 0;color:#43332d;">Continue in Work &amp; Manage</h3>
463 <p style="margin:0 0 13px 0;color:#68564e;line-height:1.5;">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.</p>
464 <a href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Work%20%26%20Manage/" class="btn btn-default" style="background:#fff7f1;border-color:#e4cabc;color:#493a34;">Continue to Work &amp; Manage</a>
465 </section>
466
467 <div style="margin:0 0 13px 0;">
468 <div class="arsn-eyebrow" style="color:#8a4d36;margin-bottom:4px;">USEFUL MATERIALS</div>
469 <h3 style="font-size:22px;margin:0 0 4px 0;color:#35312d;">Practical resources</h3>
470 </div>
471
472 <div class="arsn-resource-grid" style="margin-bottom:27px;">
473 <div style="padding:15px 16px;background:#fcfbf8;border:1px solid #e3ded6;border-top:3px solid #21b6d7;border-radius:9px;"><strong style="color:#3a5d66;">Info Sheets</strong><br><span data-arsn-coming-soon="true" style="display:inline-block;margin:6px 0 8px 0;padding:4px 9px;border-radius:14px;background:#fff4ee;border:1px solid #efd9cc;color:#8a4d36;font-size:11px;font-weight:700;letter-spacing:.065em;line-height:1.2;">COMING SOON</span><div style="margin-top:5px;color:#625d56;">Short reference guides for common questions and decisions.</div></div>
474 <div style="padding:15px 16px;background:#fcfbf8;border:1px solid #e3ded6;border-top:3px solid #e94b13;border-radius:9px;"><strong style="color:#503a31;">Tutorials</strong><br><span data-arsn-coming-soon="true" style="display:inline-block;margin:6px 0 8px 0;padding:4px 9px;border-radius:14px;background:#fff4ee;border:1px solid #efd9cc;color:#8a4d36;font-size:11px;font-weight:700;letter-spacing:.065em;line-height:1.2;">COMING SOON</span><div style="margin-top:5px;color:#625d56;">Step-by-step instructions for specific tasks and workflows.</div></div>
475 <div style="padding:15px 16px;background:#fcfbf8;border:1px solid #e3ded6;border-top:3px solid #38b76a;border-radius:9px;"><strong style="color:#3f6b4b;">Checklists &amp; Templates</strong><br><span data-arsn-coming-soon="true" style="display:inline-block;margin:6px 0 8px 0;padding:4px 9px;border-radius:14px;background:#fff4ee;border:1px solid #efd9cc;color:#8a4d36;font-size:11px;font-weight:700;letter-spacing:.065em;line-height:1.2;">COMING SOON</span><div style="margin-top:5px;color:#625d56;">Reusable aids for planning, documenting and reviewing your project setup.</div></div>
476 </div>
477
478 <aside style="margin:0 0 14px 0;padding:16px 18px;border:1px solid #c7e5ed;border-left:5px solid #21b6d7;background:#e5f5f9;border-radius:8px;"><!-- ARSN_PHASE_ROUTING_V1 -->
479 <strong style="color:#2d5661;">Need help finding the right route?</strong>
480 <div style="margin-top:5px;color:#365e68;line-height:1.5;"><strong>Start with Support Kunst und Forschung</strong> for project development, funding, proposals and coordination of funded art/research projects. For rights, data, IT, finance, HR, rooms or other specialist questions, follow the responsible service named on the topic page.</div>
481 </aside>
482
483 <div class="arsn-tip"><strong>Tip · A useful rule of thumb:</strong> 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.</div>
484
485 </div>
486 {{/html}}
487
488 {{html clean="false"}}
489 <!-- SN_HORIZONTAL_BOX_HARMONIZER_START -->
490 <style data-sn-horizontal-box-harmonizer="4">
491 [data-sn-equal-height-managed],
492 [data-sn-first-section-aligned]{
493 box-sizing:border-box;
494 }
495 </style>
496 <script data-sn-horizontal-box-harmonizer="4">
497 (function(){
498 "use strict";
499
500 var MOBILE_MAX=767;
501 var ROW_TOLERANCE=6;
502 var MIN_W=150;
503 var MIN_H=36;
504 var MAX_PARENT_CHILDREN=16;
505 var SEARCH_DEPTH=5;
506
507 var root=
508 document.getElementById("xwikicontent")||
509 document.querySelector(".xwiki-rendering-content")||
510 document.querySelector("main")||
511 document.body;
512
513 if(!root)return;
514
515 var heightManaged=new Set();
516 var sectionManaged=new Set();
517 var originalMinHeight=new WeakMap();
518 var originalMarginTop=new WeakMap();
519 var raf=0;
520
521 function num(v){
522 var n=parseFloat(v);
523 return Number.isFinite(n)?n:0;
524 }
525
526 function visible(el,minW,minH){
527 if(!el||el.nodeType!==1)return false;
528
529 var s=getComputedStyle(el);
530
531 if(
532 s.display==="none"||
533 s.visibility==="hidden"||
534 Number(s.opacity)===0
535 ){
536 return false;
537 }
538
539 var r=el.getBoundingClientRect();
540
541 return (
542 r.width>=(minW||1)&&
543 r.height>=(minH||1)
544 );
545 }
546
547 function excluded(el){
548 return (
549 !el.matches||
550 el.matches(
551 "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]"
552 )
553 );
554 }
555
556 function namedLikeBox(el){
557 var c=
558 typeof el.className==="string"
559 ? el.className
560 : "";
561
562 return /(^|[s_-])(box|card|tile|panel|role|check|service|source|call|area|detail|resource|topic|warn|info)([s_-]|$)/i.test(c);
563 }
564
565 function boxLike(el){
566 if(!visible(el,MIN_W,MIN_H)||excluded(el))return false;
567
568 var s=getComputedStyle(el);
569 var r=el.getBoundingClientRect();
570
571 var border=
572 num(s.borderTopWidth)+
573 num(s.borderRightWidth)+
574 num(s.borderBottomWidth)+
575 num(s.borderLeftWidth);
576
577 var radius=Math.max(
578 num(s.borderTopLeftRadius),
579 num(s.borderTopRightRadius),
580 num(s.borderBottomLeftRadius),
581 num(s.borderBottomRightRadius)
582 );
583
584 var bg=
585 s.backgroundColor&&
586 s.backgroundColor!=="rgba(0, 0, 0, 0)"&&
587 s.backgroundColor!=="transparent";
588
589 var shadow=
590 s.boxShadow&&
591 s.boxShadow!=="none";
592
593 return (
594 namedLikeBox(el)||
595 border>=1||
596 (bg&&radius>=3)||
597 (shadow&&r.width>=180)
598 );
599 }
600
601 function saveOriginal(el,map,property){
602 if(map.has(el))return;
603
604 map.set(el,{
605 value:el.style.getPropertyValue(property),
606 priority:el.style.getPropertyPriority(property)
607 });
608 }
609
610 function restoreOriginal(el,map,property){
611 var original=map.get(el);
612
613 if(original&&original.value){
614 el.style.setProperty(
615 property,
616 original.value,
617 original.priority||""
618 );
619 }else{
620 el.style.removeProperty(property);
621 }
622 }
623
624 function reset(){
625 heightManaged.forEach(function(el){
626 restoreOriginal(
627 el,
628 originalMinHeight,
629 "min-height"
630 );
631
632 el.removeAttribute(
633 "data-sn-equal-height-managed"
634 );
635 });
636
637 sectionManaged.forEach(function(el){
638 restoreOriginal(
639 el,
640 originalMarginTop,
641 "margin-top"
642 );
643
644 el.removeAttribute(
645 "data-sn-first-section-aligned"
646 );
647 });
648
649 heightManaged.clear();
650 sectionManaged.clear();
651 }
652
653 function pickTarget(child){
654 if(!visible(child,MIN_W,MIN_H))return null;
655
656 if(boxLike(child)){
657 return child;
658 }
659
660 var cr=child.getBoundingClientRect();
661 var q=[];
662
663 Array.from(child.children||[]).forEach(function(el){
664 q.push({el:el,depth:1});
665 });
666
667 var best=null;
668 var bestScore=-Infinity;
669
670 while(q.length){
671 var item=q.shift();
672 var el=item.el;
673
674 if(!visible(el,MIN_W,MIN_H))continue;
675
676 var r=el.getBoundingClientRect();
677
678 if(
679 r.width>=cr.width*.68&&
680 boxLike(el)
681 ){
682 var widthFit=
683 1-Math.min(
684 1,
685 Math.abs(cr.width-r.width)/
686 Math.max(1,cr.width)
687 );
688
689 var topFit=
690 1-Math.min(
691 1,
692 Math.abs(cr.top-r.top)/100
693 );
694
695 var score=
696 widthFit*6+
697 topFit*3+
698 Math.min(r.height,900)/450+
699 Math.min(r.width*r.height,900000)/900000;
700
701 if(score>bestScore){
702 best=el;
703 bestScore=score;
704 }
705 }
706
707 if(item.depth<SEARCH_DEPTH){
708 Array.from(el.children||[]).forEach(function(next){
709 q.push({
710 el:next,
711 depth:item.depth+1
712 });
713 });
714 }
715 }
716
717 return best;
718 }
719
720 function groupsByVisualRow(entries){
721 var groups=[];
722
723 entries
724 .slice()
725 .sort(function(a,b){
726 return (
727 a.rect.top-b.rect.top||
728 a.rect.left-b.rect.left
729 );
730 })
731 .forEach(function(entry){
732 var group=null;
733
734 for(var i=0;i<groups.length;i++){
735 if(
736 Math.abs(
737 groups[i].top-
738 entry.rect.top
739 )<=ROW_TOLERANCE
740 ){
741 group=groups[i];
742 break;
743 }
744 }
745
746 if(!group){
747 group={
748 top:entry.rect.top,
749 entries:[]
750 };
751 groups.push(group);
752 }
753
754 group.entries.push(entry);
755 });
756
757 return groups;
758 }
759
760 function validHorizontalGroup(group){
761 if(group.entries.length<2)return false;
762
763 var lefts=
764 group.entries
765 .map(function(e){return e.rect.left;})
766 .sort(function(a,b){return a-b;});
767
768 if(
769 lefts[lefts.length-1]-
770 lefts[0]<
771 80
772 ){
773 return false;
774 }
775
776 var widths=
777 group.entries
778 .map(function(e){return e.rect.width;})
779 .filter(function(w){return w>0;});
780
781 if(widths.length<2)return false;
782
783 var minWidth=Math.min.apply(Math,widths);
784 var maxWidth=Math.max.apply(Math,widths);
785
786 return (
787 maxWidth/
788 Math.max(1,minWidth)<=
789 1.9
790 );
791 }
792
793 function normalizeText(text){
794 return String(text||"")
795 .replace(/s+/g," ")
796 .trim()
797 .toUpperCase();
798 }
799
800 function exactKnownFirstSection(el){
801 var text=normalizeText(el.textContent);
802
803 return (
804 text==="HIER STARTEN"||
805 text==="ORGANISIEREN & DOKUMENTIEREN"||
806 text==="ENTSCHEIDEN"||
807 text==="START HERE"||
808 text==="GET STARTED"||
809 text==="ORGANISE & DOCUMENT"||
810 text==="ORGANIZE & DOCUMENT"||
811 text==="DECIDE"
812 );
813 }
814
815 function visuallyFirstSectionBar(card){
816 var cardRect=card.getBoundingClientRect();
817 var candidates=[];
818
819 Array.from(
820 card.querySelectorAll(
821 "div,p,span,strong,h3,h4,h5,h6"
822 )
823 ).forEach(function(el){
824 if(!visible(el,20,6))return;
825 if(excluded(el))return;
826
827 var r=el.getBoundingClientRect();
828 var relativeTop=r.top-cardRect.top;
829
830 if(
831 relativeTop<45||
832 relativeTop>cardRect.height*.72
833 ){
834 return;
835 }
836
837 var widthRatio=
838 r.width/
839 Math.max(1,cardRect.width);
840
841 if(
842 widthRatio<.55||
843 widthRatio>1.05||
844 r.height>54
845 ){
846 return;
847 }
848
849 var text=normalizeText(el.textContent);
850
851 if(
852 text.length<2||
853 text.length>90
854 ){
855 return;
856 }
857
858 var style=getComputedStyle(el);
859
860 var bg=
861 style.backgroundColor&&
862 style.backgroundColor!=="rgba(0, 0, 0, 0)"&&
863 style.backgroundColor!=="transparent";
864
865 var border=
866 num(style.borderTopWidth)+
867 num(style.borderRightWidth)+
868 num(style.borderBottomWidth)+
869 num(style.borderLeftWidth);
870
871 var mostlyUpper=
872 text.length>=3&&
873 text===text.toUpperCase();
874
875 var exact=exactKnownFirstSection(el);
876
877 var score=
878 (exact?20:0)+
879 (bg?6:0)+
880 (border>=1?2:0)+
881 (mostlyUpper?4:0)+
882 (num(style.fontWeight)>=600?1:0);
883
884 if(score>=7){
885 candidates.push({
886 el:el,
887 relativeTop:relativeTop,
888 width:r.width,
889 score:score
890 });
891 }
892 });
893
894 if(!candidates.length)return null;
895
896 candidates.sort(function(a,b){
897 if(a.score!==b.score)return b.score-a.score;
898 if(Math.abs(a.relativeTop-b.relativeTop)>3){
899 return a.relativeTop-b.relativeTop;
900 }
901 return b.width-a.width;
902 });
903
904 // For exact known labels always prefer the earliest exact match.
905 var exacts=candidates.filter(function(c){
906 return exactKnownFirstSection(c.el);
907 });
908
909 if(exacts.length){
910 exacts.sort(function(a,b){
911 return a.relativeTop-b.relativeTop||b.width-a.width;
912 });
913 return exacts[0].el;
914 }
915
916 // Generic fallback: earliest high-confidence bar.
917 candidates.sort(function(a,b){
918 return a.relativeTop-b.relativeTop||b.score-a.score||b.width-a.width;
919 });
920
921 return candidates[0].el;
922 }
923
924 function alignFirstSections(cards){
925 var rows=
926 cards.map(function(card){
927 var bar=
928 visuallyFirstSectionBar(card);
929
930 if(!bar)return null;
931
932 var cardRect=
933 card.getBoundingClientRect();
934
935 var barRect=
936 bar.getBoundingClientRect();
937
938 return {
939 card:card,
940 bar:bar,
941 relativeTop:
942 barRect.top-cardRect.top,
943 label:
944 normalizeText(bar.textContent)
945 };
946 });
947
948 // Conservative: only align when every card in the horizontal row
949 // has a reliable first section bar.
950 if(
951 rows.some(function(row){
952 return !row;
953 })
954 ){
955 return null;
956 }
957
958 var targetTop=
959 Math.max.apply(
960 Math,
961 rows.map(function(row){
962 return row.relativeTop;
963 })
964 );
965
966 rows.forEach(function(row){
967 var delta=
968 targetTop-
969 row.relativeTop;
970
971 if(delta<=1)return;
972
973 saveOriginal(
974 row.bar,
975 originalMarginTop,
976 "margin-top"
977 );
978
979 var currentMargin=
980 num(
981 getComputedStyle(
982 row.bar
983 ).marginTop
984 );
985
986 row.bar.style.setProperty(
987 "margin-top",
988 (
989 currentMargin+
990 delta
991 )+"px"
992 );
993
994 row.bar.setAttribute(
995 "data-sn-first-section-aligned",
996 "4"
997 );
998
999 sectionManaged.add(row.bar);
1000 });
1001
1002 return {
1003 labels:
1004 rows.map(function(row){
1005 return row.label;
1006 }),
1007 targetRelativeTop:
1008 Math.round(targetTop)
1009 };
1010 }
1011
1012 function applyGroup(group){
1013 if(!validHorizontalGroup(group)){
1014 return null;
1015 }
1016
1017 var cards=[];
1018 var seen=new Set();
1019
1020 group.entries.forEach(function(entry){
1021 if(!seen.has(entry.target)){
1022 seen.add(entry.target);
1023 cards.push(entry.target);
1024 }
1025 });
1026
1027 if(cards.length<2)return null;
1028
1029 var firstSection=
1030 alignFirstSections(cards);
1031
1032 // The section alignment can change natural card heights.
1033 // Measure only afterwards.
1034 var maxHeight=0;
1035
1036 cards.forEach(function(card){
1037 maxHeight=Math.max(
1038 maxHeight,
1039 card.getBoundingClientRect().height
1040 );
1041 });
1042
1043 maxHeight=Math.ceil(maxHeight);
1044
1045 if(maxHeight<MIN_H)return null;
1046
1047 cards.forEach(function(card){
1048 saveOriginal(
1049 card,
1050 originalMinHeight,
1051 "min-height"
1052 );
1053
1054 card.style.setProperty(
1055 "min-height",
1056 maxHeight+"px"
1057 );
1058
1059 card.setAttribute(
1060 "data-sn-equal-height-managed",
1061 "4"
1062 );
1063
1064 heightManaged.add(card);
1065 });
1066
1067 return {
1068 cards:cards.length,
1069 height:maxHeight,
1070 firstSection:firstSection
1071 };
1072 }
1073
1074 function run(){
1075 reset();
1076
1077 if(
1078 window.innerWidth<=MOBILE_MAX
1079 ){
1080 return;
1081 }
1082
1083 var parents=
1084 Array.from(
1085 root.querySelectorAll("*")
1086 ).filter(function(parent){
1087 return (
1088 visible(parent,MIN_W,MIN_H)&&
1089 parent.children&&
1090 parent.children.length>=2&&
1091 parent.children.length<=MAX_PARENT_CHILDREN
1092 );
1093 });
1094
1095 var touched=new Set();
1096
1097 parents.forEach(function(parent){
1098 var entries=[];
1099
1100 Array.from(parent.children).forEach(function(child){
1101 if(!visible(child,MIN_W,MIN_H))return;
1102
1103 var target=pickTarget(child);
1104 if(!target)return;
1105
1106 entries.push({
1107 target:target,
1108 rect:target.getBoundingClientRect()
1109 });
1110 });
1111
1112 if(entries.length<2)return;
1113
1114 groupsByVisualRow(entries).forEach(function(group){
1115 if(!validHorizontalGroup(group))return;
1116
1117 var signature=
1118 group.entries.map(function(entry){
1119 return entry.target;
1120 });
1121
1122 if(
1123 !signature.some(function(el){
1124 return !touched.has(el);
1125 })
1126 ){
1127 return;
1128 }
1129
1130 var applied=
1131 applyGroup(group);
1132
1133 if(applied){
1134 signature.forEach(function(el){
1135 touched.add(el);
1136 });
1137 }
1138 });
1139 });
1140 }
1141
1142 function schedule(){
1143 if(raf)cancelAnimationFrame(raf);
1144
1145 raf=requestAnimationFrame(function(){
1146 raf=requestAnimationFrame(function(){
1147 raf=0;
1148 run();
1149 });
1150 });
1151 }
1152
1153 addEventListener("resize",schedule,{passive:true});
1154 addEventListener("load",schedule,{once:true});
1155
1156 root.addEventListener(
1157 "click",
1158 function(){
1159 setTimeout(schedule,0);
1160 },
1161 true
1162 );
1163
1164 Array.from(root.querySelectorAll("img")).forEach(function(img){
1165 if(!img.complete){
1166 img.addEventListener("load",schedule,{once:true});
1167 }
1168 });
1169
1170 if(document.fonts&&document.fonts.ready){
1171 document.fonts.ready.then(schedule);
1172 }
1173
1174 schedule();
1175 setTimeout(schedule,200);
1176 setTimeout(schedule,650);
1177 setTimeout(schedule,1400);
1178 })();
1179 </script>
1180 <!-- SN_HORIZONTAL_BOX_HARMONIZER_END -->
1181 {{/html}}