Skip to Content

Wiki source code of Prepare

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