Skip to Content

Wiki source code of Enable

Version 29.10 by Veronika Kocher on Thursday, 03 Sep 2026 13:04
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_SERVICE_NAVIGATOR_MASTER_STYLE_START -->
490
491 <style data-sn-service-navigator-master="1">
492 /* =========================================================
493 MASTER TYPOGRAPHY
494 ========================================================= */
495 #xwikicontent h1,
496 #xwikicontent h2,
497 #xwikicontent h3,
498 #xwikicontent h4,
499 #xwikicontent h5,
500 #xwikicontent h6,
501 #xwikicontent .box-title,
502 #xwikicontent [role="heading"],
503 #xwikicontent h1 a,
504 #xwikicontent h2 a,
505 #xwikicontent h3 a,
506 #xwikicontent h4 a,
507 #xwikicontent h5 a,
508 #xwikicontent h6 a,
509 #xwikicontent .box-title a,
510 #xwikicontent [role="heading"] a{
511 text-align:left!important;
512 text-justify:auto!important;
513 word-spacing:normal!important;
514 }
515
516 /* =========================================================
517 COMING SOON / IN VORBEREITUNG
518 ========================================================= */
519 .sn-coming-soon-badge{
520 display:inline-block;
521 vertical-align:middle;
522 margin-left:10px;
523 padding:4px 8px;
524 border-radius:14px;
525 border:1px solid #efd9cc;
526 background:#fff4ee;
527 color:#8a4d36;
528 font-size:11px;
529 font-weight:700;
530 letter-spacing:.055em;
531 line-height:1.2;
532 white-space:nowrap;
533 }
534
535 /* =========================================================
536 NATIVE / DETAIL CALLOUT GEOMETRY
537 Preserve existing backgrounds.
538 ========================================================= */
539 #xwikicontent .arsn-info,
540 #xwikicontent .dmp-info,
541 #xwikicontent .ido-info,
542 #xwikicontent .pp-info,
543 #xwikicontent .infomessage{
544 box-sizing:border-box!important;
545 border-left:4px solid #21b6d7!important;
546 border-radius:8px;
547 text-align:left!important;
548 word-spacing:normal!important;
549 }
550
551 #xwikicontent .arsn-warn,
552 #xwikicontent .dmp-warn,
553 #xwikicontent .ido-warn,
554 #xwikicontent .pp-warn,
555 #xwikicontent .warn,
556 #xwikicontent .warning,
557 #xwikicontent .warningmessage,
558 #xwikicontent .errormessage{
559 box-sizing:border-box!important;
560 border-left:4px solid #e94b13!important;
561 border-radius:8px;
562 text-align:left!important;
563 word-spacing:normal!important;
564 }
565
566 [data-sn-master-equal-height],
567 [data-sn-master-first-row]{
568 box-sizing:border-box;
569 }
570 </style>
571
572 <script data-sn-service-navigator-master="1">
573 (function(){
574 "use strict";
575
576 var PAGE_KIND="overview";
577 var PLACEHOLDER=false;
578 var PLACEHOLDER_LABEL="COMING SOON";
579
580 var MOBILE_MAX=767;
581 var ROW_TOLERANCE=6;
582 var RESIZE_DEBOUNCE=220;
583
584 var root=
585 document.getElementById("xwikicontent")||
586 document.querySelector(".xwiki-rendering-content")||
587 document.querySelector("main")||
588 document.body;
589
590 if(!root)return;
591
592 var managedHeight=new Set();
593 var managedMargin=new Set();
594 var originalHeight=new WeakMap();
595 var originalMargin=new WeakMap();
596
597 var resizeTimer=0;
598 var running=false;
599
600 var THEMES=[
601 {
602 name:"BLUE",
603 accent:"#21b6d7",
604 bg:"#eaf7fb",
605 text:"#315d68",
606 labels:[
607 "HIER STARTEN",
608 "ENTSCHEIDEN",
609 "ÃœBERPRÃœFEN & ANPASSEN",
610 "START HERE",
611 "DECIDE",
612 "REVIEW & ADAPT"
613 ]
614 },
615 {
616 name:"RED",
617 accent:"#e94b13",
618 bg:"#fff1ec",
619 text:"#8a4d36",
620 labels:[
621 "PLANEN & ORGANISIEREN",
622 "ORGANISIEREN & DOKUMENTIEREN",
623 "PUBLIZIEREN & PRÄSENTIEREN",
624 "PLAN & ORGANISE",
625 "PLAN & ORGANIZE",
626 "ORGANISE & DOCUMENT",
627 "ORGANIZE & DOCUMENT",
628 "PUBLISH & PRESENT"
629 ]
630 },
631 {
632 name:"YELLOW",
633 accent:"#f0aa00",
634 bg:"#fff8e7",
635 text:"#785b17",
636 labels:[
637 "SCHÜTZEN & KLÄREN",
638 "STANDARDISIEREN & IDENTIFIZIEREN",
639 "ÖFFNEN, NACHNUTZEN & AUFFINDBAR MACHEN",
640 "PROTECT & CLARIFY",
641 "STANDARDISE & IDENTIFY",
642 "STANDARDIZE & IDENTIFY",
643 "OPEN, REUSE & MAKE FINDABLE"
644 ]
645 },
646 {
647 name:"GREEN",
648 accent:"#38b76a",
649 bg:"#edf9f1",
650 text:"#3f7451",
651 labels:[
652 "INFRASTRUKTUR EINRICHTEN",
653 "INFRASTRUKTUR & ZUSAMMENARBEIT EINRICHTEN",
654 "SPEICHERN & ZUGRIFF STEUERN",
655 "REPOSITORIUM, ERHALTEN & ÃœBERGEBEN",
656 "SET UP INFRASTRUCTURE",
657 "SET UP INFRASTRUCTURE & COLLABORATION",
658 "STORE & CONTROL ACCESS",
659 "REPOSITORY, PRESERVE & HAND OVER"
660 ]
661 }
662 ];
663
664 function num(value){
665 var n=parseFloat(value);
666 return Number.isFinite(n)?n:0;
667 }
668
669 function norm(value){
670 return String(value||"")
671 .replace(/\s+/g," ")
672 .trim()
673 .toUpperCase();
674 }
675
676 function visible(el){
677 if(!el||el.nodeType!==1)return false;
678
679 var style=getComputedStyle(el);
680 var rect=el.getBoundingClientRect();
681
682 return (
683 style.display!=="none"&&
684 style.visibility!=="hidden"&&
685 rect.width>20&&
686 rect.height>4
687 );
688 }
689
690 function saveStyle(el,map,property){
691 if(map.has(el))return;
692
693 map.set(el,{
694 value:el.style.getPropertyValue(property),
695 priority:el.style.getPropertyPriority(property)
696 });
697 }
698
699 function restoreStyle(el,map,property){
700 var original=map.get(el);
701
702 if(original&&original.value){
703 el.style.setProperty(
704 property,
705 original.value,
706 original.priority||""
707 );
708 }else{
709 el.style.removeProperty(property);
710 }
711 }
712
713 function resetRuntime(){
714 managedHeight.forEach(function(el){
715 restoreStyle(
716 el,
717 originalHeight,
718 "min-height"
719 );
720 el.removeAttribute(
721 "data-sn-master-equal-height"
722 );
723 });
724
725 managedMargin.forEach(function(el){
726 restoreStyle(
727 el,
728 originalMargin,
729 "margin-top"
730 );
731 el.removeAttribute(
732 "data-sn-master-first-row"
733 );
734 });
735
736 managedHeight.clear();
737 managedMargin.clear();
738 }
739
740 function themeFor(text){
741 var value=norm(text);
742
743 for(var i=0;i<THEMES.length;i++){
744 for(var j=0;j<THEMES[i].labels.length;j++){
745 var label=THEMES[i].labels[j];
746
747 if(
748 value===label||
749 value.indexOf(label+" ")===0||
750 value.indexOf(label+" -")===0||
751 value.indexOf(label+" ·")===0
752 ){
753 return THEMES[i];
754 }
755 }
756 }
757
758 return null;
759 }
760
761 /* =======================================================
762 PLACEHOLDER BADGE
763 ======================================================= */
764
765 function applyPlaceholderBadge(){
766 if(!PLACEHOLDER)return;
767
768 if(
769 document.querySelector(
770 ".sn-coming-soon-badge"
771 )
772 ){
773 return;
774 }
775
776 var title=
777 document.querySelector(
778 "#document-title"
779 )||
780 document.querySelector(
781 "h1"
782 );
783
784 if(!title)return;
785
786 var badge=
787 document.createElement(
788 "span"
789 );
790
791 badge.className=
792 "sn-coming-soon-badge";
793
794 badge.textContent=
795 PLACEHOLDER_LABEL;
796
797 badge.setAttribute(
798 "aria-label",
799 PLACEHOLDER_LABEL
800 );
801
802 title.appendChild(
803 badge
804 );
805 }
806
807 /* =======================================================
808 DETAIL PAGE OWN-ACCENT PROPAGATION
809 ======================================================= */
810
811 function parseRGB(value){
812 var match=String(value||"").match(
813 /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i
814 );
815
816 if(!match)return null;
817
818 return [
819 Number(match[1]),
820 Number(match[2]),
821 Number(match[3])
822 ];
823 }
824
825 function distance(a,b){
826 return Math.sqrt(
827 Math.pow(a[0]-b[0],2)+
828 Math.pow(a[1]-b[1],2)+
829 Math.pow(a[2]-b[2],2)
830 );
831 }
832
833 function paletteMatch(cssColor){
834 var rgb=parseRGB(cssColor);
835
836 if(!rgb)return null;
837
838 var palette=[
839 {hex:"#21b6d7",rgb:[33,182,215]},
840 {hex:"#e94b13",rgb:[233,75,19]},
841 {hex:"#f0aa00",rgb:[240,170,0]},
842 {hex:"#38b76a",rgb:[56,183,106]}
843 ];
844
845 var best=null;
846 var bestDistance=Infinity;
847
848 palette.forEach(function(item){
849 var d=distance(rgb,item.rgb);
850
851 if(d<bestDistance){
852 best=item;
853 bestDistance=d;
854 }
855 });
856
857 return bestDistance<=30
858 ?best
859 :null;
860 }
861
862 function propagateDetailAccents(){
863 if(PAGE_KIND!=="detail")return;
864
865 Array.from(
866 root.querySelectorAll(
867 ".arsn-call,.dmp-call,.ido-call,.pp-call,"+
868 ".arsn-source,.dmp-source,.ido-source,.pp-source"
869 )
870 ).forEach(function(el){
871 if(!visible(el))return;
872
873 var style=getComputedStyle(el);
874
875 if(
876 num(style.borderTopWidth)>=2
877 ){
878 var match=
879 paletteMatch(
880 style.borderTopColor
881 );
882
883 if(match){
884 el.style.setProperty(
885 "border-left",
886 "4px solid "+match.hex,
887 "important"
888 );
889 }
890 }
891 });
892
893 // Warning families: explicit safety override.
894 Array.from(
895 root.querySelectorAll(
896 ".arsn-warn,.dmp-warn,.ido-warn,.pp-warn,"+
897 ".warn,.warning,.warningmessage,.errormessage"
898 )
899 ).forEach(function(el){
900 if(!visible(el))return;
901
902 el.style.setProperty(
903 "border-left",
904 "4px solid #e94b13",
905 "important"
906 );
907 });
908
909 // Info families: explicit orientation override.
910 Array.from(
911 root.querySelectorAll(
912 ".arsn-info,.dmp-info,.ido-info,.pp-info,.infomessage"
913 )
914 ).forEach(function(el){
915 if(!visible(el))return;
916
917 el.style.setProperty(
918 "border-left",
919 "4px solid #21b6d7",
920 "important"
921 );
922 });
923 }
924
925 /* =======================================================
926 OVERVIEW SEMANTIC THEME PALETTE
927 ======================================================= */
928
929 function smallestThemeHeaders(){
930 return Array.from(
931 root.querySelectorAll(
932 "div,span,p,strong,h3,h4,h5,h6"
933 )
934 ).filter(function(el){
935 if(!visible(el))return false;
936 if(!themeFor(el.textContent))return false;
937
938 return !Array.from(
939 el.children||[]
940 ).some(function(child){
941 return !!themeFor(
942 child.textContent
943 );
944 });
945 });
946 }
947
948 function findOverviewCard(header){
949 var node=header.parentElement;
950 var candidates=[];
951
952 while(node&&node!==root){
953 var rect=node.getBoundingClientRect();
954 var style=getComputedStyle(node);
955
956 var border=
957 num(style.borderTopWidth)+
958 num(style.borderRightWidth)+
959 num(style.borderBottomWidth)+
960 num(style.borderLeftWidth);
961
962 if(
963 rect.width>=220&&
964 rect.width<=800&&
965 rect.height>=120&&
966 border>=1
967 ){
968 candidates.push(node);
969 }
970
971 node=node.parentElement;
972 }
973
974 if(!candidates.length)return null;
975
976 candidates.sort(function(a,b){
977 return (
978 b.getBoundingClientRect().height-
979 a.getBoundingClientRect().height
980 );
981 });
982
983 return candidates[0];
984 }
985
986 function rowCandidates(link,card){
987 var result=[];
988 var cardRect=
989 card.getBoundingClientRect();
990
991 var node=link;
992
993 while(node&&node!==card){
994 if(visible(node)){
995 var rect=
996 node.getBoundingClientRect();
997
998 if(
999 rect.height<=105&&
1000 rect.width>=
1001 cardRect.width*.50&&
1002 rect.width<=
1003 cardRect.width*1.03
1004 ){
1005 result.push(node);
1006 }
1007 }
1008
1009 node=node.parentElement;
1010 }
1011
1012 return result;
1013 }
1014
1015 function chooseOuterRow(
1016 candidates,
1017 link
1018 ){
1019 if(!candidates.length){
1020 return link;
1021 }
1022
1023 var bordered=
1024 candidates.filter(function(el){
1025 return (
1026 num(
1027 getComputedStyle(el)
1028 .borderLeftWidth
1029 )>=1
1030 );
1031 });
1032
1033 var pool=
1034 bordered.length
1035 ?bordered
1036 :candidates;
1037
1038 pool.sort(function(a,b){
1039 var ar=
1040 a.getBoundingClientRect();
1041
1042 var br=
1043 b.getBoundingClientRect();
1044
1045 return (
1046 ar.left-br.left||
1047 br.width-ar.width
1048 );
1049 });
1050
1051 return pool[0]||link;
1052 }
1053
1054 function applyOverviewPalette(){
1055 if(PAGE_KIND!=="overview"){
1056 return [];
1057 }
1058
1059 var headers=
1060 smallestThemeHeaders()
1061 .map(function(el){
1062 return {
1063 el:el,
1064 theme:
1065 themeFor(
1066 el.textContent
1067 ),
1068 card:
1069 findOverviewCard(
1070 el
1071 )
1072 };
1073 })
1074 .filter(function(row){
1075 return !!row.card;
1076 });
1077
1078 var unique=[];
1079 var seenHeaders=new Set();
1080
1081 headers.forEach(function(row){
1082 var key=
1083 row.theme.name+
1084 "|"+
1085 Math.round(
1086 row.card
1087 .getBoundingClientRect()
1088 .left
1089 )+
1090 "|"+
1091 Math.round(
1092 row.el
1093 .getBoundingClientRect()
1094 .top
1095 );
1096
1097 if(!seenHeaders.has(key)){
1098 seenHeaders.add(key);
1099 unique.push(row);
1100 }
1101 });
1102
1103 unique.forEach(function(row){
1104 var headerRect=
1105 row.el
1106 .getBoundingClientRect();
1107
1108 row.el.style.setProperty(
1109 "background",
1110 row.theme.bg,
1111 "important"
1112 );
1113
1114 row.el.style.setProperty(
1115 "color",
1116 row.theme.text,
1117 "important"
1118 );
1119
1120 row.el.style.setProperty(
1121 "text-align",
1122 "left",
1123 "important"
1124 );
1125
1126 row.el.style.setProperty(
1127 "word-spacing",
1128 "normal",
1129 "important"
1130 );
1131
1132 var later=
1133 unique
1134 .filter(function(other){
1135 return (
1136 other.card===row.card&&
1137 other.el
1138 .getBoundingClientRect()
1139 .top>
1140 headerRect.top+2
1141 );
1142 })
1143 .sort(function(a,b){
1144 return (
1145 a.el
1146 .getBoundingClientRect()
1147 .top-
1148 b.el
1149 .getBoundingClientRect()
1150 .top
1151 );
1152 });
1153
1154 var stopTop=
1155 later.length
1156 ?later[0].el
1157 .getBoundingClientRect()
1158 .top
1159 :Infinity;
1160
1161 Array.from(
1162 row.card.querySelectorAll("a")
1163 ).forEach(function(link){
1164 if(!visible(link))return;
1165
1166 var rect=
1167 link.getBoundingClientRect();
1168
1169 if(
1170 rect.top<=
1171 headerRect.bottom-2||
1172 rect.top>=
1173 stopTop-2
1174 ){
1175 return;
1176 }
1177
1178 var candidates=
1179 rowCandidates(
1180 link,
1181 row.card
1182 );
1183
1184 var target=
1185 chooseOuterRow(
1186 candidates,
1187 link
1188 );
1189
1190 candidates.forEach(function(el){
1191 el.style.setProperty(
1192 "border-left",
1193 "0 solid transparent",
1194 "important"
1195 );
1196 });
1197
1198 target.style.setProperty(
1199 "border-left",
1200 "3px solid "+
1201 row.theme.accent,
1202 "important"
1203 );
1204
1205 target.style.setProperty(
1206 "box-sizing",
1207 "border-box",
1208 "important"
1209 );
1210 });
1211 });
1212
1213 return unique;
1214 }
1215
1216 /* =======================================================
1217 OVERVIEW CARD HEIGHT + FIRST THEMATIC ROW
1218 ======================================================= */
1219
1220 function alignOverviewCards(headers){
1221 if(
1222 PAGE_KIND!=="overview"||
1223 window.innerWidth<=MOBILE_MAX
1224 ){
1225 return;
1226 }
1227
1228 var cards=[];
1229 var seen=new Set();
1230
1231 headers.forEach(function(row){
1232 if(!seen.has(row.card)){
1233 seen.add(row.card);
1234 cards.push(row.card);
1235 }
1236 });
1237
1238 if(cards.length<2){
1239 return;
1240 }
1241
1242 // Group cards by actual top position.
1243 var groups=[];
1244
1245 cards.forEach(function(card){
1246 var top=
1247 card.getBoundingClientRect().top;
1248
1249 var group=null;
1250
1251 for(var i=0;i<groups.length;i++){
1252 if(
1253 Math.abs(
1254 groups[i].top-top
1255 )<=ROW_TOLERANCE
1256 ){
1257 group=groups[i];
1258 break;
1259 }
1260 }
1261
1262 if(!group){
1263 group={
1264 top:top,
1265 cards:[]
1266 };
1267 groups.push(group);
1268 }
1269
1270 group.cards.push(card);
1271 });
1272
1273 groups.forEach(function(group){
1274 if(group.cards.length<2){
1275 return;
1276 }
1277
1278 var firstHeaders=
1279 group.cards.map(function(card){
1280 var candidates=
1281 headers
1282 .filter(function(row){
1283 return row.card===card;
1284 })
1285 .sort(function(a,b){
1286 return (
1287 a.el
1288 .getBoundingClientRect()
1289 .top-
1290 b.el
1291 .getBoundingClientRect()
1292 .top
1293 );
1294 });
1295
1296 return candidates.length
1297 ?candidates[0]
1298 :null;
1299 });
1300
1301 if(
1302 !firstHeaders.some(function(row){
1303 return !row;
1304 })
1305 ){
1306 var targetTop=
1307 Math.max.apply(
1308 Math,
1309 firstHeaders.map(function(row){
1310 return (
1311 row.el
1312 .getBoundingClientRect()
1313 .top-
1314 row.card
1315 .getBoundingClientRect()
1316 .top
1317 );
1318 })
1319 );
1320
1321 firstHeaders.forEach(function(row){
1322 var relativeTop=
1323 row.el
1324 .getBoundingClientRect()
1325 .top-
1326 row.card
1327 .getBoundingClientRect()
1328 .top;
1329
1330 var delta=
1331 targetTop-relativeTop;
1332
1333 if(delta>1){
1334 saveStyle(
1335 row.el,
1336 originalMargin,
1337 "margin-top"
1338 );
1339
1340 var current=
1341 num(
1342 getComputedStyle(
1343 row.el
1344 ).marginTop
1345 );
1346
1347 row.el.style.setProperty(
1348 "margin-top",
1349 (
1350 current+delta
1351 )+"px"
1352 );
1353
1354 row.el.setAttribute(
1355 "data-sn-master-first-row",
1356 "1"
1357 );
1358
1359 managedMargin.add(
1360 row.el
1361 );
1362 }
1363 });
1364 }
1365
1366 var maxHeight=0;
1367
1368 group.cards.forEach(function(card){
1369 maxHeight=
1370 Math.max(
1371 maxHeight,
1372 card
1373 .getBoundingClientRect()
1374 .height
1375 );
1376 });
1377
1378 maxHeight=
1379 Math.ceil(maxHeight);
1380
1381 group.cards.forEach(function(card){
1382 saveStyle(
1383 card,
1384 originalHeight,
1385 "min-height"
1386 );
1387
1388 card.style.setProperty(
1389 "min-height",
1390 maxHeight+"px"
1391 );
1392
1393 card.setAttribute(
1394 "data-sn-master-equal-height",
1395 "1"
1396 );
1397
1398 managedHeight.add(
1399 card
1400 );
1401 });
1402 });
1403 }
1404
1405 /* =======================================================
1406 DETAIL GRID EQUAL HEIGHT, DESKTOP ONLY
1407 ======================================================= */
1408
1409 function equaliseDetailGrids(){
1410 if(
1411 PAGE_KIND!=="detail"||
1412 window.innerWidth<=MOBILE_MAX
1413 ){
1414 return;
1415 }
1416
1417 var selectors=[
1418 ".arsn-grid",
1419 ".arsn-grid-2",
1420 ".arsn-grid-3",
1421 ".dmp-grid",
1422 ".ido-grid",
1423 ".pp-grid"
1424 ];
1425
1426 selectors.forEach(function(selector){
1427 Array.from(
1428 root.querySelectorAll(selector)
1429 ).forEach(function(grid){
1430 var children=
1431 Array.from(
1432 grid.children||[]
1433 ).filter(visible);
1434
1435 if(children.length<2){
1436 return;
1437 }
1438
1439 var groups=[];
1440
1441 children.forEach(function(child){
1442 var top=
1443 child
1444 .getBoundingClientRect()
1445 .top;
1446
1447 var group=null;
1448
1449 for(var i=0;i<groups.length;i++){
1450 if(
1451 Math.abs(
1452 groups[i].top-top
1453 )<=ROW_TOLERANCE
1454 ){
1455 group=groups[i];
1456 break;
1457 }
1458 }
1459
1460 if(!group){
1461 group={
1462 top:top,
1463 items:[]
1464 };
1465 groups.push(group);
1466 }
1467
1468 group.items.push(child);
1469 });
1470
1471 groups.forEach(function(group){
1472 if(group.items.length<2){
1473 return;
1474 }
1475
1476 var maxHeight=0;
1477
1478 group.items.forEach(function(item){
1479 maxHeight=
1480 Math.max(
1481 maxHeight,
1482 item
1483 .getBoundingClientRect()
1484 .height
1485 );
1486 });
1487
1488 maxHeight=
1489 Math.ceil(maxHeight);
1490
1491 group.items.forEach(function(item){
1492 saveStyle(
1493 item,
1494 originalHeight,
1495 "min-height"
1496 );
1497
1498 item.style.setProperty(
1499 "min-height",
1500 maxHeight+"px"
1501 );
1502
1503 item.setAttribute(
1504 "data-sn-master-equal-height",
1505 "1"
1506 );
1507
1508 managedHeight.add(item);
1509 });
1510 });
1511 });
1512 });
1513 }
1514
1515 /* =======================================================
1516 RUN / RESPONSIVE SCHEDULING
1517 ======================================================= */
1518
1519 function run(){
1520 if(running)return;
1521
1522 running=true;
1523
1524 try{
1525 resetRuntime();
1526 applyPlaceholderBadge();
1527 propagateDetailAccents();
1528
1529 var headers=
1530 applyOverviewPalette();
1531
1532 if(
1533 window.innerWidth>
1534 MOBILE_MAX
1535 ){
1536 alignOverviewCards(
1537 headers
1538 );
1539
1540 equaliseDetailGrids();
1541 }
1542 }finally{
1543 running=false;
1544 }
1545 }
1546
1547 function onResize(){
1548 if(resizeTimer){
1549 clearTimeout(
1550 resizeTimer
1551 );
1552 }
1553
1554 resizeTimer=
1555 setTimeout(
1556 function(){
1557 resizeTimer=0;
1558 run();
1559 },
1560 RESIZE_DEBOUNCE
1561 );
1562 }
1563
1564 async function waitForReady(){
1565 if(
1566 document.readyState!=="complete"
1567 ){
1568 await new Promise(function(resolve){
1569 window.addEventListener(
1570 "load",
1571 resolve,
1572 {once:true}
1573 );
1574 });
1575 }
1576
1577 if(
1578 document.fonts&&
1579 document.fonts.ready
1580 ){
1581 try{
1582 await document.fonts.ready;
1583 }catch(error){}
1584 }
1585
1586 var images=
1587 Array.from(
1588 root.querySelectorAll("img")
1589 );
1590
1591 await Promise.all(
1592 images.map(function(img){
1593 if(img.complete){
1594 return Promise.resolve();
1595 }
1596
1597 return new Promise(function(resolve){
1598 var done=function(){
1599 resolve();
1600 };
1601
1602 img.addEventListener(
1603 "load",
1604 done,
1605 {once:true}
1606 );
1607
1608 img.addEventListener(
1609 "error",
1610 done,
1611 {once:true}
1612 );
1613 });
1614 })
1615 );
1616
1617 run();
1618 }
1619
1620 window.addEventListener(
1621 "resize",
1622 onResize,
1623 {passive:true}
1624 );
1625
1626 waitForReady();
1627 })();
1628 </script>
1629
1630 <!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_END -->
1631 {{/html}}