Files
dogfather-universe/bewerben.html
T
DogFatherGitandClaude Opus 5 efe98e32a7 Sprung zum Inhalt: Seite ohne Maus in einem Schritt bedienbar
Der Tastatur-Test (pruef-tastatur.mjs, neu) zeigte auf allen fünf
geprüften Seiten dasselbe Bild: jedes Bedienelement erreichbar, Fokus
durchgehend sichtbar, keine Tastaturfalle -- aber kein Sprunglink.

Ohne ihn muss sich jemand, der die Tastatur benutzt, auf JEDER Seite
erneut durch das komplette Menü tabben (31 bis 52 Punkte), bevor der
eigentliche Inhalt beginnt. WCAG 2.4.1 verlangt genau diesen Ausweg.

An einer Stelle gelöst statt in 35 Dateien: renderHeader() in main.js
setzt das Sprungziel und stellt den Link davor.

Das tabindex="-1" am <main> ist der Teil, der meistens fehlt: ohne ihn
verschiebt der Sprung in Chrome und Safari nur die Bildlaufleiste, der
Tastaturfokus bleibt in der Navigation -- der nächste Tab landet wieder
im Menü und der Sprung war wirkungslos.

Cache-Buster auf 20260827a (244 Stellen), sonst bekäme niemand die
geänderte main.js und main.css ausgeliefert.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-08-27 01:21:31 +02:00

92 lines
4.9 KiB
HTML

<!DOCTYPE html>
<html lang="de" data-theme="spicymedia">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bewerben — DOGFATHER UNIVERSE</title>
<meta name="description" content="Werde Teil vom Team: Modi bei Team Dogi, Scout oder Creator bei Spicy Media, oder Kooperation anfragen." />
<link rel="icon" type="image/png" href="assets/img/favicon.png" />
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#0b0d10" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
<meta property="og:title" content="Bewerben — DOGFATHER UNIVERSE" />
<meta property="og:description" content="Werde Teil vom Team: Modi bei Team Dogi, Scout oder Creator bei Spicy Media, oder Kooperation anfragen." />
<meta property="og:image" content="https://dogfather-universe.com/assets/img/og-cover.jpg" />
<meta property="og:url" content="https://dogfather-universe.com/bewerben.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Bewerben — DOGFATHER UNIVERSE" />
<meta name="twitter:description" content="Werde Teil vom Team: Modi bei Team Dogi, Scout oder Creator bei Spicy Media, oder Kooperation anfragen." />
<meta name="twitter:image" content="https://dogfather-universe.com/assets/img/og-cover.jpg" />
<link rel="stylesheet" href="assets/css/main.css?v=20260827a" />
<link rel="stylesheet" href="assets/css/theme-dogfather.css?v=20260827a" />
<link rel="stylesheet" href="assets/css/theme-hasidog.css?v=20260827a" />
<link rel="stylesheet" href="assets/css/theme-spicymedia.css?v=20260827a" />
</head>
<body class="mit-hintergrund bewerben-seite" style="--page-bg:url('/assets/img/bg-bewerben-split.jpg');--page-bg-mobile:url('/assets/img/bg-bewerben-split-mobile.jpg');">
<div id="site-header"></div>
<main>
<section class="hero page-bg">
<div class="hero-banner"><img src="/assets/img/bg-bewerben-split.jpg" alt="" loading="eager" /></div>
<div class="container">
<span class="eyebrow" data-i18n="bw_eyebrow">Werde Teil vom Team</span>
<h1 data-i18n="bw_h1">Community oder Agentur — such dir deinen&nbsp;Weg</h1>
<p class="lead worlds" data-i18n="bw_lead">Vier Bewerbungen, drei ganz unterschiedliche Rollen. Wähl, was zu dir passt.</p>
</div>
</section>
<section class="section-tight">
<div class="container">
<div class="bewerben-showcase">
<div class="bewerben-poster bewerben-poster-blau" aria-hidden="true">
<img src="assets/img/bewerben-poster-dogfather.jpg" alt="" loading="lazy" />
</div>
<div class="bewerben-split">
<div class="bewerben-side bewerben-side-blau">
<span class="bewerben-side-label" data-i18n="bw_label_community">🩵 Community — Team Dogi</span>
<a class="card card-duel" href="bewerben-modi.html" style="--accent:#8fd9ea;--accent-2:#8b5cf6;">
<span class="tag" data-i18n="bw_tag_community">Community</span>
<h3 data-i18n="bw_modi_h3">Modi werden</h3>
<p data-i18n="bw_modi_p">DogFathers persönliches Team. Chat, Community und Zusammenhalt im Alltag.</p>
</a>
<a class="card card-duel" href="bewerben-kooperation.html" style="--accent:#8fd9ea;--accent-2:#8b5cf6;">
<span class="tag" data-i18n="bw_tag_anfrage">Anfrage</span>
<h3 data-i18n="bw_koop_h3">Kooperation anfragen</h3>
<p data-i18n="bw_koop_p">Firma, Marke oder eigenes Projekt — schick deine Idee direkt an Team Dogi.</p>
</a>
</div>
<div class="bewerben-wall" aria-hidden="true"><span>⚡</span></div>
<div class="bewerben-side bewerben-side-rot">
<span class="bewerben-side-label" data-i18n="bw_label_agentur">Agentur — Spicy Media 🌶️</span>
<a class="card card-duel" href="bewerben-scout.html">
<span class="tag" data-i18n="bw_tag_agentur">Agentur</span>
<h3 data-i18n="bw_scout_h3">Scout werden</h3>
<p data-i18n="bw_scout_p">Finde und begleite neue Talente für DogFather als Manager.</p>
</a>
<a class="card card-duel" href="bewerben-creator.html">
<span class="tag" data-i18n="bw_tag_manager">Manager-Bewerbung</span>
<h3 data-i18n="bw_creator_h3">Als Streamer bewerben</h3>
<p data-i18n="bw_creator_p">Du suchst einen Manager? Bewirb dich als Creator bei Spicy Media.</p>
</a>
</div>
</div>
<div class="bewerben-poster bewerben-poster-rot" aria-hidden="true">
<img src="assets/img/bewerben-poster-spicymedia.jpg" alt="" loading="lazy" />
</div>
</div>
</div>
</section>
</main>
<div id="site-footer"></div>
<script src="assets/js/i18n-bewerben.js?v=20260827a"></script>
<script src="assets/js/main.js?v=20260827a"></script>
</body>
</html>