Skip to Content

Wiki source code of Service Navigator

Version 22.15 by Veronika Kocher on Thursday, 03 Sep 2026 10:09
Show last authors
1 {{html}}
2 <div style="max-width:1400px;margin:0 auto;">
3
4 <p style="margin:0 0 8px 0;">
5 Artistic and administrative services at the University support many different needs — from research projects and teaching to employment, IT, rooms, procurement, legal questions, international mobility and library services.
6 </p>
7
8 <p style="margin:0 0 22px 0;">
9 The <strong>Service Navigator</strong> is organised around what you need to do, not around the university's organisational chart.
10 </p>
11
12 <section style="margin:0 0 28px 0;padding:16px 18px;border:1px solid #e3ded6;border-radius:10px;background:#fcfbf8;box-shadow:0 1px 2px rgba(0,0,0,.035);">
13 <h2 style="font-size:20px;margin:0 0 6px 0;color:#35312d;">Find a service</h2>
14 <p style="margin:0 0 12px 0;color:#6a655e;">
15 Search by task, topic or question — for example <em>room, invoice, disability, DOI, event, employment, data protection</em> or <em>library</em>.
16 </p>
17
18 <form action="https://xwiki.uni-ak.ac.at/bin/view/Main/SolrSearch" method="get" role="search" style="margin:0;">
19 <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
20 <label for="service-navigator-search" style="position:absolute;left:-10000px;">Search services</label>
21 <input
22 id="service-navigator-search"
23 name="text"
24 type="search"
25 placeholder="What do you need help with?"
26 autocomplete="off"
27 style="flex:1 1 520px;min-width:260px;padding:11px 13px;border:1px solid #cfc8bd;border-radius:6px;background:#fffdf9;font-size:16px;"
28 />
29 <button type="submit" class="btn btn-primary" style="padding:11px 22px;">Search</button>
30 </div>
31 </form>
32 </section>
33
34 <h2 style="font-size:24px;margin:0 0 16px 0;color:#35312d;">Find services by what you need to do</h2>
35
36 <div style="
37 display:grid;
38 grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
39 gap:18px;
40 align-items:stretch;
41 ">
42
43 <!-- 1. PEOPLE, EQUALITY, HEALTH & WORK -->
44 <section style="display:flex;flex-direction:column;min-height:320px;border:1px solid #e3ded6;border-left:6px solid #f0aa00;border-radius:12px;background:#fcfbf8;box-shadow:0 1px 2px rgba(0,0,0,.035);overflow:hidden;">
45 <div style="padding:18px 18px 14px 18px;flex:1;">
46 <div style="display:inline-block;font-size:12px;font-weight:700;letter-spacing:.065em;color:#4f4a44;margin-bottom:8px;padding:4px 7px;background:#f3efe8;border-radius:4px;">PEOPLE &amp; WORK</div>
47 <h3 style="font-size:21px;line-height:1.25;margin:0 0 8px 0;color:#252321;">People, Equality, Health &amp; Work</h3>
48 <p style="color:#6a655e;margin:0 0 14px 0;">Employment, equality, diversity, disability, accessibility and health.</p>
49
50 <div style="font-weight:700;margin-bottom:6px;">I need to…</div>
51 <ul style="margin:0 0 14px 18px;padding:0;">
52 <li>ask about employment, working conditions or labour law</li>
53 <li>get support concerning discrimination, equality or diversity</li>
54 <li>address disability, accessibility or health at work</li>
55 </ul>
56
57 <div style="font-size:12px;color:#6a655e;line-height:1.45;">
58 HR · staff development · equal treatment · diversity · disability · accessibility · health · labour law
59 </div>
60 </div>
61 <div style="padding:0 18px 18px 18px;">
62 <span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore People &amp; Work</span>
63 </div>
64 </section>
65
66 <!-- 2. IT & DIGITAL SERVICES -->
67 <section style="display:flex;flex-direction:column;min-height:320px;border:1px solid #e3ded6;border-left:6px solid #38b76a;border-radius:12px;background:#fcfbf8;box-shadow:0 1px 2px rgba(0,0,0,.035);overflow:hidden;">
68 <div style="padding:18px 18px 14px 18px;flex:1;">
69 <div style="display:inline-block;font-size:12px;font-weight:700;letter-spacing:.065em;color:#4f4a44;margin-bottom:8px;padding:4px 7px;background:#f3efe8;border-radius:4px;">IT &amp; DIGITAL</div>
70 <h3 style="font-size:21px;line-height:1.25;margin:0 0 8px 0;color:#252321;">IT &amp; Digital Services</h3>
71 <p style="color:#6a655e;margin:0 0 14px 0;">Accounts, systems, software, digital infrastructure and IT support.</p>
72
73 <div style="font-weight:700;margin-bottom:6px;">I need to…</div>
74 <ul style="margin:0 0 14px 18px;padding:0;">
75 <li>access an account, system or digital service</li>
76 <li>solve an IT problem</li>
77 <li>plan or coordinate a digital or IT project</li>
78 </ul>
79
80 <div style="font-size:12px;color:#6a655e;line-height:1.45;">
81 Accounts · IT support · software · digital tools · infrastructure · IT project coordination
82 </div>
83 </div>
84 <div style="padding:0 18px 18px 18px;">
85 <span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore IT &amp; Digital Services</span>
86 </div>
87 </section>
88
89 <!-- 3. ROOMS, BUILDINGS & CAMPUS -->
90 <section style="display:flex;flex-direction:column;min-height:320px;border:1px solid #e3ded6;border-left:6px solid #38b76a;border-radius:12px;background:#fcfbf8;box-shadow:0 1px 2px rgba(0,0,0,.035);overflow:hidden;">
91 <div style="padding:18px 18px 14px 18px;flex:1;">
92 <div style="display:inline-block;font-size:12px;font-weight:700;letter-spacing:.065em;color:#4f4a44;margin-bottom:8px;padding:4px 7px;background:#f3efe8;border-radius:4px;">CAMPUS</div>
93 <h3 style="font-size:21px;line-height:1.25;margin:0 0 8px 0;color:#252321;">Rooms, Buildings &amp; Campus</h3>
94 <p style="color:#6a655e;margin:0 0 14px 0;">Rooms, buildings, facilities, campus use and operational support.</p>
95
96 <div style="font-weight:700;margin-bottom:6px;">I need to…</div>
97 <ul style="margin:0 0 14px 18px;padding:0;">
98 <li>book or use a room</li>
99 <li>report a building, equipment or safety issue</li>
100 <li>find information about campus facilities or house rules</li>
101 </ul>
102
103 <div style="font-size:12px;color:#6a655e;line-height:1.45;">
104 Facility management · estates · room coordination · building services · safety · house rules · campus operations
105 </div>
106 </div>
107 <div style="padding:0 18px 18px 18px;">
108 <span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore Rooms &amp; Campus</span>
109 </div>
110 </section>
111
112 <!-- 4. ART & RESEARCH SERVICES -->
113 <section style="display:flex;flex-direction:column;min-height:320px;border:1px solid #e3ded6;border-left:6px solid #21b6d7;border-radius:12px;background:#fcfbf8;box-shadow:0 1px 2px rgba(0,0,0,.035);overflow:hidden;">
114 <div style="padding:18px 18px 14px 18px;flex:1;">
115 <div style="display:inline-block;font-size:12px;font-weight:700;letter-spacing:.065em;color:#4f4a44;margin-bottom:8px;padding:4px 7px;background:#f3efe8;border-radius:4px;">ART &amp; RESEARCH</div>
116 <h3 style="font-size:21px;line-height:1.25;margin:0 0 8px 0;color:#252321;">Art &amp; Research Services</h3>
117 <p style="color:#6a655e;margin:0 0 8px 0;">Cross-unit guidance for planning, managing, publishing, sharing and preserving artistic and research projects.</p>
118 <!-- ARSN_ROOT_SCOPE_ROUTING_V1 -->
119 <div style="font-size:12px;color:#506168;line-height:1.45;margin:0 0 14px 0;padding:7px 9px;background:#eef7f9;border-radius:5px;"><strong>Central project &amp; funding hub:</strong> Support Kunst und Forschung · specialist responsibilities remain with the relevant service units.</div>
120
121 <div style="font-weight:700;margin-bottom:6px;">I need to…</div>
122 <ul style="margin:0 0 14px 18px;padding:0;">
123 <li>develop or plan an artistic or research project</li>
124 <li>manage research data, documentation or collaboration</li>
125 <li>publish, cite, share or preserve outputs</li>
126 </ul>
127
128 <div style="font-size:12px;color:#6a655e;line-height:1.45;">
129 Research projects · research data management · rights &amp; ethics · repositories · publication · preservation
130 </div>
131 </div>
132 <div style="padding:0 18px 18px 18px;">
133 <a href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/" class="btn btn-primary btn-block">Explore Art &amp; Research Services</a>
134 </div>
135 </section>
136
137 <!-- 5. STUDY, TEACHING & CURRICULUM -->
138 <section style="display:flex;flex-direction:column;min-height:320px;border:1px solid #e3ded6;border-left:6px solid #21b6d7;border-radius:12px;background:#fcfbf8;box-shadow:0 1px 2px rgba(0,0,0,.035);overflow:hidden;">
139 <div style="padding:18px 18px 14px 18px;flex:1;">
140 <div style="display:inline-block;font-size:12px;font-weight:700;letter-spacing:.065em;color:#4f4a44;margin-bottom:8px;padding:4px 7px;background:#f3efe8;border-radius:4px;">STUDY &amp; TEACHING</div>
141 <h3 style="font-size:21px;line-height:1.25;margin:0 0 8px 0;color:#252321;">Study, Teaching &amp; Curriculum</h3>
142 <p style="color:#6a655e;margin:0 0 14px 0;">Support for studying, teaching, curricula and the learning environment.</p>
143
144 <div style="font-weight:700;margin-bottom:6px;">I need to…</div>
145 <ul style="margin:0 0 14px 18px;padding:0;">
146 <li>clarify a study-related question</li>
147 <li>develop or change teaching or curricula</li>
148 <li>find support for final projects or accessibility in study</li>
149 </ul>
150
151 <div style="font-size:12px;color:#6a655e;line-height:1.45;">
152 Student affairs · teaching quality · curriculum development · final projects · student workspace
153 </div>
154 </div>
155 <div style="padding:0 18px 18px 18px;">
156 <span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore Study &amp; Teaching</span>
157 </div>
158 </section>
159
160 <!-- 6. RESEARCH & DISCOVERY RESOURCES -->
161 <section style="display:flex;flex-direction:column;min-height:340px;border:1px solid #e3ded6;border-left:6px solid #21b6d7;border-radius:12px;background:#fcfbf8;box-shadow:0 1px 2px rgba(0,0,0,.035);overflow:hidden;">
162 <div style="padding:18px 18px 14px 18px;flex:1;">
163 <div style="display:inline-block;font-size:12px;font-weight:700;letter-spacing:.065em;color:#4f4a44;margin-bottom:8px;padding:4px 7px;background:#f3efe8;border-radius:4px;">FIND · SEARCH · DISCOVER</div>
164 <h3 style="font-size:21px;line-height:1.25;margin:0 0 8px 0;color:#252321;">Research &amp; Discovery Resources</h3>
165 <p style="color:#6a655e;margin:0 0 14px 0;">Find literature, databases, archives, collections, repositories and specialist research resources across the University.</p>
166
167 <div style="font-weight:700;margin-bottom:6px;">I need to…</div>
168 <ul style="margin:0 0 14px 18px;padding:0;">
169 <li>find literature, media, databases or digital resources</li>
170 <li>research archival, artistic or institutional collections</li>
171 <li>discover repositories, specialist archives and research databases</li>
172 </ul>
173
174 <div style="font-size:12px;color:#6a655e;line-height:1.5;">
175 University Library &amp; supA · licensed databases · University Archive &amp; Art Collection · online collection databases · Oskar Kokoschka Centre · Viktor J. Papanek Foundation · Venedig Biennale Archiv Austria · Weibel Institute &amp; Peter Weibel Archive · Ursula Blickle Video Archive · Angewandte Repository
176 </div>
177 </div>
178 <div style="padding:0 18px 18px 18px;">
179 <span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore Research &amp; Discovery</span>
180 </div>
181 </section>
182
183 <!-- 7. PURCHASING, FINANCE & LOGISTICS -->
184 <section style="display:flex;flex-direction:column;min-height:320px;border:1px solid #e3ded6;border-left:6px solid #38b76a;border-radius:12px;background:#fcfbf8;box-shadow:0 1px 2px rgba(0,0,0,.035);overflow:hidden;">
185 <div style="padding:18px 18px 14px 18px;flex:1;">
186 <div style="display:inline-block;font-size:12px;font-weight:700;letter-spacing:.065em;color:#4f4a44;margin-bottom:8px;padding:4px 7px;background:#f3efe8;border-radius:4px;">PURCHASE &amp; MOVE</div>
187 <h3 style="font-size:21px;line-height:1.25;margin:0 0 8px 0;color:#252321;">Purchasing, Finance &amp; Logistics</h3>
188 <p style="color:#6a655e;margin:0 0 14px 0;">Buy, pay, budget, send, transport and move things.</p>
189
190 <div style="font-weight:700;margin-bottom:6px;">I need to…</div>
191 <ul style="margin:0 0 14px 18px;padding:0;">
192 <li>purchase materials or services</li>
193 <li>clarify an invoice, budget or financial process</li>
194 <li>send, transport or move items</li>
195 </ul>
196
197 <div style="font-size:12px;color:#6a655e;line-height:1.45;">
198 Procurement · controlling · accounting · resource planning · mail &amp; logistics · transport · relocations
199 </div>
200 </div>
201 <div style="padding:0 18px 18px 18px;">
202 <span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore Finance &amp; Logistics</span>
203 </div>
204 </section>
205
206 <!-- 8. LEGAL, DATA PROTECTION & GOVERNANCE -->
207 <section style="display:flex;flex-direction:column;min-height:320px;border:1px solid #e3ded6;border-left:6px solid #f0aa00;border-radius:12px;background:#fcfbf8;box-shadow:0 1px 2px rgba(0,0,0,.035);overflow:hidden;">
208 <div style="padding:18px 18px 14px 18px;flex:1;">
209 <div style="display:inline-block;font-size:12px;font-weight:700;letter-spacing:.065em;color:#4f4a44;margin-bottom:8px;padding:4px 7px;background:#f3efe8;border-radius:4px;">RIGHTS &amp; RULES</div>
210 <h3 style="font-size:21px;line-height:1.25;margin:0 0 8px 0;color:#252321;">Legal, Data Protection &amp; Governance</h3>
211 <p style="color:#6a655e;margin:0 0 14px 0;">Legal questions, privacy, information rights and institutional rules.</p>
212
213 <div style="font-weight:700;margin-bottom:6px;">I need to…</div>
214 <ul style="margin:0 0 14px 18px;padding:0;">
215 <li>clarify a legal or contractual question</li>
216 <li>deal with personal data or privacy</li>
217 <li>understand an institutional rule or information-access requirement</li>
218 </ul>
219
220 <div style="font-size:12px;color:#6a655e;line-height:1.45;">
221 Legal affairs · data protection · freedom of information · governance · institutional rules
222 </div>
223 </div>
224 <div style="padding:0 18px 18px 18px;">
225 <span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore Legal &amp; Governance</span>
226 </div>
227 </section>
228
229 <!-- 9. COMMUNICATION, MEDIA & EVENTS -->
230 <section style="display:flex;flex-direction:column;min-height:320px;border:1px solid #e3ded6;border-left:6px solid #e94b13;border-radius:12px;background:#fcfbf8;box-shadow:0 1px 2px rgba(0,0,0,.035);overflow:hidden;">
231 <div style="padding:18px 18px 14px 18px;flex:1;">
232 <div style="display:inline-block;font-size:12px;font-weight:700;letter-spacing:.065em;color:#4f4a44;margin-bottom:8px;padding:4px 7px;background:#f3efe8;border-radius:4px;">COMMUNICATE &amp; ORGANISE</div>
233 <h3 style="font-size:21px;line-height:1.25;margin:0 0 8px 0;color:#252321;">Communication, Media &amp; Events</h3>
234 <p style="color:#6a655e;margin:0 0 14px 0;">Communicate, publish, print, promote and organise events.</p>
235
236 <div style="font-weight:700;margin-bottom:6px;">I need to…</div>
237 <ul style="margin:0 0 14px 18px;padding:0;">
238 <li>communicate or publicise something</li>
239 <li>produce a publication, flyer or printed material</li>
240 <li>organise or support an event</li>
241 </ul>
242
243 <div style="font-size:12px;color:#6a655e;line-height:1.45;">
244 Press &amp; communications · publications · print materials · event management · Open House · festival
245 </div>
246 </div>
247 <div style="padding:0 18px 18px 18px;">
248 <span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore Communication &amp; Events</span>
249 </div>
250 </section>
251
252 <!-- 10. INTERNATIONAL OFFICE -->
253 <section style="display:flex;flex-direction:column;min-height:300px;border:1px solid #e3ded6;border-left:6px solid #21b6d7;border-radius:12px;background:#fcfbf8;box-shadow:0 1px 2px rgba(0,0,0,.035);overflow:hidden;">
254 <div style="padding:18px 18px 14px 18px;flex:1;">
255 <div style="display:inline-block;font-size:12px;font-weight:700;letter-spacing:.065em;color:#4f4a44;margin-bottom:8px;padding:4px 7px;background:#f3efe8;border-radius:4px;">GO INTERNATIONAL</div>
256 <h3 style="font-size:21px;line-height:1.25;margin:0 0 8px 0;color:#252321;">International Office</h3>
257 <p style="color:#6a655e;margin:0 0 14px 0;">International mobility, exchange and international support.</p>
258
259 <div style="font-weight:700;margin-bottom:6px;">I need to…</div>
260 <ul style="margin:0 0 14px 18px;padding:0;">
261 <li>plan an international stay or exchange</li>
262 <li>ask about mobility opportunities</li>
263 <li>find support for an international context</li>
264 </ul>
265
266 <div style="font-size:12px;color:#6a655e;line-height:1.45;">
267 Mobility · exchange · international cooperation · international support
268 </div>
269 </div>
270 <div style="padding:0 18px 18px 18px;">
271 <span class="btn btn-default btn-block disabled" style="background:#f4f0e9;border-color:#d8d1c7;color:#6b655d;" aria-disabled="true">Explore International Office</span>
272 </div>
273 </section>
274
275
276 </div>
277
278 <aside style="margin-top:26px;padding:14px 16px;border:1px solid #cfe8ef;border-left:4px solid #21b6d7;background:#eaf6f9;border-radius:6px;">
279 <strong>Not sure where to start?</strong>
280 <div style="margin-top:4px;">
281 Use the search at the top of the page or choose the card that best matches what you are trying to do. A service may deliberately appear in more than one area when this makes it easier to find.
282 </div>
283 </aside>
284
285 </div>
286 {{/html}}
287
288 \n\n
289 \n\n{{html clean="false"}}
290 <!-- SN_HORIZONTAL_BOX_HARMONIZER_START -->
291
292 <style data-sn-horizontal-box-harmonizer="7">
293 /* ---------- Typography: never justify headings ---------- */
294 #xwikicontent h1,
295 #xwikicontent h2,
296 #xwikicontent h3,
297 #xwikicontent h4,
298 #xwikicontent h5,
299 #xwikicontent h6,
300 #xwikicontent .box-title,
301 #xwikicontent [role="heading"],
302 #xwikicontent h1 a,
303 #xwikicontent h2 a,
304 #xwikicontent h3 a,
305 #xwikicontent h4 a,
306 #xwikicontent h5 a,
307 #xwikicontent h6 a,
308 #xwikicontent .box-title a,
309 #xwikicontent [role="heading"] a{
310 text-align:left!important;
311 text-justify:auto!important;
312 word-spacing:normal!important;
313 }
314
315 /* ---------- Native XWiki semantic callouts ---------- */
316 #xwikicontent .box.infomessage,
317 #xwikicontent .infomessage,
318 #xwikicontent .box.warningmessage,
319 #xwikicontent .warningmessage,
320 #xwikicontent .box.successmessage,
321 #xwikicontent .successmessage,
322 #xwikicontent .box.errormessage,
323 #xwikicontent .errormessage,
324 #xwikicontent [data-sn-callout-harmonized="1"]{
325 box-sizing:border-box!important;
326 border-radius:8px!important;
327 border-top:1px solid rgba(0,0,0,.08)!important;
328 border-right:1px solid rgba(0,0,0,.08)!important;
329 border-bottom:1px solid rgba(0,0,0,.08)!important;
330 border-left:4px solid var(--sn-callout-accent,#21b6d7)!important;
331 padding:14px 16px!important;
332 text-align:left!important;
333 text-justify:auto!important;
334 word-spacing:normal!important;
335 box-shadow:none!important;
336 }
337
338 #xwikicontent .box.infomessage,
339 #xwikicontent .infomessage{
340 --sn-callout-accent:#21b6d7;
341 background:#eaf7fb!important;
342 }
343
344 #xwikicontent .box.warningmessage,
345 #xwikicontent .warningmessage{
346 --sn-callout-accent:#f0aa00;
347 background:#fff8e7!important;
348 }
349
350 #xwikicontent .box.successmessage,
351 #xwikicontent .successmessage{
352 --sn-callout-accent:#38b76a;
353 background:#edf9f1!important;
354 }
355
356 #xwikicontent .box.errormessage,
357 #xwikicontent .errormessage{
358 --sn-callout-accent:#e94b13;
359 background:#fff1ec!important;
360 }
361
362 #xwikicontent [data-sn-callout-harmonized="1"] > :first-child,
363 #xwikicontent .infomessage > :first-child,
364 #xwikicontent .warningmessage > :first-child,
365 #xwikicontent .successmessage > :first-child,
366 #xwikicontent .errormessage > :first-child{
367 margin-top:0!important;
368 }
369
370 #xwikicontent [data-sn-callout-harmonized="1"] > :last-child,
371 #xwikicontent .infomessage > :last-child,
372 #xwikicontent .warningmessage > :last-child,
373 #xwikicontent .successmessage > :last-child,
374 #xwikicontent .errormessage > :last-child{
375 margin-bottom:0!important;
376 }
377
378 #xwikicontent [data-sn-equal-height-managed],
379 #xwikicontent [data-sn-first-section-aligned],
380 #xwikicontent [data-sn-first-content-aligned]{
381 box-sizing:border-box;
382 }
383 </style>
384
385 <script data-sn-horizontal-box-harmonizer="7">
386 (function(){
387 "use strict";
388
389 var MOBILE_MAX=767;
390 var ROW_TOLERANCE=6;
391 var MIN_W=150;
392 var MIN_H=36;
393 var MAX_PARENT_CHILDREN=18;
394 var SEARCH_DEPTH=5;
395 var RESIZE_DEBOUNCE=220;
396 var MIN_WIDTH_CHANGE=2;
397
398 var root=
399 document.getElementById("xwikicontent")||
400 document.querySelector(".xwiki-rendering-content")||
401 document.querySelector("main")||
402 document.body;
403
404 if(!root)return;
405
406 var heightManaged=new Set();
407 var sectionManaged=new Set();
408 var contentManaged=new Set();
409
410 var originalMinHeight=new WeakMap();
411 var originalMarginTop=new WeakMap();
412
413 var resizeTimer=0;
414 var lastWidth=-1;
415 var hasApplied=false;
416 var applying=false;
417
418 function num(v){
419 var n=parseFloat(v);
420 return Number.isFinite(n)?n:0;
421 }
422
423 function visible(el,minW,minH){
424 if(!el||el.nodeType!==1)return false;
425
426 var s=getComputedStyle(el);
427
428 if(
429 s.display==="none"||
430 s.visibility==="hidden"||
431 Number(s.opacity)===0
432 ){
433 return false;
434 }
435
436 var r=el.getBoundingClientRect();
437
438 return (
439 r.width>=(minW||1)&&
440 r.height>=(minH||1)
441 );
442 }
443
444 function normalizeText(text){
445 return String(text||"")
446 .replace(/\s+/g," ")
447 .trim()
448 .toUpperCase();
449 }
450
451 function excluded(el){
452 return (
453 !el.matches||
454 el.matches(
455 "button,input,select,textarea,option,label,img,svg,canvas,table,thead,tbody,tfoot,tr,td,th,summary,script,style,noscript,template,.btn,.chip,[role=button]"
456 )
457 );
458 }
459
460 /* ---------- Custom coloured callouts ---------- */
461
462 function nativeCallout(el){
463 var c=
464 typeof el.className==="string"
465 ? el.className.toLowerCase()
466 : "";
467
468 return (
469 /(^|\s)(infomessage|warningmessage|successmessage|errormessage)(\s|$)/.test(c)
470 );
471 }
472
473 function customCallout(el){
474 if(!visible(el,220,42)||excluded(el))return false;
475
476 var r=el.getBoundingClientRect();
477
478 if(r.height>520)return false;
479
480 var s=getComputedStyle(el);
481
482 var bg=
483 s.backgroundColor&&
484 s.backgroundColor!=="rgba(0, 0, 0, 0)"&&
485 s.backgroundColor!=="transparent"&&
486 s.backgroundColor!=="rgb(255, 255, 255)";
487
488 var left=
489 num(s.borderLeftWidth);
490
491 return (
492 bg&&
493 left>=2
494 );
495 }
496
497 function harmoniseCustomCallouts(){
498 Array.from(
499 root.querySelectorAll(
500 "div,aside,section"
501 )
502 ).forEach(function(el){
503 if(nativeCallout(el))return;
504 if(!customCallout(el))return;
505
506 var s=getComputedStyle(el);
507
508 el.setAttribute(
509 "data-sn-callout-harmonized",
510 "1"
511 );
512
513 if(
514 s.borderLeftColor
515 ){
516 el.style.setProperty(
517 "--sn-callout-accent",
518 s.borderLeftColor
519 );
520 }
521 });
522 }
523
524 /* ---------- Restore only values V7 itself changed ---------- */
525
526 function saveOriginal(el,map,property){
527 if(map.has(el))return;
528
529 map.set(el,{
530 value:
531 el.style.getPropertyValue(
532 property
533 ),
534 priority:
535 el.style.getPropertyPriority(
536 property
537 )
538 });
539 }
540
541 function restoreOriginal(el,map,property){
542 var original=map.get(el);
543
544 if(original&&original.value){
545 el.style.setProperty(
546 property,
547 original.value,
548 original.priority||""
549 );
550 }else{
551 el.style.removeProperty(
552 property
553 );
554 }
555 }
556
557 function resetRuntime(){
558 heightManaged.forEach(function(el){
559 restoreOriginal(
560 el,
561 originalMinHeight,
562 "min-height"
563 );
564
565 el.removeAttribute(
566 "data-sn-equal-height-managed"
567 );
568 });
569
570 sectionManaged.forEach(function(el){
571 restoreOriginal(
572 el,
573 originalMarginTop,
574 "margin-top"
575 );
576
577 el.removeAttribute(
578 "data-sn-first-section-aligned"
579 );
580 });
581
582 contentManaged.forEach(function(el){
583 restoreOriginal(
584 el,
585 originalMarginTop,
586 "margin-top"
587 );
588
589 el.removeAttribute(
590 "data-sn-first-content-aligned"
591 );
592 });
593
594 heightManaged.clear();
595 sectionManaged.clear();
596 contentManaged.clear();
597 }
598
599 /* ---------- Card detection ---------- */
600
601 function namedLikeBox(el){
602 var c=
603 typeof el.className==="string"
604 ? el.className
605 : "";
606
607 return /(^|[\s_-])(box|card|tile|panel|role|check|service|source|call|area|detail|resource|topic|warn|info)([\s_-]|$)/i.test(c);
608 }
609
610 function boxLike(el){
611 if(
612 !visible(el,MIN_W,MIN_H)||
613 excluded(el)
614 ){
615 return false;
616 }
617
618 var s=getComputedStyle(el);
619 var r=el.getBoundingClientRect();
620
621 var border=
622 num(s.borderTopWidth)+
623 num(s.borderRightWidth)+
624 num(s.borderBottomWidth)+
625 num(s.borderLeftWidth);
626
627 var radius=Math.max(
628 num(s.borderTopLeftRadius),
629 num(s.borderTopRightRadius),
630 num(s.borderBottomLeftRadius),
631 num(s.borderBottomRightRadius)
632 );
633
634 var bg=
635 s.backgroundColor&&
636 s.backgroundColor!=="rgba(0, 0, 0, 0)"&&
637 s.backgroundColor!=="transparent";
638
639 var shadow=
640 s.boxShadow&&
641 s.boxShadow!=="none";
642
643 return (
644 namedLikeBox(el)||
645 border>=1||
646 (bg&&radius>=3)||
647 (shadow&&r.width>=180)
648 );
649 }
650
651 function pickTarget(child){
652 if(!visible(child,MIN_W,MIN_H))return null;
653
654 if(boxLike(child))return child;
655
656 var cr=child.getBoundingClientRect();
657 var q=[];
658
659 Array.from(child.children||[]).forEach(function(el){
660 q.push({el:el,depth:1});
661 });
662
663 var best=null;
664 var bestScore=-Infinity;
665
666 while(q.length){
667 var item=q.shift();
668 var el=item.el;
669
670 if(!visible(el,MIN_W,MIN_H))continue;
671
672 var r=el.getBoundingClientRect();
673
674 if(
675 r.width>=cr.width*.68&&
676 boxLike(el)
677 ){
678 var widthFit=
679 1-Math.min(
680 1,
681 Math.abs(cr.width-r.width)/
682 Math.max(1,cr.width)
683 );
684
685 var topFit=
686 1-Math.min(
687 1,
688 Math.abs(cr.top-r.top)/100
689 );
690
691 var score=
692 widthFit*6+
693 topFit*3+
694 Math.min(r.height,900)/450+
695 Math.min(r.width*r.height,900000)/900000;
696
697 if(score>bestScore){
698 best=el;
699 bestScore=score;
700 }
701 }
702
703 if(item.depth<SEARCH_DEPTH){
704 Array.from(el.children||[]).forEach(function(next){
705 q.push({
706 el:next,
707 depth:item.depth+1
708 });
709 });
710 }
711 }
712
713 return best;
714 }
715
716 function groupRows(entries){
717 var groups=[];
718
719 entries
720 .slice()
721 .sort(function(a,b){
722 return (
723 a.rect.top-b.rect.top||
724 a.rect.left-b.rect.left
725 );
726 })
727 .forEach(function(entry){
728 var group=null;
729
730 for(var i=0;i<groups.length;i++){
731 if(
732 Math.abs(
733 groups[i].top-
734 entry.rect.top
735 )<=ROW_TOLERANCE
736 ){
737 group=groups[i];
738 break;
739 }
740 }
741
742 if(!group){
743 group={
744 top:entry.rect.top,
745 entries:[]
746 };
747 groups.push(group);
748 }
749
750 group.entries.push(entry);
751 });
752
753 return groups;
754 }
755
756 function validRow(group){
757 if(group.entries.length<2)return false;
758
759 var lefts=
760 group.entries
761 .map(function(e){return e.rect.left;})
762 .sort(function(a,b){return a-b;});
763
764 if(
765 lefts[lefts.length-1]-
766 lefts[0]<
767 80
768 ){
769 return false;
770 }
771
772 var widths=
773 group.entries
774 .map(function(e){return e.rect.width;})
775 .filter(function(w){return w>0;});
776
777 if(widths.length<2)return false;
778
779 var minW=
780 Math.min.apply(Math,widths);
781
782 var maxW=
783 Math.max.apply(Math,widths);
784
785 return (
786 maxW/
787 Math.max(1,minW)<=
788 1.9
789 );
790 }
791
792 /* ---------- Known ARSN first section bars ---------- */
793
794 function knownBar(el){
795 var text=
796 normalizeText(
797 el.textContent
798 );
799
800 return (
801 text==="HIER STARTEN"||
802 text==="ORGANISIEREN & DOKUMENTIEREN"||
803 text==="ENTSCHEIDEN"||
804 text==="START HERE"||
805 text==="GET STARTED"||
806 text==="ORGANISE & DOCUMENT"||
807 text==="ORGANIZE & DOCUMENT"||
808 text==="DECIDE"
809 );
810 }
811
812 function findKnownBar(card){
813 var cardRect=
814 card.getBoundingClientRect();
815
816 var rows=
817 Array.from(
818 card.querySelectorAll(
819 "div,p,span,strong,h3,h4,h5,h6"
820 )
821 )
822 .filter(function(el){
823 if(!visible(el,20,6))return false;
824 if(!knownBar(el))return false;
825
826 var r=el.getBoundingClientRect();
827
828 var rel=
829 r.top-
830 cardRect.top;
831
832 return (
833 rel>=35&&
834 rel<=
835 cardRect.height*.75
836 );
837 })
838 .sort(function(a,b){
839 return (
840 a.getBoundingClientRect().top-
841 b.getBoundingClientRect().top
842 );
843 });
844
845 return rows[0]||null;
846 }
847
848 function alignKnownBars(cards){
849 var rows=
850 cards.map(function(card){
851 var bar=
852 findKnownBar(card);
853
854 if(!bar)return null;
855
856 var cr=
857 card.getBoundingClientRect();
858
859 var br=
860 bar.getBoundingClientRect();
861
862 return {
863 bar:bar,
864 relativeTop:
865 br.top-
866 cr.top
867 };
868 });
869
870 if(
871 rows.some(function(row){
872 return !row;
873 })
874 ){
875 return false;
876 }
877
878 var target=
879 Math.max.apply(
880 Math,
881 rows.map(function(row){
882 return row.relativeTop;
883 })
884 );
885
886 rows.forEach(function(row){
887 var delta=
888 target-
889 row.relativeTop;
890
891 if(delta<=1)return;
892
893 saveOriginal(
894 row.bar,
895 originalMarginTop,
896 "margin-top"
897 );
898
899 var current=
900 num(
901 getComputedStyle(
902 row.bar
903 ).marginTop
904 );
905
906 row.bar.style.setProperty(
907 "margin-top",
908 (
909 current+
910 delta
911 )+"px"
912 );
913
914 row.bar.setAttribute(
915 "data-sn-first-section-aligned",
916 "7"
917 );
918
919 sectionManaged.add(
920 row.bar
921 );
922 });
923
924 return true;
925 }
926
927 /* ---------- Generic first content after heading ---------- */
928
929 function heading(card){
930 var cr=
931 card.getBoundingClientRect();
932
933 var rows=
934 Array.from(
935 card.querySelectorAll(
936 "h1,h2,h3,h4,h5,h6,.box-title,[role=heading]"
937 )
938 )
939 .filter(function(el){
940 if(!visible(el,20,8))return false;
941
942 var r=el.getBoundingClientRect();
943
944 var rel=
945 r.top-
946 cr.top;
947
948 return (
949 rel>=0&&
950 rel<=
951 Math.min(
952 160,
953 cr.height*.45
954 )
955 );
956 })
957 .sort(function(a,b){
958 return (
959 a.getBoundingClientRect().top-
960 b.getBoundingClientRect().top
961 );
962 });
963
964 return rows[0]||null;
965 }
966
967 function firstContent(card,h){
968 if(!h)return null;
969
970 var cr=
971 card.getBoundingClientRect();
972
973 var hr=
974 h.getBoundingClientRect();
975
976 var rows=
977 Array.from(
978 card.querySelectorAll(
979 "p,div,ul,ol,dl,blockquote"
980 )
981 )
982 .filter(function(el){
983 if(
984 el===h||
985 h.contains(el)||
986 el.contains(h)
987 ){
988 return false;
989 }
990
991 if(!visible(el,30,8))return false;
992
993 var text=
994 String(el.textContent||"")
995 .replace(/\s+/g," ")
996 .trim();
997
998 if(text.length<3)return false;
999
1000 var r=el.getBoundingClientRect();
1001
1002 if(
1003 r.top<
1004 hr.bottom-1
1005 ){
1006 return false;
1007 }
1008
1009 if(
1010 r.top-cr.top>
1011 Math.min(
1012 280,
1013 cr.height*.65
1014 )
1015 ){
1016 return false;
1017 }
1018
1019 if(
1020 r.height>
1021 cr.height*.58
1022 ){
1023 return false;
1024 }
1025
1026 return true;
1027 })
1028 .sort(function(a,b){
1029 var ar=
1030 a.getBoundingClientRect();
1031
1032 var br=
1033 b.getBoundingClientRect();
1034
1035 return (
1036 ar.top-br.top||
1037 ar.height-br.height
1038 );
1039 });
1040
1041 return rows[0]||null;
1042 }
1043
1044 function alignGeneric(cards){
1045 var rows=
1046 cards.map(function(card){
1047 var h=
1048 heading(card);
1049
1050 var c=
1051 firstContent(
1052 card,
1053 h
1054 );
1055
1056 if(!h||!c)return null;
1057
1058 var cr=
1059 card.getBoundingClientRect();
1060
1061 var rr=
1062 c.getBoundingClientRect();
1063
1064 return {
1065 content:c,
1066 relativeTop:
1067 rr.top-cr.top
1068 };
1069 });
1070
1071 if(
1072 rows.some(function(row){
1073 return !row;
1074 })
1075 ){
1076 return false;
1077 }
1078
1079 var target=
1080 Math.max.apply(
1081 Math,
1082 rows.map(function(row){
1083 return row.relativeTop;
1084 })
1085 );
1086
1087 rows.forEach(function(row){
1088 var delta=
1089 target-
1090 row.relativeTop;
1091
1092 if(delta<=1)return;
1093
1094 saveOriginal(
1095 row.content,
1096 originalMarginTop,
1097 "margin-top"
1098 );
1099
1100 var current=
1101 num(
1102 getComputedStyle(
1103 row.content
1104 ).marginTop
1105 );
1106
1107 row.content.style.setProperty(
1108 "margin-top",
1109 (
1110 current+
1111 delta
1112 )+"px"
1113 );
1114
1115 row.content.setAttribute(
1116 "data-sn-first-content-aligned",
1117 "7"
1118 );
1119
1120 contentManaged.add(
1121 row.content
1122 );
1123 });
1124
1125 return true;
1126 }
1127
1128 function applyRow(group){
1129 if(!validRow(group))return false;
1130
1131 var cards=[];
1132 var seen=new Set();
1133
1134 group.entries.forEach(function(entry){
1135 if(!seen.has(entry.target)){
1136 seen.add(entry.target);
1137 cards.push(entry.target);
1138 }
1139 });
1140
1141 if(cards.length<2)return false;
1142
1143 if(
1144 !alignKnownBars(cards)
1145 ){
1146 alignGeneric(cards);
1147 }
1148
1149 var maxHeight=0;
1150
1151 cards.forEach(function(card){
1152 maxHeight=
1153 Math.max(
1154 maxHeight,
1155 card.getBoundingClientRect().height
1156 );
1157 });
1158
1159 maxHeight=
1160 Math.ceil(
1161 maxHeight
1162 );
1163
1164 if(maxHeight<MIN_H)return false;
1165
1166 cards.forEach(function(card){
1167 saveOriginal(
1168 card,
1169 originalMinHeight,
1170 "min-height"
1171 );
1172
1173 card.style.setProperty(
1174 "min-height",
1175 maxHeight+"px"
1176 );
1177
1178 card.setAttribute(
1179 "data-sn-equal-height-managed",
1180 "7"
1181 );
1182
1183 heightManaged.add(card);
1184 });
1185
1186 return true;
1187 }
1188
1189 function calculate(force){
1190 if(applying)return;
1191
1192 var width=
1193 Math.round(
1194 window.innerWidth
1195 );
1196
1197 var meaningful=
1198 lastWidth<0||
1199 Math.abs(
1200 width-
1201 lastWidth
1202 )>=
1203 MIN_WIDTH_CHANGE;
1204
1205 if(
1206 hasApplied&&
1207 !force&&
1208 !meaningful
1209 ){
1210 return;
1211 }
1212
1213 applying=true;
1214
1215 try{
1216 harmoniseCustomCallouts();
1217
1218 if(width<=MOBILE_MAX){
1219 if(hasApplied){
1220 resetRuntime();
1221 }
1222
1223 hasApplied=false;
1224 lastWidth=width;
1225 return;
1226 }
1227
1228 if(hasApplied){
1229 resetRuntime();
1230 }
1231
1232 var parents=
1233 Array.from(
1234 root.querySelectorAll("*")
1235 )
1236 .filter(function(parent){
1237 return (
1238 visible(
1239 parent,
1240 MIN_W,
1241 MIN_H
1242 )&&
1243 parent.children&&
1244 parent.children.length>=2&&
1245 parent.children.length<=
1246 MAX_PARENT_CHILDREN
1247 );
1248 });
1249
1250 var touched=
1251 new Set();
1252
1253 parents.forEach(function(parent){
1254 var entries=[];
1255
1256 Array.from(
1257 parent.children
1258 ).forEach(function(child){
1259 if(
1260 !visible(
1261 child,
1262 MIN_W,
1263 MIN_H
1264 )
1265 ){
1266 return;
1267 }
1268
1269 var target=
1270 pickTarget(child);
1271
1272 if(!target)return;
1273
1274 entries.push({
1275 target:target,
1276 rect:
1277 target.getBoundingClientRect()
1278 });
1279 });
1280
1281 groupRows(
1282 entries
1283 ).forEach(function(group){
1284 if(!validRow(group))return;
1285
1286 var targets=
1287 group.entries.map(function(entry){
1288 return entry.target;
1289 });
1290
1291 if(
1292 !targets.some(function(el){
1293 return !touched.has(el);
1294 })
1295 ){
1296 return;
1297 }
1298
1299 if(applyRow(group)){
1300 targets.forEach(function(el){
1301 touched.add(el);
1302 });
1303 }
1304 });
1305 });
1306
1307 lastWidth=width;
1308 hasApplied=true;
1309 }finally{
1310 applying=false;
1311 }
1312 }
1313
1314 function resize(){
1315 if(resizeTimer){
1316 clearTimeout(
1317 resizeTimer
1318 );
1319 }
1320
1321 resizeTimer=
1322 setTimeout(
1323 function(){
1324 resizeTimer=0;
1325 calculate(false);
1326 },
1327 RESIZE_DEBOUNCE
1328 );
1329 }
1330
1331 function waitImages(){
1332 var images=
1333 Array.from(
1334 root.querySelectorAll("img")
1335 );
1336
1337 return Promise.all(
1338 images.map(function(img){
1339 if(img.complete){
1340 return Promise.resolve();
1341 }
1342
1343 return new Promise(function(resolve){
1344 var done=function(){
1345 resolve();
1346 };
1347
1348 img.addEventListener(
1349 "load",
1350 done,
1351 {once:true}
1352 );
1353
1354 img.addEventListener(
1355 "error",
1356 done,
1357 {once:true}
1358 );
1359 });
1360 })
1361 );
1362 }
1363
1364 async function initial(){
1365 if(
1366 document.readyState!==
1367 "complete"
1368 ){
1369 await new Promise(function(resolve){
1370 addEventListener(
1371 "load",
1372 resolve,
1373 {once:true}
1374 );
1375 });
1376 }
1377
1378 if(
1379 document.fonts&&
1380 document.fonts.ready
1381 ){
1382 try{
1383 await document.fonts.ready;
1384 }catch(error){}
1385 }
1386
1387 await waitImages();
1388
1389 // Exactly one initial layout calculation.
1390 calculate(true);
1391 }
1392
1393 addEventListener(
1394 "resize",
1395 resize,
1396 {passive:true}
1397 );
1398
1399 initial();
1400 })();
1401 </script>
1402
1403 <!-- SN_HORIZONTAL_BOX_HARMONIZER_END -->
1404 {{/html}}\n