Skip to Content

Wiki source code of Prepare

Version 31.1 by Veronika Kocher on Friday, 04 Sep 2026 15:32
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 · PREPARE</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 · PREPARE</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 <!-- ARSN_TRAINING_WORKSHOPS_V2_START -->
468 <section class="arsn-training-workshops" data-arsn-training-workshops="v2" style="margin:27px 0 22px 0;">
469 <div style="padding:16px 18px;background:#eef8fa;border:1px solid #cfe8ef;border-left:5px solid #21b6d7;border-radius:9px;">
470 <div style="font-size:12px;font-weight:700;letter-spacing:.075em;text-transform:uppercase;color:#3f6871;margin-bottom:5px;">TRAINING &amp; WORKSHOPS</div>
471 <h3 style="font-size:20px;line-height:1.3;margin:0 0 7px;color:#35312d;text-align:left;">Training, workshops &amp; consultation sessions</h3>
472 <p style="margin:0 0 10px;color:#5e5953;line-height:1.55;">Relevant opportunities for this topic will be shown here automatically from the central calendar.</p>
473 <span data-arsn-coming-soon="true" style="display:inline-block;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>
474 </div>
475 </section>
476 <!-- ARSN_TRAINING_WORKSHOPS_V2_END -->
477
478 <div style="margin:0 0 13px 0;">
479 <div class="arsn-eyebrow" style="color:#8a4d36;margin-bottom:4px;">USEFUL MATERIALS</div>
480 <h3 style="font-size:22px;margin:0 0 4px 0;color:#35312d;">Practical resources</h3>
481 </div>
482
483 <div class="arsn-resource-grid" style="margin-bottom:27px;">
484 <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>
485 <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>
486 <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>
487 </div>
488
489 <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 -->
490 <strong style="color:#2d5661;">Need help finding the right route?</strong>
491 <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>
492 </aside>
493
494 <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>
495
496 </div>
497 {{/html}}
498
499 {{html clean="false"}}
500 <!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_START -->
501
502 <style data-sn-service-navigator-master="1">
503 /* =========================================================
504 MASTER TYPOGRAPHY
505 ========================================================= */
506 #xwikicontent h1,
507 #xwikicontent h2,
508 #xwikicontent h3,
509 #xwikicontent h4,
510 #xwikicontent h5,
511 #xwikicontent h6,
512 #xwikicontent .box-title,
513 #xwikicontent [role="heading"],
514 #xwikicontent h1 a,
515 #xwikicontent h2 a,
516 #xwikicontent h3 a,
517 #xwikicontent h4 a,
518 #xwikicontent h5 a,
519 #xwikicontent h6 a,
520 #xwikicontent .box-title a,
521 #xwikicontent [role="heading"] a{
522 text-align:left!important;
523 text-justify:auto!important;
524 word-spacing:normal!important;
525 }
526
527 /* =========================================================
528 COMING SOON / IN VORBEREITUNG
529 ========================================================= */
530 .sn-coming-soon-badge{
531 display:inline-block;
532 vertical-align:middle;
533 margin-left:10px;
534 padding:4px 8px;
535 border-radius:14px;
536 border:1px solid #efd9cc;
537 background:#fff4ee;
538 color:#8a4d36;
539 font-size:11px;
540 font-weight:700;
541 letter-spacing:.055em;
542 line-height:1.2;
543 white-space:nowrap;
544 }
545
546 /* =========================================================
547 NATIVE / DETAIL CALLOUT GEOMETRY
548 Preserve existing backgrounds.
549 ========================================================= */
550 #xwikicontent .arsn-info,
551 #xwikicontent .dmp-info,
552 #xwikicontent .ido-info,
553 #xwikicontent .pp-info,
554 #xwikicontent .infomessage{
555 box-sizing:border-box!important;
556 border-left:4px solid #21b6d7!important;
557 border-radius:8px;
558 text-align:left!important;
559 word-spacing:normal!important;
560 }
561
562 #xwikicontent .arsn-warn,
563 #xwikicontent .dmp-warn,
564 #xwikicontent .ido-warn,
565 #xwikicontent .pp-warn,
566 #xwikicontent .warn,
567 #xwikicontent .warning,
568 #xwikicontent .warningmessage,
569 #xwikicontent .errormessage{
570 box-sizing:border-box!important;
571 border-left:4px solid #e94b13!important;
572 border-radius:8px;
573 text-align:left!important;
574 word-spacing:normal!important;
575 }
576
577 [data-sn-master-equal-height],
578 [data-sn-master-first-row]{
579 box-sizing:border-box;
580 }
581
582 /* =========================================================
583 FULL-WIDTH THREE-LINE NUMBER / TITLE / SUBTITLE BLOCKS
584 ========================================================= */
585 #xwikicontent .arsn-area-label[data-sn-three-line="1"]{
586 display:grid!important;
587 grid-template-columns:minmax(0,1fr)!important;
588 grid-auto-rows:auto!important;
589 width:100%!important;
590 max-width:none!important;
591 box-sizing:border-box!important;
592 justify-items:start!important;
593 align-items:start!important;
594 gap:2px!important;
595 text-align:left!important;
596 text-align-last:left!important;
597 text-justify:auto!important;
598 word-spacing:normal!important;
599 white-space:normal!important;
600 }
601 #xwikicontent .arsn-area-label[data-sn-three-line="1"] > .arsn-area-number,
602 #xwikicontent .arsn-area-label[data-sn-three-line="1"] > .sn-area-label-title,
603 #xwikicontent .arsn-area-label[data-sn-three-line="1"] > .arsn-area-action{
604 display:block!important;
605 width:100%!important;
606 margin:0!important;
607 text-align:left!important;
608 text-align-last:left!important;
609 text-justify:auto!important;
610 word-spacing:normal!important;
611 white-space:normal!important;
612 }
613 </style>
614
615 <script data-sn-service-navigator-master="1">
616 (function(){
617 "use strict";
618
619 var PAGE_KIND="overview";
620 var PLACEHOLDER=false;
621 var PLACEHOLDER_LABEL="COMING SOON";
622
623 var MOBILE_MAX=767;
624 var ROW_TOLERANCE=6;
625 var RESIZE_DEBOUNCE=220;
626
627 var root=
628 document.getElementById("xwikicontent")||
629 document.querySelector(".xwiki-rendering-content")||
630 document.querySelector("main")||
631 document.body;
632
633 if(!root)return;
634
635 var managedHeight=new Set();
636 var managedMargin=new Set();
637 var originalHeight=new WeakMap();
638 var originalMargin=new WeakMap();
639
640 var resizeTimer=0;
641 var running=false;
642
643 var THEMES=[
644 {
645 name:"BLUE",
646 accent:"#21b6d7",
647 bg:"#eaf7fb",
648 text:"#315d68",
649 labels:[
650 "HIER STARTEN",
651 "ENTSCHEIDEN",
652 "ÃœBERPRÃœFEN & ANPASSEN",
653 "START HERE",
654 "DECIDE",
655 "REVIEW & ADAPT"
656 ]
657 },
658 {
659 name:"RED",
660 accent:"#e94b13",
661 bg:"#fff1ec",
662 text:"#8a4d36",
663 labels:[
664 "PLANEN & ORGANISIEREN",
665 "ORGANISIEREN & DOKUMENTIEREN",
666 "PUBLIZIEREN & PRÄSENTIEREN",
667 "PLAN & ORGANISE",
668 "PLAN & ORGANIZE",
669 "ORGANISE & DOCUMENT",
670 "ORGANIZE & DOCUMENT",
671 "PUBLISH & PRESENT"
672 ]
673 },
674 {
675 name:"YELLOW",
676 accent:"#f0aa00",
677 bg:"#fff8e7",
678 text:"#785b17",
679 labels:[
680 "SCHÜTZEN & KLÄREN",
681 "STANDARDISIEREN & IDENTIFIZIEREN",
682 "ÖFFNEN, NACHNUTZEN & AUFFINDBAR MACHEN",
683 "PROTECT & CLARIFY",
684 "STANDARDISE & IDENTIFY",
685 "STANDARDIZE & IDENTIFY",
686 "OPEN, REUSE & MAKE FINDABLE"
687 ]
688 },
689 {
690 name:"GREEN",
691 accent:"#38b76a",
692 bg:"#edf9f1",
693 text:"#3f7451",
694 labels:[
695 "INFRASTRUKTUR EINRICHTEN",
696 "INFRASTRUKTUR & ZUSAMMENARBEIT EINRICHTEN",
697 "SPEICHERN & ZUGRIFF STEUERN",
698 "REPOSITORIUM, ERHALTEN & ÃœBERGEBEN",
699 "SET UP INFRASTRUCTURE",
700 "SET UP INFRASTRUCTURE & COLLABORATION",
701 "STORE & CONTROL ACCESS",
702 "REPOSITORY, PRESERVE & HAND OVER"
703 ]
704 }
705 ];
706
707 function num(value){
708 var n=parseFloat(value);
709 return Number.isFinite(n)?n:0;
710 }
711
712 function norm(value){
713 return String(value||"")
714 .replace(/\s+/g," ")
715 .trim()
716 .toUpperCase();
717 }
718
719 function visible(el){
720 if(!el||el.nodeType!==1)return false;
721
722 var style=getComputedStyle(el);
723 var rect=el.getBoundingClientRect();
724
725 return (
726 style.display!=="none"&&
727 style.visibility!=="hidden"&&
728 rect.width>20&&
729 rect.height>4
730 );
731 }
732
733 function saveStyle(el,map,property){
734 if(map.has(el))return;
735
736 map.set(el,{
737 value:el.style.getPropertyValue(property),
738 priority:el.style.getPropertyPriority(property)
739 });
740 }
741
742 function restoreStyle(el,map,property){
743 var original=map.get(el);
744
745 if(original&&original.value){
746 el.style.setProperty(
747 property,
748 original.value,
749 original.priority||""
750 );
751 }else{
752 el.style.removeProperty(property);
753 }
754 }
755
756 function resetRuntime(){
757 managedHeight.forEach(function(el){
758 restoreStyle(
759 el,
760 originalHeight,
761 "min-height"
762 );
763 el.removeAttribute(
764 "data-sn-master-equal-height"
765 );
766 });
767
768 managedMargin.forEach(function(el){
769 restoreStyle(
770 el,
771 originalMargin,
772 "margin-top"
773 );
774 el.removeAttribute(
775 "data-sn-master-first-row"
776 );
777 });
778
779 managedHeight.clear();
780 managedMargin.clear();
781 }
782
783 function themeFor(text){
784 var value=norm(text);
785
786 for(var i=0;i<THEMES.length;i++){
787 for(var j=0;j<THEMES[i].labels.length;j++){
788 var label=THEMES[i].labels[j];
789
790 if(
791 value===label||
792 value.indexOf(label+" ")===0||
793 value.indexOf(label+" -")===0||
794 value.indexOf(label+" ·")===0
795 ){
796 return THEMES[i];
797 }
798 }
799 }
800
801 return null;
802 }
803
804 /* =======================================================
805 BORDERLESS FILLED RED/ORANGE CTA BUTTONS
806 ======================================================= */
807
808 function colourDistance(a,b){
809 return Math.sqrt(
810 Math.pow(a[0]-b[0],2)+
811 Math.pow(a[1]-b[1],2)+
812 Math.pow(a[2]-b[2],2)
813 );
814 }
815
816 function makeFilledRedOrangeCTAsBorderless(){
817 var RED_ORANGE=[233,75,19];
818
819 Array.from(
820 root.querySelectorAll(
821 'a,button,[role="button"],input[type="submit"],input[type="button"]'
822 )
823 ).forEach(function(el){
824 if(!visible(el))return;
825
826 var style=getComputedStyle(el);
827 var rgb=parseRGB(style.backgroundColor);
828
829 if(!rgb)return;
830
831 if(
832 colourDistance(
833 rgb,
834 RED_ORANGE
835 )>55
836 ){
837 return;
838 }
839
840 var rect=el.getBoundingClientRect();
841
842 if(
843 rect.width<80||
844 rect.height<24
845 ){
846 return;
847 }
848
849 el.style.setProperty(
850 "border",
851 "none",
852 "important"
853 );
854
855 el.style.setProperty(
856 "border-left",
857 "none",
858 "important"
859 );
860
861 el.style.setProperty(
862 "border-top",
863 "none",
864 "important"
865 );
866
867 el.style.setProperty(
868 "border-right",
869 "none",
870 "important"
871 );
872
873 el.style.setProperty(
874 "border-bottom",
875 "none",
876 "important"
877 );
878
879 el.style.setProperty(
880 "box-shadow",
881 "none",
882 "important"
883 );
884 });
885 }
886
887 /* =======================================================
888 FULL-WIDTH THREE-LINE AREA LABELS
889 ======================================================= */
890
891 function compactText(value){
892 return String(value||"")
893 .replace(/\s+/g," ")
894 .trim();
895 }
896
897 function makeThreeLineAreaLabels(){
898 Array.from(
899 root.querySelectorAll(
900 ".arsn-area-label"
901 )
902 ).forEach(function(label){
903 if(
904 label.getAttribute(
905 "data-sn-three-line"
906 )==="1"
907 ){
908 return;
909 }
910
911 var number=
912 label.querySelector(
913 ":scope > .arsn-area-number"
914 );
915
916 var action=
917 label.querySelector(
918 ":scope > .arsn-area-action"
919 );
920
921 if(
922 !number||
923 !action
924 ){
925 return;
926 }
927
928 var clone=
929 label.cloneNode(true);
930
931 var cloneNumber=
932 clone.querySelector(
933 ":scope > .arsn-area-number"
934 );
935
936 var cloneAction=
937 clone.querySelector(
938 ":scope > .arsn-area-action"
939 );
940
941 if(cloneNumber){
942 cloneNumber.remove();
943 }
944
945 if(cloneAction){
946 cloneAction.remove();
947 }
948
949 var titleText=
950 compactText(
951 clone.textContent
952 );
953
954 if(!titleText){
955 return;
956 }
957
958 var numberNode=
959 number.cloneNode(true);
960
961 var actionNode=
962 action.cloneNode(true);
963
964 var titleNode=
965 document.createElement(
966 "span"
967 );
968
969 titleNode.className=
970 "sn-area-label-title";
971
972 titleNode.textContent=
973 titleText;
974
975 while(label.firstChild){
976 label.removeChild(
977 label.firstChild
978 );
979 }
980
981 label.appendChild(
982 numberNode
983 );
984
985 label.appendChild(
986 titleNode
987 );
988
989 label.appendChild(
990 actionNode
991 );
992
993 label.setAttribute(
994 "data-sn-three-line",
995 "1"
996 );
997
998 var head=
999 label.closest(
1000 ".arsn-area-head"
1001 );
1002
1003 if(head){
1004 head.style.setProperty(
1005 "width",
1006 "100%",
1007 "important"
1008 );
1009
1010 head.style.setProperty(
1011 "max-width",
1012 "100%",
1013 "important"
1014 );
1015
1016 head.style.setProperty(
1017 "box-sizing",
1018 "border-box",
1019 "important"
1020 );
1021 }
1022 });
1023 }
1024
1025 /* =======================================================
1026 PLACEHOLDER BADGE
1027 ======================================================= */
1028
1029 function applyPlaceholderBadge(){
1030 if(!PLACEHOLDER)return;
1031
1032 if(
1033 document.querySelector(
1034 ".sn-coming-soon-badge"
1035 )
1036 ){
1037 return;
1038 }
1039
1040 var title=
1041 document.querySelector(
1042 "#document-title"
1043 )||
1044 document.querySelector(
1045 "h1"
1046 );
1047
1048 if(!title)return;
1049
1050 var badge=
1051 document.createElement(
1052 "span"
1053 );
1054
1055 badge.className=
1056 "sn-coming-soon-badge";
1057
1058 badge.textContent=
1059 PLACEHOLDER_LABEL;
1060
1061 badge.setAttribute(
1062 "aria-label",
1063 PLACEHOLDER_LABEL
1064 );
1065
1066 title.appendChild(
1067 badge
1068 );
1069 }
1070
1071 /* =======================================================
1072 DETAIL PAGE OWN-ACCENT PROPAGATION
1073 ======================================================= */
1074
1075 function parseRGB(value){
1076 var match=String(value||"").match(
1077 /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i
1078 );
1079
1080 if(!match)return null;
1081
1082 return [
1083 Number(match[1]),
1084 Number(match[2]),
1085 Number(match[3])
1086 ];
1087 }
1088
1089 function distance(a,b){
1090 return Math.sqrt(
1091 Math.pow(a[0]-b[0],2)+
1092 Math.pow(a[1]-b[1],2)+
1093 Math.pow(a[2]-b[2],2)
1094 );
1095 }
1096
1097 function paletteMatch(cssColor){
1098 var rgb=parseRGB(cssColor);
1099
1100 if(!rgb)return null;
1101
1102 var palette=[
1103 {hex:"#21b6d7",rgb:[33,182,215]},
1104 {hex:"#e94b13",rgb:[233,75,19]},
1105 {hex:"#f0aa00",rgb:[240,170,0]},
1106 {hex:"#38b76a",rgb:[56,183,106]}
1107 ];
1108
1109 var best=null;
1110 var bestDistance=Infinity;
1111
1112 palette.forEach(function(item){
1113 var d=distance(rgb,item.rgb);
1114
1115 if(d<bestDistance){
1116 best=item;
1117 bestDistance=d;
1118 }
1119 });
1120
1121 return bestDistance<=30
1122 ?best
1123 :null;
1124 }
1125
1126 function propagateDetailAccents(){
1127 if(PAGE_KIND!=="detail")return;
1128
1129 Array.from(
1130 root.querySelectorAll(
1131 ".arsn-call,.dmp-call,.ido-call,.pp-call,"+
1132 ".arsn-source,.dmp-source,.ido-source,.pp-source"
1133 )
1134 ).forEach(function(el){
1135 if(!visible(el))return;
1136
1137 var style=getComputedStyle(el);
1138
1139 if(
1140 num(style.borderTopWidth)>=2
1141 ){
1142 var match=
1143 paletteMatch(
1144 style.borderTopColor
1145 );
1146
1147 if(match){
1148 el.style.setProperty(
1149 "border-left",
1150 "4px solid "+match.hex,
1151 "important"
1152 );
1153 }
1154 }
1155 });
1156
1157 // Warning families: explicit safety override.
1158 Array.from(
1159 root.querySelectorAll(
1160 ".arsn-warn,.dmp-warn,.ido-warn,.pp-warn,"+
1161 ".warn,.warning,.warningmessage,.errormessage"
1162 )
1163 ).forEach(function(el){
1164 if(!visible(el))return;
1165
1166 el.style.setProperty(
1167 "border-left",
1168 "4px solid #e94b13",
1169 "important"
1170 );
1171 });
1172
1173 // Info families: explicit orientation override.
1174 Array.from(
1175 root.querySelectorAll(
1176 ".arsn-info,.dmp-info,.ido-info,.pp-info,.infomessage"
1177 )
1178 ).forEach(function(el){
1179 if(!visible(el))return;
1180
1181 el.style.setProperty(
1182 "border-left",
1183 "4px solid #21b6d7",
1184 "important"
1185 );
1186 });
1187 }
1188
1189 /* =======================================================
1190 OVERVIEW SEMANTIC THEME PALETTE
1191 ======================================================= */
1192
1193 function smallestThemeHeaders(){
1194 // Phase overview rule:
1195 // only explicit three-line area-label blocks carry semantic colour.
1196 // Ordinary h4 and focus-card headings stay neutral.
1197 return Array.from(
1198 root.querySelectorAll(
1199 ".arsn-area-label"
1200 )
1201 ).filter(function(el){
1202 return (
1203 visible(el)&&
1204 !!themeFor(
1205 el.textContent
1206 )
1207 );
1208 });
1209 }
1210
1211 function findOverviewCard(header){
1212 var node=header.parentElement;
1213 var candidates=[];
1214
1215 while(node&&node!==root){
1216 var rect=node.getBoundingClientRect();
1217 var style=getComputedStyle(node);
1218
1219 var border=
1220 num(style.borderTopWidth)+
1221 num(style.borderRightWidth)+
1222 num(style.borderBottomWidth)+
1223 num(style.borderLeftWidth);
1224
1225 if(
1226 rect.width>=220&&
1227 rect.width<=800&&
1228 rect.height>=120&&
1229 border>=1
1230 ){
1231 candidates.push(node);
1232 }
1233
1234 node=node.parentElement;
1235 }
1236
1237 if(!candidates.length)return null;
1238
1239 candidates.sort(function(a,b){
1240 return (
1241 b.getBoundingClientRect().height-
1242 a.getBoundingClientRect().height
1243 );
1244 });
1245
1246 return candidates[0];
1247 }
1248
1249 function rowCandidates(link,card){
1250 var result=[];
1251 var cardRect=
1252 card.getBoundingClientRect();
1253
1254 var node=link;
1255
1256 while(node&&node!==card){
1257 if(visible(node)){
1258 var rect=
1259 node.getBoundingClientRect();
1260
1261 if(
1262 rect.height<=105&&
1263 rect.width>=
1264 cardRect.width*.50&&
1265 rect.width<=
1266 cardRect.width*1.03
1267 ){
1268 result.push(node);
1269 }
1270 }
1271
1272 node=node.parentElement;
1273 }
1274
1275 return result;
1276 }
1277
1278 function chooseOuterRow(
1279 candidates,
1280 link
1281 ){
1282 if(!candidates.length){
1283 return link;
1284 }
1285
1286 var bordered=
1287 candidates.filter(function(el){
1288 return (
1289 num(
1290 getComputedStyle(el)
1291 .borderLeftWidth
1292 )>=1
1293 );
1294 });
1295
1296 var pool=
1297 bordered.length
1298 ?bordered
1299 :candidates;
1300
1301 pool.sort(function(a,b){
1302 var ar=
1303 a.getBoundingClientRect();
1304
1305 var br=
1306 b.getBoundingClientRect();
1307
1308 return (
1309 ar.left-br.left||
1310 br.width-ar.width
1311 );
1312 });
1313
1314 return pool[0]||link;
1315 }
1316
1317 function applyOverviewPalette(){
1318 if(PAGE_KIND!=="overview"){
1319 return [];
1320 }
1321
1322 var headers=
1323 smallestThemeHeaders()
1324 .map(function(el){
1325 return {
1326 el:el,
1327 theme:
1328 themeFor(
1329 el.textContent
1330 ),
1331 card:
1332 findOverviewCard(
1333 el
1334 )
1335 };
1336 })
1337 .filter(function(row){
1338 return !!row.card;
1339 });
1340
1341 var unique=[];
1342 var seenHeaders=new Set();
1343
1344 headers.forEach(function(row){
1345 var key=
1346 row.theme.name+
1347 "|"+
1348 Math.round(
1349 row.card
1350 .getBoundingClientRect()
1351 .left
1352 )+
1353 "|"+
1354 Math.round(
1355 row.el
1356 .getBoundingClientRect()
1357 .top
1358 );
1359
1360 if(!seenHeaders.has(key)){
1361 seenHeaders.add(key);
1362 unique.push(row);
1363 }
1364 });
1365
1366 unique.forEach(function(row){
1367 var headerRect=
1368 row.el
1369 .getBoundingClientRect();
1370
1371 row.el.style.setProperty(
1372 "background",
1373 row.theme.bg,
1374 "important"
1375 );
1376
1377 row.el.style.setProperty(
1378 "color",
1379 row.theme.text,
1380 "important"
1381 );
1382
1383 row.el.style.setProperty(
1384 "text-align",
1385 "left",
1386 "important"
1387 );
1388
1389 row.el.style.setProperty(
1390 "word-spacing",
1391 "normal",
1392 "important"
1393 );
1394
1395 var later=
1396 unique
1397 .filter(function(other){
1398 return (
1399 other.card===row.card&&
1400 other.el
1401 .getBoundingClientRect()
1402 .top>
1403 headerRect.top+2
1404 );
1405 })
1406 .sort(function(a,b){
1407 return (
1408 a.el
1409 .getBoundingClientRect()
1410 .top-
1411 b.el
1412 .getBoundingClientRect()
1413 .top
1414 );
1415 });
1416
1417 var stopTop=
1418 later.length
1419 ?later[0].el
1420 .getBoundingClientRect()
1421 .top
1422 :Infinity;
1423
1424 Array.from(
1425 row.card.querySelectorAll("a")
1426 ).forEach(function(link){
1427 if(!visible(link))return;
1428
1429 var rect=
1430 link.getBoundingClientRect();
1431
1432 if(
1433 rect.top<=
1434 headerRect.bottom-2||
1435 rect.top>=
1436 stopTop-2
1437 ){
1438 return;
1439 }
1440
1441 var candidates=
1442 rowCandidates(
1443 link,
1444 row.card
1445 );
1446
1447 var target=
1448 chooseOuterRow(
1449 candidates,
1450 link
1451 );
1452
1453 candidates.forEach(function(el){
1454 el.style.setProperty(
1455 "border-left",
1456 "0 solid transparent",
1457 "important"
1458 );
1459 });
1460
1461 target.style.setProperty(
1462 "border-left",
1463 "3px solid "+
1464 row.theme.accent,
1465 "important"
1466 );
1467
1468 target.style.setProperty(
1469 "box-sizing",
1470 "border-box",
1471 "important"
1472 );
1473 });
1474 });
1475
1476 return unique;
1477 }
1478
1479 /* =======================================================
1480 OVERVIEW CARD HEIGHT + FIRST THEMATIC ROW
1481 ======================================================= */
1482
1483 function alignOverviewCards(headers){
1484 if(
1485 PAGE_KIND!=="overview"||
1486 window.innerWidth<=MOBILE_MAX
1487 ){
1488 return;
1489 }
1490
1491 var cards=[];
1492 var seen=new Set();
1493
1494 headers.forEach(function(row){
1495 if(!seen.has(row.card)){
1496 seen.add(row.card);
1497 cards.push(row.card);
1498 }
1499 });
1500
1501 if(cards.length<2){
1502 return;
1503 }
1504
1505 // Group cards by actual top position.
1506 var groups=[];
1507
1508 cards.forEach(function(card){
1509 var top=
1510 card.getBoundingClientRect().top;
1511
1512 var group=null;
1513
1514 for(var i=0;i<groups.length;i++){
1515 if(
1516 Math.abs(
1517 groups[i].top-top
1518 )<=ROW_TOLERANCE
1519 ){
1520 group=groups[i];
1521 break;
1522 }
1523 }
1524
1525 if(!group){
1526 group={
1527 top:top,
1528 cards:[]
1529 };
1530 groups.push(group);
1531 }
1532
1533 group.cards.push(card);
1534 });
1535
1536 groups.forEach(function(group){
1537 if(group.cards.length<2){
1538 return;
1539 }
1540
1541 var firstHeaders=
1542 group.cards.map(function(card){
1543 var candidates=
1544 headers
1545 .filter(function(row){
1546 return row.card===card;
1547 })
1548 .sort(function(a,b){
1549 return (
1550 a.el
1551 .getBoundingClientRect()
1552 .top-
1553 b.el
1554 .getBoundingClientRect()
1555 .top
1556 );
1557 });
1558
1559 return candidates.length
1560 ?candidates[0]
1561 :null;
1562 });
1563
1564 if(
1565 !firstHeaders.some(function(row){
1566 return !row;
1567 })
1568 ){
1569 var targetTop=
1570 Math.max.apply(
1571 Math,
1572 firstHeaders.map(function(row){
1573 return (
1574 row.el
1575 .getBoundingClientRect()
1576 .top-
1577 row.card
1578 .getBoundingClientRect()
1579 .top
1580 );
1581 })
1582 );
1583
1584 firstHeaders.forEach(function(row){
1585 var relativeTop=
1586 row.el
1587 .getBoundingClientRect()
1588 .top-
1589 row.card
1590 .getBoundingClientRect()
1591 .top;
1592
1593 var delta=
1594 targetTop-relativeTop;
1595
1596 if(delta>1){
1597 saveStyle(
1598 row.el,
1599 originalMargin,
1600 "margin-top"
1601 );
1602
1603 var current=
1604 num(
1605 getComputedStyle(
1606 row.el
1607 ).marginTop
1608 );
1609
1610 row.el.style.setProperty(
1611 "margin-top",
1612 (
1613 current+delta
1614 )+"px"
1615 );
1616
1617 row.el.setAttribute(
1618 "data-sn-master-first-row",
1619 "1"
1620 );
1621
1622 managedMargin.add(
1623 row.el
1624 );
1625 }
1626 });
1627 }
1628
1629 var maxHeight=0;
1630
1631 group.cards.forEach(function(card){
1632 maxHeight=
1633 Math.max(
1634 maxHeight,
1635 card
1636 .getBoundingClientRect()
1637 .height
1638 );
1639 });
1640
1641 maxHeight=
1642 Math.ceil(maxHeight);
1643
1644 group.cards.forEach(function(card){
1645 saveStyle(
1646 card,
1647 originalHeight,
1648 "min-height"
1649 );
1650
1651 card.style.setProperty(
1652 "min-height",
1653 maxHeight+"px"
1654 );
1655
1656 card.setAttribute(
1657 "data-sn-master-equal-height",
1658 "1"
1659 );
1660
1661 managedHeight.add(
1662 card
1663 );
1664 });
1665 });
1666 }
1667
1668 /* =======================================================
1669 DETAIL GRID EQUAL HEIGHT, DESKTOP ONLY
1670 ======================================================= */
1671
1672 function equaliseDetailGrids(){
1673 if(
1674 PAGE_KIND!=="detail"||
1675 window.innerWidth<=MOBILE_MAX
1676 ){
1677 return;
1678 }
1679
1680 var selectors=[
1681 ".arsn-grid",
1682 ".arsn-grid-2",
1683 ".arsn-grid-3",
1684 ".dmp-grid",
1685 ".ido-grid",
1686 ".pp-grid"
1687 ];
1688
1689 selectors.forEach(function(selector){
1690 Array.from(
1691 root.querySelectorAll(selector)
1692 ).forEach(function(grid){
1693 var children=
1694 Array.from(
1695 grid.children||[]
1696 ).filter(visible);
1697
1698 if(children.length<2){
1699 return;
1700 }
1701
1702 var groups=[];
1703
1704 children.forEach(function(child){
1705 var top=
1706 child
1707 .getBoundingClientRect()
1708 .top;
1709
1710 var group=null;
1711
1712 for(var i=0;i<groups.length;i++){
1713 if(
1714 Math.abs(
1715 groups[i].top-top
1716 )<=ROW_TOLERANCE
1717 ){
1718 group=groups[i];
1719 break;
1720 }
1721 }
1722
1723 if(!group){
1724 group={
1725 top:top,
1726 items:[]
1727 };
1728 groups.push(group);
1729 }
1730
1731 group.items.push(child);
1732 });
1733
1734 groups.forEach(function(group){
1735 if(group.items.length<2){
1736 return;
1737 }
1738
1739 var maxHeight=0;
1740
1741 group.items.forEach(function(item){
1742 maxHeight=
1743 Math.max(
1744 maxHeight,
1745 item
1746 .getBoundingClientRect()
1747 .height
1748 );
1749 });
1750
1751 maxHeight=
1752 Math.ceil(maxHeight);
1753
1754 group.items.forEach(function(item){
1755 saveStyle(
1756 item,
1757 originalHeight,
1758 "min-height"
1759 );
1760
1761 item.style.setProperty(
1762 "min-height",
1763 maxHeight+"px"
1764 );
1765
1766 item.setAttribute(
1767 "data-sn-master-equal-height",
1768 "1"
1769 );
1770
1771 managedHeight.add(item);
1772 });
1773 });
1774 });
1775 });
1776 }
1777
1778 /* =======================================================
1779 RUN / RESPONSIVE SCHEDULING
1780 ======================================================= */
1781
1782 function run(){
1783 if(running)return;
1784
1785 running=true;
1786
1787 try{
1788 resetRuntime();
1789 applyPlaceholderBadge();
1790 propagateDetailAccents();
1791
1792 var headers=
1793 applyOverviewPalette();
1794
1795 makeThreeLineAreaLabels();
1796 makeFilledRedOrangeCTAsBorderless();
1797
1798 if(
1799 window.innerWidth>
1800 MOBILE_MAX
1801 ){
1802 alignOverviewCards(
1803 headers
1804 );
1805
1806 equaliseDetailGrids();
1807 }
1808 }finally{
1809 running=false;
1810 }
1811 }
1812
1813 function onResize(){
1814 if(resizeTimer){
1815 clearTimeout(
1816 resizeTimer
1817 );
1818 }
1819
1820 resizeTimer=
1821 setTimeout(
1822 function(){
1823 resizeTimer=0;
1824 run();
1825 },
1826 RESIZE_DEBOUNCE
1827 );
1828 }
1829
1830 async function waitForReady(){
1831 if(
1832 document.readyState!=="complete"
1833 ){
1834 await new Promise(function(resolve){
1835 window.addEventListener(
1836 "load",
1837 resolve,
1838 {once:true}
1839 );
1840 });
1841 }
1842
1843 if(
1844 document.fonts&&
1845 document.fonts.ready
1846 ){
1847 try{
1848 await document.fonts.ready;
1849 }catch(error){}
1850 }
1851
1852 var images=
1853 Array.from(
1854 root.querySelectorAll("img")
1855 );
1856
1857 await Promise.all(
1858 images.map(function(img){
1859 if(img.complete){
1860 return Promise.resolve();
1861 }
1862
1863 return new Promise(function(resolve){
1864 var done=function(){
1865 resolve();
1866 };
1867
1868 img.addEventListener(
1869 "load",
1870 done,
1871 {once:true}
1872 );
1873
1874 img.addEventListener(
1875 "error",
1876 done,
1877 {once:true}
1878 );
1879 });
1880 })
1881 );
1882
1883 run();
1884 }
1885
1886 window.addEventListener(
1887 "resize",
1888 onResize,
1889 {passive:true}
1890 );
1891
1892 waitForReady();
1893 })();
1894 </script>
1895
1896 <!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_END -->
1897 {{/html}}