Zum Inhalt springen

Wiki-Quellcode von Prepare

Zuletzt geändert von Veronika Kocher am Dienstag, 01 Sep. 2026 17:10
Zeige letzte Bearbeiter
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="Vorbereiten – ein künstlerisches oder Forschungsprojekt planen und aufsetzen" />
318 </div>
319 <div style="padding:18px 22px 21px 22px;">
320 <div class="arsn-eyebrow" style="color:#8a4d36;margin-bottom:6px;">PROJEKTPHASE 1 · VORBEREITEN</div>
321 <h2 style="font-size:28px;line-height:1.18;margin:0 0 9px 0;color:#2c2926;">Ich entwickle meine Projektidee – ich plane, finanziere und richte mein Projekt ein</h2>
322 <p style="font-size:15px;line-height:1.58;color:#5e5953;max-width:1080px;margin:0;">
323 Bevor die aktive Projektarbeit beginnt, kläre, wie das Projekt organisiert, finanziert und unterstützt wird, welche Materialien und Forschungsoutputs zu erwarten sind und wie Rechte, Verantwortlichkeiten, Infrastruktur und Datenmanagement von Anfang an gehandhabt werden.
324 </p>
325 </div>
326 </section>
327
328 <div class="arsn-progress">
329
330 <div class="arsn-step active">
331 <div class="arsn-step-dot"></div>
332 <div class="arsn-step-label">1 · VORBEREITEN</div>
333 <div class="arsn-step-desc">Planen & einrichten</div>
334 </div>
335
336 <div class="arsn-step">
337 <div class="arsn-step-dot"></div>
338 <div class="arsn-step-label">2 · ARBEITEN & VERWALTEN</div>
339 <div class="arsn-step-desc">Durchführen & dokumentieren</div>
340 </div>
341
342 <div class="arsn-step">
343 <div class="arsn-step-dot"></div>
344 <div class="arsn-step-label">3 · PUBLIZIEREN & TEILEN</div>
345 <div class="arsn-step-desc">Publizieren, erhalten & übergeben</div>
346 </div>
347 </div>
348
349 <section class="arsn-card" style="margin:0 0 22px 0;padding:19px 21px;background:#eaf6f9;border:1px solid #cfe8ef;border-left:5px solid #21b6d7;">
350 <div class="arsn-eyebrow" style="color:#3f6871;margin-bottom:5px;">JETZT WICHTIG</div>
351 <h3 style="font-size:22px;margin:0 0 8px 0;color:#2f4e56;">Worauf sollte ich mich jetzt konzentrieren?</h3>
352 <p style="margin:0 0 15px 0;color:#49636a;">Du musst vor dem Start nicht jedes Detail festlegen. Es braucht aber genügend gemeinsame Entscheidungen, damit das Projekt umsetzbar, verantwortungsvoll und gut weiterführbar ist.</p>
353
354 <div class="arsn-focus-grid">
355 <div class="arsn-focus-group">
356 <strong>Projekt</strong>
357 <ul>
358 <li>Was ist der Umfang des Projekts und wer ist für welche Entscheidungen verantwortlich?</li>
359 <li>Welche Fördermöglichkeiten und Förderbedingungen gelten?</li>
360 <li>Welche Daten, Materialien und Outputs werden erzeugt, gesammelt oder nachgenutzt?</li>
361 <li>Brauche ich einen Datenmanagementplan?</li>
362 </ul>
363 </div>
364
365 <div class="arsn-focus-group">
366 <strong>Rechte & Verantwortlichkeiten</strong>
367 <ul>
368 <li>Welche Urheberrechte, Genehmigungen oder Lizenzen müssen geklärt werden?</li>
369 <li>Werden personenbezogene, sensible, vertrauliche oder ethisch komplexe Materialien verwendet?</li>
370 <li>Welche Entscheidungen sollten von Beginn an dokumentiert werden?</li>
371 <li>Wer ist für gemeinsame Accounts, Zugriffe und die Übergabe verantwortlich?</li>
372 </ul>
373 </div>
374
375 <div class="arsn-focus-group">
376 <strong>Arbeitsumgebung</strong>
377 <ul>
378 <li>Wie sollen Dateien und Ordner organisiert und benannt werden?</li>
379 <li>Wo werden Materialien gespeichert und gesichert?</li>
380 <li>Wer soll Zugriff haben?</li>
381 <li>Welche Infrastruktur, Services und Tools sind geeignet?</li>
382 </ul>
383 </div>
384 </div>
385 </section>
386
387 <section style="margin:0 0 28px 0;">
388 <div class="arsn-eyebrow" style="color:#8a4d36;margin-bottom:5px;">AM ENDE DIESER PHASE</div>
389 <h3 style="font-size:21px;margin:0 0 10px 0;color:#35312d;">Du solltest eine tragfähige Projektstruktur haben</h3>
390 <div class="arsn-outcome-grid">
391 <div class="arsn-outcome">einen klaren Projektumfang und benannte Verantwortlichkeiten</div>
392 <div class="arsn-outcome">einen grundlegenden Plan für Daten, Materialien und erwartete Outputs</div>
393 <div class="arsn-outcome">zentrale Fragen zu Rechten, Ethik und Schutzbedarf identifiziert</div>
394 <div class="arsn-outcome">vereinbarte Regelungen für Speicherung, Backup, Zugriff und Zusammenarbeit</div>
395 </div>
396 </section>
397
398 <div style="margin:0 0 15px 0;">
399 <div class="arsn-eyebrow" style="color:#8a4d36;margin-bottom:4px;">IN DIESER PHASE</div>
400 <h3 style="font-size:24px;margin:0 0 5px 0;color:#35312d;">Vier Bereiche, um dein Projekt startklar zu machen</h3>
401 <p style="margin:0;color:#6a655e;">Beginne mit dem Bereich, der zu dem passt, was du jetzt entscheiden oder einrichten musst.</p>
402 </div>
403
404 <div class="arsn-area-grid" style="margin-bottom:30px;">
405 <section class="arsn-area" style="border-top:4px solid #21b6d7;">
406 <div class="arsn-area-head">
407 <div class="arsn-area-label" style="background:#eaf6f9;color:#355f69;"><span class="arsn-area-number">01</span> HIER STARTEN <span class="arsn-area-action">· Orientieren</span></div>
408 <h4>Orientiere dich und wähle den passenden Planungsumfang für dein Projekt</h4>
409 <p>Nutze diese Seiten, wenn du gerade startest, unsicher bist, welche Themen relevant sind, oder für ein kleineres Projekt eine praktikable Grundstruktur brauchst.</p>
410 </div>
411 <div class="arsn-area-body">
412 <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;">Erste Schritte</a>
413 <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;">Schnellstart für kleine Projekte</a>
414 </div>
415 </section>
416
417 <section class="arsn-area" style="border-top:4px solid #e94b13;">
418 <div class="arsn-area-head">
419 <div class="arsn-area-label" style="background:#f7e6dd;color:#7b4430;"><span class="arsn-area-number">02</span> PLANEN &amp; ORGANISIEREN <span class="arsn-area-action">· Entscheiden</span></div>
420 <h4>Lege fest, was das Projekt braucht und wie es organisiert wird</h4>
421 <p>Kläre vor Beginn der aktiven Arbeit Umfang, Verantwortlichkeiten, Förderbedingungen, erwartete Materialien und Outputs sowie den grundlegenden Datenmanagement-Ansatz.</p>
422 </div>
423 <div class="arsn-area-body">
424 <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;">Projektplanung &amp; Organisation</a>
425 <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;">Förderung &amp; Förderbedingungen</a>
426 <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;">Daten &amp; Forschungsoutputs bestimmen</a>
427 <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;">Datenmanagement planen</a>
428 <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;">Dateien organisieren &amp; benennen</a>
429 </div>
430 </section>
431
432 <section class="arsn-area" style="border-top:4px solid #f0aa00;">
433 <div class="arsn-area-head">
434 <div class="arsn-area-label" style="background:#fff3d5;color:#7a5b12;"><span class="arsn-area-number">03</span> SCHÜTZEN &amp; KLÄREN <span class="arsn-area-action">· Prüfen</span></div>
435 <h4>Rechte, Genehmigungen, Schutzbedarf und Verantwortlichkeiten klären</h4>
436 <p>Identifiziere rechtliche, ethische oder datenschutzbezogene Fragen früh genug, um Genehmigungen einzuholen, Vereinbarungen zu treffen und spätere unnötige Einschränkungen zu vermeiden.</p>
437 </div>
438 <div class="arsn-area-body">
439 <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;">Urheberrecht, Rechte &amp; Lizenzen</a>
440 <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;">Datenschutz &amp; Ethik</a>
441 </div>
442 </section>
443
444 <section class="arsn-area" style="border-top:4px solid #38b76a;">
445 <div class="arsn-area-head">
446 <div class="arsn-area-label" style="background:#e6f3e9;color:#3f6d4b;"><span class="arsn-area-number">04</span> INFRASTRUKTUR &amp; ZUSAMMENARBEIT EINRICHTEN <span class="arsn-area-action">· Vorbereiten</span></div>
447 <h4>Schaffe eine Arbeitsumgebung, die das Projekt tatsächlich nutzen kann</h4>
448 <p>Lege fest, wo Projektmaterialien liegen, wie sie gesichert und geschützt werden, welche Tools geeignet sind und wie Zugriff und Zusammenarbeit funktionieren.</p>
449 </div>
450 <div class="arsn-area-body">
451 <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;">Speicherung, Backup &amp; Sicherheit</a>
452 <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;">Infrastruktur, Services &amp; Tools</a>
453 <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;">Zusammenarbeit einrichten</a>
454 </div>
455 </section>
456 </div>
457
458 <section class="arsn-card" style="margin:0 0 27px 0;padding:18px 20px;background:#fcfbf8;border:1px solid #e3ded6;border-left:5px solid #e94b13;">
459 <div class="arsn-eyebrow" style="color:#8a4d36;margin-bottom:5px;">NÄCHSTE PHASE</div>
460 <h3 style="font-size:21px;margin:0 0 7px 0;color:#43332d;">Weiter zu Arbeiten &amp; Verwalten</h3>
461 <p style="margin:0 0 13px 0;color:#68564e;line-height:1.5;">Die hier getroffenen Grundentscheidungen sollen das Projekt leiten, sind aber nicht für immer unveränderlich. Während der aktiven Projektarbeit organisierst, dokumentierst, sicherst und überprüfst du, wie das Projekt tatsächlich funktioniert.</p>
462 <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;">Weiter zu Arbeiten &amp; Verwalten</a>
463 </section>
464
465 <!-- ARSN_TRAINING_WORKSHOPS_V2_START -->
466 <section class="arsn-training-workshops" data-arsn-training-workshops="v2" style="margin:27px 0 22px 0;">
467 <div style="padding:16px 18px;background:#eef8fa;border:1px solid #cfe8ef;border-left:5px solid #21b6d7;border-radius:9px;">
468 <div style="font-size:12px;font-weight:700;letter-spacing:.075em;text-transform:uppercase;color:#3f6871;margin-bottom:5px;">SCHULUNGEN &amp; WORKSHOPS</div>
469 <h3 style="font-size:20px;line-height:1.3;margin:0 0 7px;color:#35312d;text-align:left;">Schulungen, Workshops &amp; Sprechstunden</h3>
470 <p style="margin:0 0 10px;color:#5e5953;line-height:1.55;">Passende Angebote zu diesem Thema werden hier künftig automatisch aus dem zentralen Kalender angezeigt.</p>
471 <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;">IN VORBEREITUNG</span>
472 </div>
473 </section>
474 <!-- ARSN_TRAINING_WORKSHOPS_V2_END -->
475
476 <div style="margin:0 0 13px 0;">
477 <div class="arsn-eyebrow" style="color:#8a4d36;margin-bottom:4px;">NÜTZLICHE MATERIALIEN</div>
478 <h3 style="font-size:22px;margin:0 0 4px 0;color:#35312d;">Praktische Ressourcen</h3>
479 </div>
480
481 <div class="arsn-resource-grid" style="margin-bottom:27px;">
482 <div style="padding:15px 16px;background:#fcfbf8;border:1px solid #e3ded6;border-top:3px solid #21b6d7;border-radius:9px;"><strong style="color:#3a5d66;">Info-Blätter</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;">IN VORBEREITUNG</span><div style="margin-top:5px;color:#625d56;">Kurze Orientierungshilfen für häufige Fragen und Entscheidungen.</div></div>
483 <div style="padding:15px 16px;background:#fcfbf8;border:1px solid #e3ded6;border-top:3px solid #e94b13;border-radius:9px;"><strong style="color:#503a31;">Anleitungen</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;">IN VORBEREITUNG</span><div style="margin-top:5px;color:#625d56;">Schritt-für-Schritt-Anleitungen für konkrete Aufgaben und Abläufe.</div></div>
484 <div style="padding:15px 16px;background:#fcfbf8;border:1px solid #e3ded6;border-top:3px solid #38b76a;border-radius:9px;"><strong style="color:#3f6b4b;">Checklisten &amp; Vorlagen</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;">IN VORBEREITUNG</span><div style="margin-top:5px;color:#625d56;">Wiederverwendbare Hilfsmittel zum Planen, Dokumentieren und Überprüfen deiner Projektstruktur.</div></div>
485 </div>
486
487 <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 -->
488 <strong style="color:#2d5661;">Brauchst du Unterstützung bei der Orientierung?</strong>
489 <div style="margin-top:5px;color:#365e68;line-height:1.5;"><strong>Starte bei Support Kunst und Forschung</strong> für Projektentwicklung, Förderung, Anträge und die Koordination geförderter Kunst-/Forschungsprojekte. Für Rechte, Daten, IT, Finanzen, Personal, Räume oder andere Fachfragen folge der auf der Themenseite genannten zuständigen Service-Stelle.</div>
490 </aside>
491
492 <div class="arsn-tip"><strong>Tipp · Eine hilfreiche Faustregel:</strong> Plane früh, dokumentiere Entscheidungen und überprüfe sie, wenn sich das Projekt verändert. Eine einfache Projektstruktur, die tatsächlich genutzt wird, ist meist wirksamer als ein komplexer Plan, der nie aktualisiert wird.</div>
493
494 </div>
495 {{/html}}
496
497 {{html clean="false"}}
498 <!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_START -->
499
500 <style data-sn-service-navigator-master="1">
501 /* =========================================================
502 MASTER TYPOGRAPHY
503 ========================================================= */
504 #xwikicontent h1,
505 #xwikicontent h2,
506 #xwikicontent h3,
507 #xwikicontent h4,
508 #xwikicontent h5,
509 #xwikicontent h6,
510 #xwikicontent .box-title,
511 #xwikicontent [role="heading"],
512 #xwikicontent h1 a,
513 #xwikicontent h2 a,
514 #xwikicontent h3 a,
515 #xwikicontent h4 a,
516 #xwikicontent h5 a,
517 #xwikicontent h6 a,
518 #xwikicontent .box-title a,
519 #xwikicontent [role="heading"] a{
520 text-align:left!important;
521 text-justify:auto!important;
522 word-spacing:normal!important;
523 }
524
525 /* =========================================================
526 COMING SOON / IN VORBEREITUNG
527 ========================================================= */
528 .sn-coming-soon-badge{
529 display:inline-block;
530 vertical-align:middle;
531 margin-left:10px;
532 padding:4px 8px;
533 border-radius:14px;
534 border:1px solid #efd9cc;
535 background:#fff4ee;
536 color:#8a4d36;
537 font-size:11px;
538 font-weight:700;
539 letter-spacing:.055em;
540 line-height:1.2;
541 white-space:nowrap;
542 }
543
544 /* =========================================================
545 NATIVE / DETAIL CALLOUT GEOMETRY
546 Preserve existing backgrounds.
547 ========================================================= */
548 #xwikicontent .arsn-info,
549 #xwikicontent .dmp-info,
550 #xwikicontent .ido-info,
551 #xwikicontent .pp-info,
552 #xwikicontent .infomessage{
553 box-sizing:border-box!important;
554 border-left:4px solid #21b6d7!important;
555 border-radius:8px;
556 text-align:left!important;
557 word-spacing:normal!important;
558 }
559
560 #xwikicontent .arsn-warn,
561 #xwikicontent .dmp-warn,
562 #xwikicontent .ido-warn,
563 #xwikicontent .pp-warn,
564 #xwikicontent .warn,
565 #xwikicontent .warning,
566 #xwikicontent .warningmessage,
567 #xwikicontent .errormessage{
568 box-sizing:border-box!important;
569 border-left:4px solid #e94b13!important;
570 border-radius:8px;
571 text-align:left!important;
572 word-spacing:normal!important;
573 }
574
575 [data-sn-master-equal-height],
576 [data-sn-master-first-row]{
577 box-sizing:border-box;
578 }
579
580 /* =========================================================
581 FULL-WIDTH THREE-LINE NUMBER / TITLE / SUBTITLE BLOCKS
582 ========================================================= */
583 #xwikicontent .arsn-area-label[data-sn-three-line="1"]{
584 display:grid!important;
585 grid-template-columns:minmax(0,1fr)!important;
586 grid-auto-rows:auto!important;
587 width:100%!important;
588 max-width:none!important;
589 box-sizing:border-box!important;
590 justify-items:start!important;
591 align-items:start!important;
592 gap:2px!important;
593 text-align:left!important;
594 text-align-last:left!important;
595 text-justify:auto!important;
596 word-spacing:normal!important;
597 white-space:normal!important;
598 }
599 #xwikicontent .arsn-area-label[data-sn-three-line="1"] > .arsn-area-number,
600 #xwikicontent .arsn-area-label[data-sn-three-line="1"] > .sn-area-label-title,
601 #xwikicontent .arsn-area-label[data-sn-three-line="1"] > .arsn-area-action{
602 display:block!important;
603 width:100%!important;
604 margin:0!important;
605 text-align:left!important;
606 text-align-last:left!important;
607 text-justify:auto!important;
608 word-spacing:normal!important;
609 white-space:normal!important;
610 }
611 </style>
612
613 <script data-sn-service-navigator-master="1">
614 (function(){
615 "use strict";
616
617 var PAGE_KIND="overview";
618 var PLACEHOLDER=false;
619 var PLACEHOLDER_LABEL="IN VORBEREITUNG";
620
621 var MOBILE_MAX=767;
622 var ROW_TOLERANCE=6;
623 var RESIZE_DEBOUNCE=220;
624
625 var root=
626 document.getElementById("xwikicontent")||
627 document.querySelector(".xwiki-rendering-content")||
628 document.querySelector("main")||
629 document.body;
630
631 if(!root)return;
632
633 var managedHeight=new Set();
634 var managedMargin=new Set();
635 var originalHeight=new WeakMap();
636 var originalMargin=new WeakMap();
637
638 var resizeTimer=0;
639 var running=false;
640
641 var THEMES=[
642 {
643 name:"BLUE",
644 accent:"#21b6d7",
645 bg:"#eaf7fb",
646 text:"#315d68",
647 labels:[
648 "HIER STARTEN",
649 "ENTSCHEIDEN",
650 "ÜBERPRÜFEN & ANPASSEN",
651 "START HERE",
652 "DECIDE",
653 "REVIEW & ADAPT"
654 ]
655 },
656 {
657 name:"RED",
658 accent:"#e94b13",
659 bg:"#fff1ec",
660 text:"#8a4d36",
661 labels:[
662 "PLANEN & ORGANISIEREN",
663 "ORGANISIEREN & DOKUMENTIEREN",
664 "PUBLIZIEREN & PRÄSENTIEREN",
665 "PLAN & ORGANISE",
666 "PLAN & ORGANIZE",
667 "ORGANISE & DOCUMENT",
668 "ORGANIZE & DOCUMENT",
669 "PUBLISH & PRESENT"
670 ]
671 },
672 {
673 name:"YELLOW",
674 accent:"#f0aa00",
675 bg:"#fff8e7",
676 text:"#785b17",
677 labels:[
678 "SCHÜTZEN & KLÄREN",
679 "STANDARDISIEREN & IDENTIFIZIEREN",
680 "ÖFFNEN, NACHNUTZEN & AUFFINDBAR MACHEN",
681 "PROTECT & CLARIFY",
682 "STANDARDISE & IDENTIFY",
683 "STANDARDIZE & IDENTIFY",
684 "OPEN, REUSE & MAKE FINDABLE"
685 ]
686 },
687 {
688 name:"GREEN",
689 accent:"#38b76a",
690 bg:"#edf9f1",
691 text:"#3f7451",
692 labels:[
693 "INFRASTRUKTUR EINRICHTEN",
694 "INFRASTRUKTUR & ZUSAMMENARBEIT EINRICHTEN",
695 "SPEICHERN & ZUGRIFF STEUERN",
696 "REPOSITORIUM, ERHALTEN & ÜBERGEBEN",
697 "SET UP INFRASTRUCTURE",
698 "SET UP INFRASTRUCTURE & COLLABORATION",
699 "STORE & CONTROL ACCESS",
700 "REPOSITORY, PRESERVE & HAND OVER"
701 ]
702 }
703 ];
704
705 function num(value){
706 var n=parseFloat(value);
707 return Number.isFinite(n)?n:0;
708 }
709
710 function norm(value){
711 return String(value||"")
712 .replace(/\s+/g," ")
713 .trim()
714 .toUpperCase();
715 }
716
717 function visible(el){
718 if(!el||el.nodeType!==1)return false;
719
720 var style=getComputedStyle(el);
721 var rect=el.getBoundingClientRect();
722
723 return (
724 style.display!=="none"&&
725 style.visibility!=="hidden"&&
726 rect.width>20&&
727 rect.height>4
728 );
729 }
730
731 function saveStyle(el,map,property){
732 if(map.has(el))return;
733
734 map.set(el,{
735 value:el.style.getPropertyValue(property),
736 priority:el.style.getPropertyPriority(property)
737 });
738 }
739
740 function restoreStyle(el,map,property){
741 var original=map.get(el);
742
743 if(original&&original.value){
744 el.style.setProperty(
745 property,
746 original.value,
747 original.priority||""
748 );
749 }else{
750 el.style.removeProperty(property);
751 }
752 }
753
754 function resetRuntime(){
755 managedHeight.forEach(function(el){
756 restoreStyle(
757 el,
758 originalHeight,
759 "min-height"
760 );
761 el.removeAttribute(
762 "data-sn-master-equal-height"
763 );
764 });
765
766 managedMargin.forEach(function(el){
767 restoreStyle(
768 el,
769 originalMargin,
770 "margin-top"
771 );
772 el.removeAttribute(
773 "data-sn-master-first-row"
774 );
775 });
776
777 managedHeight.clear();
778 managedMargin.clear();
779 }
780
781 function themeFor(text){
782 var value=norm(text);
783
784 for(var i=0;i<THEMES.length;i++){
785 for(var j=0;j<THEMES[i].labels.length;j++){
786 var label=THEMES[i].labels[j];
787
788 if(
789 value===label||
790 value.indexOf(label+" ")===0||
791 value.indexOf(label+" -")===0||
792 value.indexOf(label+" ·")===0
793 ){
794 return THEMES[i];
795 }
796 }
797 }
798
799 return null;
800 }
801
802 /* =======================================================
803 BORDERLESS FILLED RED/ORANGE CTA BUTTONS
804 ======================================================= */
805
806 function colourDistance(a,b){
807 return Math.sqrt(
808 Math.pow(a[0]-b[0],2)+
809 Math.pow(a[1]-b[1],2)+
810 Math.pow(a[2]-b[2],2)
811 );
812 }
813
814 function makeFilledRedOrangeCTAsBorderless(){
815 var RED_ORANGE=[233,75,19];
816
817 Array.from(
818 root.querySelectorAll(
819 'a,button,[role="button"],input[type="submit"],input[type="button"]'
820 )
821 ).forEach(function(el){
822 if(!visible(el))return;
823
824 var style=getComputedStyle(el);
825 var rgb=parseRGB(style.backgroundColor);
826
827 if(!rgb)return;
828
829 if(
830 colourDistance(
831 rgb,
832 RED_ORANGE
833 )>55
834 ){
835 return;
836 }
837
838 var rect=el.getBoundingClientRect();
839
840 if(
841 rect.width<80||
842 rect.height<24
843 ){
844 return;
845 }
846
847 el.style.setProperty(
848 "border",
849 "none",
850 "important"
851 );
852
853 el.style.setProperty(
854 "border-left",
855 "none",
856 "important"
857 );
858
859 el.style.setProperty(
860 "border-top",
861 "none",
862 "important"
863 );
864
865 el.style.setProperty(
866 "border-right",
867 "none",
868 "important"
869 );
870
871 el.style.setProperty(
872 "border-bottom",
873 "none",
874 "important"
875 );
876
877 el.style.setProperty(
878 "box-shadow",
879 "none",
880 "important"
881 );
882 });
883 }
884
885 /* =======================================================
886 FULL-WIDTH THREE-LINE AREA LABELS
887 ======================================================= */
888
889 function compactText(value){
890 return String(value||"")
891 .replace(/\s+/g," ")
892 .trim();
893 }
894
895 function makeThreeLineAreaLabels(){
896 Array.from(
897 root.querySelectorAll(
898 ".arsn-area-label"
899 )
900 ).forEach(function(label){
901 if(
902 label.getAttribute(
903 "data-sn-three-line"
904 )==="1"
905 ){
906 return;
907 }
908
909 var number=
910 label.querySelector(
911 ":scope > .arsn-area-number"
912 );
913
914 var action=
915 label.querySelector(
916 ":scope > .arsn-area-action"
917 );
918
919 if(
920 !number||
921 !action
922 ){
923 return;
924 }
925
926 var clone=
927 label.cloneNode(true);
928
929 var cloneNumber=
930 clone.querySelector(
931 ":scope > .arsn-area-number"
932 );
933
934 var cloneAction=
935 clone.querySelector(
936 ":scope > .arsn-area-action"
937 );
938
939 if(cloneNumber){
940 cloneNumber.remove();
941 }
942
943 if(cloneAction){
944 cloneAction.remove();
945 }
946
947 var titleText=
948 compactText(
949 clone.textContent
950 );
951
952 if(!titleText){
953 return;
954 }
955
956 var numberNode=
957 number.cloneNode(true);
958
959 var actionNode=
960 action.cloneNode(true);
961
962 var titleNode=
963 document.createElement(
964 "span"
965 );
966
967 titleNode.className=
968 "sn-area-label-title";
969
970 titleNode.textContent=
971 titleText;
972
973 while(label.firstChild){
974 label.removeChild(
975 label.firstChild
976 );
977 }
978
979 label.appendChild(
980 numberNode
981 );
982
983 label.appendChild(
984 titleNode
985 );
986
987 label.appendChild(
988 actionNode
989 );
990
991 label.setAttribute(
992 "data-sn-three-line",
993 "1"
994 );
995
996 var head=
997 label.closest(
998 ".arsn-area-head"
999 );
1000
1001 if(head){
1002 head.style.setProperty(
1003 "width",
1004 "100%",
1005 "important"
1006 );
1007
1008 head.style.setProperty(
1009 "max-width",
1010 "100%",
1011 "important"
1012 );
1013
1014 head.style.setProperty(
1015 "box-sizing",
1016 "border-box",
1017 "important"
1018 );
1019 }
1020 });
1021 }
1022
1023 /* =======================================================
1024 PLACEHOLDER BADGE
1025 ======================================================= */
1026
1027 function applyPlaceholderBadge(){
1028 if(!PLACEHOLDER)return;
1029
1030 if(
1031 document.querySelector(
1032 ".sn-coming-soon-badge"
1033 )
1034 ){
1035 return;
1036 }
1037
1038 var title=
1039 document.querySelector(
1040 "#document-title"
1041 )||
1042 document.querySelector(
1043 "h1"
1044 );
1045
1046 if(!title)return;
1047
1048 var badge=
1049 document.createElement(
1050 "span"
1051 );
1052
1053 badge.className=
1054 "sn-coming-soon-badge";
1055
1056 badge.textContent=
1057 PLACEHOLDER_LABEL;
1058
1059 badge.setAttribute(
1060 "aria-label",
1061 PLACEHOLDER_LABEL
1062 );
1063
1064 title.appendChild(
1065 badge
1066 );
1067 }
1068
1069 /* =======================================================
1070 DETAIL PAGE OWN-ACCENT PROPAGATION
1071 ======================================================= */
1072
1073 function parseRGB(value){
1074 var match=String(value||"").match(
1075 /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i
1076 );
1077
1078 if(!match)return null;
1079
1080 return [
1081 Number(match[1]),
1082 Number(match[2]),
1083 Number(match[3])
1084 ];
1085 }
1086
1087 function distance(a,b){
1088 return Math.sqrt(
1089 Math.pow(a[0]-b[0],2)+
1090 Math.pow(a[1]-b[1],2)+
1091 Math.pow(a[2]-b[2],2)
1092 );
1093 }
1094
1095 function paletteMatch(cssColor){
1096 var rgb=parseRGB(cssColor);
1097
1098 if(!rgb)return null;
1099
1100 var palette=[
1101 {hex:"#21b6d7",rgb:[33,182,215]},
1102 {hex:"#e94b13",rgb:[233,75,19]},
1103 {hex:"#f0aa00",rgb:[240,170,0]},
1104 {hex:"#38b76a",rgb:[56,183,106]}
1105 ];
1106
1107 var best=null;
1108 var bestDistance=Infinity;
1109
1110 palette.forEach(function(item){
1111 var d=distance(rgb,item.rgb);
1112
1113 if(d<bestDistance){
1114 best=item;
1115 bestDistance=d;
1116 }
1117 });
1118
1119 return bestDistance<=30
1120 ?best
1121 :null;
1122 }
1123
1124 function propagateDetailAccents(){
1125 if(PAGE_KIND!=="detail")return;
1126
1127 Array.from(
1128 root.querySelectorAll(
1129 ".arsn-call,.dmp-call,.ido-call,.pp-call,"+
1130 ".arsn-source,.dmp-source,.ido-source,.pp-source"
1131 )
1132 ).forEach(function(el){
1133 if(!visible(el))return;
1134
1135 var style=getComputedStyle(el);
1136
1137 if(
1138 num(style.borderTopWidth)>=2
1139 ){
1140 var match=
1141 paletteMatch(
1142 style.borderTopColor
1143 );
1144
1145 if(match){
1146 el.style.setProperty(
1147 "border-left",
1148 "4px solid "+match.hex,
1149 "important"
1150 );
1151 }
1152 }
1153 });
1154
1155 // Warning families: explicit safety override.
1156 Array.from(
1157 root.querySelectorAll(
1158 ".arsn-warn,.dmp-warn,.ido-warn,.pp-warn,"+
1159 ".warn,.warning,.warningmessage,.errormessage"
1160 )
1161 ).forEach(function(el){
1162 if(!visible(el))return;
1163
1164 el.style.setProperty(
1165 "border-left",
1166 "4px solid #e94b13",
1167 "important"
1168 );
1169 });
1170
1171 // Info families: explicit orientation override.
1172 Array.from(
1173 root.querySelectorAll(
1174 ".arsn-info,.dmp-info,.ido-info,.pp-info,.infomessage"
1175 )
1176 ).forEach(function(el){
1177 if(!visible(el))return;
1178
1179 el.style.setProperty(
1180 "border-left",
1181 "4px solid #21b6d7",
1182 "important"
1183 );
1184 });
1185 }
1186
1187 /* =======================================================
1188 OVERVIEW SEMANTIC THEME PALETTE
1189 ======================================================= */
1190
1191 function smallestThemeHeaders(){
1192 return Array.from(
1193 root.querySelectorAll(
1194 "div,span,p,strong,h3,h4,h5,h6"
1195 )
1196 ).filter(function(el){
1197 if(!visible(el))return false;
1198 if(!themeFor(el.textContent))return false;
1199
1200 return !Array.from(
1201 el.children||[]
1202 ).some(function(child){
1203 return !!themeFor(
1204 child.textContent
1205 );
1206 });
1207 });
1208 }
1209
1210 function findOverviewCard(header){
1211 var node=header.parentElement;
1212 var candidates=[];
1213
1214 while(node&&node!==root){
1215 var rect=node.getBoundingClientRect();
1216 var style=getComputedStyle(node);
1217
1218 var border=
1219 num(style.borderTopWidth)+
1220 num(style.borderRightWidth)+
1221 num(style.borderBottomWidth)+
1222 num(style.borderLeftWidth);
1223
1224 if(
1225 rect.width>=220&&
1226 rect.width<=800&&
1227 rect.height>=120&&
1228 border>=1
1229 ){
1230 candidates.push(node);
1231 }
1232
1233 node=node.parentElement;
1234 }
1235
1236 if(!candidates.length)return null;
1237
1238 candidates.sort(function(a,b){
1239 return (
1240 b.getBoundingClientRect().height-
1241 a.getBoundingClientRect().height
1242 );
1243 });
1244
1245 return candidates[0];
1246 }
1247
1248 function rowCandidates(link,card){
1249 var result=[];
1250 var cardRect=
1251 card.getBoundingClientRect();
1252
1253 var node=link;
1254
1255 while(node&&node!==card){
1256 if(visible(node)){
1257 var rect=
1258 node.getBoundingClientRect();
1259
1260 if(
1261 rect.height<=105&&
1262 rect.width>=
1263 cardRect.width*.50&&
1264 rect.width<=
1265 cardRect.width*1.03
1266 ){
1267 result.push(node);
1268 }
1269 }
1270
1271 node=node.parentElement;
1272 }
1273
1274 return result;
1275 }
1276
1277 function chooseOuterRow(
1278 candidates,
1279 link
1280 ){
1281 if(!candidates.length){
1282 return link;
1283 }
1284
1285 var bordered=
1286 candidates.filter(function(el){
1287 return (
1288 num(
1289 getComputedStyle(el)
1290 .borderLeftWidth
1291 )>=1
1292 );
1293 });
1294
1295 var pool=
1296 bordered.length
1297 ?bordered
1298 :candidates;
1299
1300 pool.sort(function(a,b){
1301 var ar=
1302 a.getBoundingClientRect();
1303
1304 var br=
1305 b.getBoundingClientRect();
1306
1307 return (
1308 ar.left-br.left||
1309 br.width-ar.width
1310 );
1311 });
1312
1313 return pool[0]||link;
1314 }
1315
1316 function applyOverviewPalette(){
1317 if(PAGE_KIND!=="overview"){
1318 return [];
1319 }
1320
1321 var headers=
1322 smallestThemeHeaders()
1323 .map(function(el){
1324 return {
1325 el:el,
1326 theme:
1327 themeFor(
1328 el.textContent
1329 ),
1330 card:
1331 findOverviewCard(
1332 el
1333 )
1334 };
1335 })
1336 .filter(function(row){
1337 return !!row.card;
1338 });
1339
1340 var unique=[];
1341 var seenHeaders=new Set();
1342
1343 headers.forEach(function(row){
1344 var key=
1345 row.theme.name+
1346 "|"+
1347 Math.round(
1348 row.card
1349 .getBoundingClientRect()
1350 .left
1351 )+
1352 "|"+
1353 Math.round(
1354 row.el
1355 .getBoundingClientRect()
1356 .top
1357 );
1358
1359 if(!seenHeaders.has(key)){
1360 seenHeaders.add(key);
1361 unique.push(row);
1362 }
1363 });
1364
1365 unique.forEach(function(row){
1366 var headerRect=
1367 row.el
1368 .getBoundingClientRect();
1369
1370 row.el.style.setProperty(
1371 "background",
1372 row.theme.bg,
1373 "important"
1374 );
1375
1376 row.el.style.setProperty(
1377 "color",
1378 row.theme.text,
1379 "important"
1380 );
1381
1382 row.el.style.setProperty(
1383 "text-align",
1384 "left",
1385 "important"
1386 );
1387
1388 row.el.style.setProperty(
1389 "word-spacing",
1390 "normal",
1391 "important"
1392 );
1393
1394 var later=
1395 unique
1396 .filter(function(other){
1397 return (
1398 other.card===row.card&&
1399 other.el
1400 .getBoundingClientRect()
1401 .top>
1402 headerRect.top+2
1403 );
1404 })
1405 .sort(function(a,b){
1406 return (
1407 a.el
1408 .getBoundingClientRect()
1409 .top-
1410 b.el
1411 .getBoundingClientRect()
1412 .top
1413 );
1414 });
1415
1416 var stopTop=
1417 later.length
1418 ?later[0].el
1419 .getBoundingClientRect()
1420 .top
1421 :Infinity;
1422
1423 Array.from(
1424 row.card.querySelectorAll("a")
1425 ).forEach(function(link){
1426 if(!visible(link))return;
1427
1428 var rect=
1429 link.getBoundingClientRect();
1430
1431 if(
1432 rect.top<=
1433 headerRect.bottom-2||
1434 rect.top>=
1435 stopTop-2
1436 ){
1437 return;
1438 }
1439
1440 var candidates=
1441 rowCandidates(
1442 link,
1443 row.card
1444 );
1445
1446 var target=
1447 chooseOuterRow(
1448 candidates,
1449 link
1450 );
1451
1452 candidates.forEach(function(el){
1453 el.style.setProperty(
1454 "border-left",
1455 "0 solid transparent",
1456 "important"
1457 );
1458 });
1459
1460 target.style.setProperty(
1461 "border-left",
1462 "3px solid "+
1463 row.theme.accent,
1464 "important"
1465 );
1466
1467 target.style.setProperty(
1468 "box-sizing",
1469 "border-box",
1470 "important"
1471 );
1472 });
1473 });
1474
1475 return unique;
1476 }
1477
1478 /* =======================================================
1479 OVERVIEW CARD HEIGHT + FIRST THEMATIC ROW
1480 ======================================================= */
1481
1482 function alignOverviewCards(headers){
1483 if(
1484 PAGE_KIND!=="overview"||
1485 window.innerWidth<=MOBILE_MAX
1486 ){
1487 return;
1488 }
1489
1490 var cards=[];
1491 var seen=new Set();
1492
1493 headers.forEach(function(row){
1494 if(!seen.has(row.card)){
1495 seen.add(row.card);
1496 cards.push(row.card);
1497 }
1498 });
1499
1500 if(cards.length<2){
1501 return;
1502 }
1503
1504 // Group cards by actual top position.
1505 var groups=[];
1506
1507 cards.forEach(function(card){
1508 var top=
1509 card.getBoundingClientRect().top;
1510
1511 var group=null;
1512
1513 for(var i=0;i<groups.length;i++){
1514 if(
1515 Math.abs(
1516 groups[i].top-top
1517 )<=ROW_TOLERANCE
1518 ){
1519 group=groups[i];
1520 break;
1521 }
1522 }
1523
1524 if(!group){
1525 group={
1526 top:top,
1527 cards:[]
1528 };
1529 groups.push(group);
1530 }
1531
1532 group.cards.push(card);
1533 });
1534
1535 groups.forEach(function(group){
1536 if(group.cards.length<2){
1537 return;
1538 }
1539
1540 var firstHeaders=
1541 group.cards.map(function(card){
1542 var candidates=
1543 headers
1544 .filter(function(row){
1545 return row.card===card;
1546 })
1547 .sort(function(a,b){
1548 return (
1549 a.el
1550 .getBoundingClientRect()
1551 .top-
1552 b.el
1553 .getBoundingClientRect()
1554 .top
1555 );
1556 });
1557
1558 return candidates.length
1559 ?candidates[0]
1560 :null;
1561 });
1562
1563 if(
1564 !firstHeaders.some(function(row){
1565 return !row;
1566 })
1567 ){
1568 var targetTop=
1569 Math.max.apply(
1570 Math,
1571 firstHeaders.map(function(row){
1572 return (
1573 row.el
1574 .getBoundingClientRect()
1575 .top-
1576 row.card
1577 .getBoundingClientRect()
1578 .top
1579 );
1580 })
1581 );
1582
1583 firstHeaders.forEach(function(row){
1584 var relativeTop=
1585 row.el
1586 .getBoundingClientRect()
1587 .top-
1588 row.card
1589 .getBoundingClientRect()
1590 .top;
1591
1592 var delta=
1593 targetTop-relativeTop;
1594
1595 if(delta>1){
1596 saveStyle(
1597 row.el,
1598 originalMargin,
1599 "margin-top"
1600 );
1601
1602 var current=
1603 num(
1604 getComputedStyle(
1605 row.el
1606 ).marginTop
1607 );
1608
1609 row.el.style.setProperty(
1610 "margin-top",
1611 (
1612 current+delta
1613 )+"px"
1614 );
1615
1616 row.el.setAttribute(
1617 "data-sn-master-first-row",
1618 "1"
1619 );
1620
1621 managedMargin.add(
1622 row.el
1623 );
1624 }
1625 });
1626 }
1627
1628 var maxHeight=0;
1629
1630 group.cards.forEach(function(card){
1631 maxHeight=
1632 Math.max(
1633 maxHeight,
1634 card
1635 .getBoundingClientRect()
1636 .height
1637 );
1638 });
1639
1640 maxHeight=
1641 Math.ceil(maxHeight);
1642
1643 group.cards.forEach(function(card){
1644 saveStyle(
1645 card,
1646 originalHeight,
1647 "min-height"
1648 );
1649
1650 card.style.setProperty(
1651 "min-height",
1652 maxHeight+"px"
1653 );
1654
1655 card.setAttribute(
1656 "data-sn-master-equal-height",
1657 "1"
1658 );
1659
1660 managedHeight.add(
1661 card
1662 );
1663 });
1664 });
1665 }
1666
1667 /* =======================================================
1668 DETAIL GRID EQUAL HEIGHT, DESKTOP ONLY
1669 ======================================================= */
1670
1671 function equaliseDetailGrids(){
1672 if(
1673 PAGE_KIND!=="detail"||
1674 window.innerWidth<=MOBILE_MAX
1675 ){
1676 return;
1677 }
1678
1679 var selectors=[
1680 ".arsn-grid",
1681 ".arsn-grid-2",
1682 ".arsn-grid-3",
1683 ".dmp-grid",
1684 ".ido-grid",
1685 ".pp-grid"
1686 ];
1687
1688 selectors.forEach(function(selector){
1689 Array.from(
1690 root.querySelectorAll(selector)
1691 ).forEach(function(grid){
1692 var children=
1693 Array.from(
1694 grid.children||[]
1695 ).filter(visible);
1696
1697 if(children.length<2){
1698 return;
1699 }
1700
1701 var groups=[];
1702
1703 children.forEach(function(child){
1704 var top=
1705 child
1706 .getBoundingClientRect()
1707 .top;
1708
1709 var group=null;
1710
1711 for(var i=0;i<groups.length;i++){
1712 if(
1713 Math.abs(
1714 groups[i].top-top
1715 )<=ROW_TOLERANCE
1716 ){
1717 group=groups[i];
1718 break;
1719 }
1720 }
1721
1722 if(!group){
1723 group={
1724 top:top,
1725 items:[]
1726 };
1727 groups.push(group);
1728 }
1729
1730 group.items.push(child);
1731 });
1732
1733 groups.forEach(function(group){
1734 if(group.items.length<2){
1735 return;
1736 }
1737
1738 var maxHeight=0;
1739
1740 group.items.forEach(function(item){
1741 maxHeight=
1742 Math.max(
1743 maxHeight,
1744 item
1745 .getBoundingClientRect()
1746 .height
1747 );
1748 });
1749
1750 maxHeight=
1751 Math.ceil(maxHeight);
1752
1753 group.items.forEach(function(item){
1754 saveStyle(
1755 item,
1756 originalHeight,
1757 "min-height"
1758 );
1759
1760 item.style.setProperty(
1761 "min-height",
1762 maxHeight+"px"
1763 );
1764
1765 item.setAttribute(
1766 "data-sn-master-equal-height",
1767 "1"
1768 );
1769
1770 managedHeight.add(item);
1771 });
1772 });
1773 });
1774 });
1775 }
1776
1777 /* =======================================================
1778 RUN / RESPONSIVE SCHEDULING
1779 ======================================================= */
1780
1781 function run(){
1782 if(running)return;
1783
1784 running=true;
1785
1786 try{
1787 resetRuntime();
1788 applyPlaceholderBadge();
1789 propagateDetailAccents();
1790
1791 var headers=
1792 applyOverviewPalette();
1793
1794 makeThreeLineAreaLabels();
1795 makeFilledRedOrangeCTAsBorderless();
1796
1797 if(
1798 window.innerWidth>
1799 MOBILE_MAX
1800 ){
1801 alignOverviewCards(
1802 headers
1803 );
1804
1805 equaliseDetailGrids();
1806 }
1807 }finally{
1808 running=false;
1809 }
1810 }
1811
1812 function onResize(){
1813 if(resizeTimer){
1814 clearTimeout(
1815 resizeTimer
1816 );
1817 }
1818
1819 resizeTimer=
1820 setTimeout(
1821 function(){
1822 resizeTimer=0;
1823 run();
1824 },
1825 RESIZE_DEBOUNCE
1826 );
1827 }
1828
1829 async function waitForReady(){
1830 if(
1831 document.readyState!=="complete"
1832 ){
1833 await new Promise(function(resolve){
1834 window.addEventListener(
1835 "load",
1836 resolve,
1837 {once:true}
1838 );
1839 });
1840 }
1841
1842 if(
1843 document.fonts&&
1844 document.fonts.ready
1845 ){
1846 try{
1847 await document.fonts.ready;
1848 }catch(error){}
1849 }
1850
1851 var images=
1852 Array.from(
1853 root.querySelectorAll("img")
1854 );
1855
1856 await Promise.all(
1857 images.map(function(img){
1858 if(img.complete){
1859 return Promise.resolve();
1860 }
1861
1862 return new Promise(function(resolve){
1863 var done=function(){
1864 resolve();
1865 };
1866
1867 img.addEventListener(
1868 "load",
1869 done,
1870 {once:true}
1871 );
1872
1873 img.addEventListener(
1874 "error",
1875 done,
1876 {once:true}
1877 );
1878 });
1879 })
1880 );
1881
1882 run();
1883 }
1884
1885 window.addEventListener(
1886 "resize",
1887 onResize,
1888 {passive:true}
1889 );
1890
1891 waitForReady();
1892 })();
1893 </script>
1894
1895 <!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_END -->
1896 {{/html}}