Files
dogfather-universe/medien-dogfather.html
T
DogFatherGitandClaude Opus 5 9bd9357185 Überschriftenordnung im Hauptinhalt: keine übersprungenen Ebenen mehr
Fünf Seiten hatten einen Sprung h1 -> h3 im Hauptinhalt (die Kachel-
Überschriften waren h3, ohne h2 dazwischen). Für Bildschirmleser fehlte
damit eine Ebene im "Inhaltsverzeichnis" der Seite (WCAG 1.3.1).

Pro Seite der passende, optik-erhaltende Weg -- jede Änderung mit
Screenshot bzw. gemessener Schriftgröße gegengeprüft:

- werte, kontakt, index: Kachel-h3 -> h2 (die Kacheln SIND die
  Hauptabschnitte unter der h1). Neue Regel .card > h2 hält die kompakte
  h3-Optik (1.62rem); Varianten .card-brand/.card-feature bleiben über
  ihre eigenen h3-Regeln unberührt. Gemessen: 25.92px vorher = nachher.
- bewerben: die schon sichtbaren Gruppenlabels (Community / Agentur)
  waren <span> -> jetzt <h2> mit derselben Klasse. Optik per Screenshot
  identisch (zentriert, uppercase, Zierstrich).
- links: die Kacheln nutzen Spezial-Varianten mit eigenen Größen, ein
  Tag-Wechsel wäre riskant -> stattdessen eine unsichtbare Gruppen-
  überschrift (.sr-only, neue Klasse nach WCAG-Standard). Ändert die
  Optik nicht, vervollständigt aber die Ordnung für Bildschirmleser.

Cache-Buster 20260828b (main.css geändert: .card > h2, .sr-only).

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

76 lines
3.4 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="de" data-theme="dogfather">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Medien — DogFather — DOGFATHER UNIVERSE</title>
<meta name="description" content="Fotos, Videos und Events aus DogFathers Welt an einem Ort." />
<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="Medien — DogFather — DOGFATHER UNIVERSE" />
<meta property="og:description" content="Fotos, Videos und Events aus DogFathers Welt an einem Ort." />
<meta property="og:image" content="https://dogfather-universe.com/assets/img/og-cover.jpg" />
<meta property="og:url" content="https://dogfather-universe.com/medien-dogfather.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Medien — DogFather — DOGFATHER UNIVERSE" />
<meta name="twitter:description" content="Fotos, Videos und Events aus DogFathers Welt an einem Ort." />
<meta name="twitter:image" content="https://dogfather-universe.com/assets/img/og-cover.jpg" />
<link rel="stylesheet" href="assets/css/main.css?v=20260828b" />
<link rel="stylesheet" href="assets/css/theme-dogfather.css?v=20260828b" />
<link rel="stylesheet" href="assets/css/theme-hasidog.css?v=20260828b" />
<link rel="stylesheet" href="assets/css/theme-spicymedia.css?v=20260828b" />
</head>
<body class="mit-hintergrund" data-welt="dogfather" style="--page-bg:url('/assets/img/bg-dogfather.jpg');--page-bg-mobile:url('/assets/img/bg-dogfather-mobile.jpg');">
<div id="site-header"></div>
<main>
<section class="hero page-bg">
<div class="hero-banner"><img src="/assets/img/bg-dogfather.jpg" alt="" loading="eager" /></div>
<div class="container">
<span class="eyebrow" data-i18n="md_eyebrow">Welt 1 — DogFather</span>
<h1 data-i18n="md_h1">Medien — DogFather</h1>
<p class="lead worlds" data-i18n="md_lead">Fotos, Videos und Events aus DogFathers Welt — alles an einem Ort.</p>
</div>
</section>
<section class="section-tight" id="fotos">
<div class="container">
<h2 class="text-center" data-i18n="md_fotos_h2">📸 Fotos</h2>
<div id="foto-grid" class="grid grid-4"></div>
</div>
</section>
<section class="section-tight" id="videos">
<div class="container">
<h2 class="text-center" data-i18n="md_videos_h2">🎥 Videos</h2>
<div id="video-grid" class="grid grid-3"></div>
</div>
</section>
<section class="section-tight" id="events">
<div class="container">
<h2 class="text-center" data-i18n="md_events_h2">🎉 Events</h2>
<div id="aktionen-grid" class="grid grid-2"></div>
</div>
</section>
</main>
<div id="lightbox" class="lightbox">
<button class="lightbox-close" aria-label="Schließen">×</button>
<div id="lightbox-content"></div>
</div>
<div id="site-footer"></div>
<script src="assets/js/data-media.js?v=20260828b"></script>
<script src="assets/js/data-videos.js?v=20260828b"></script>
<script src="assets/js/data-aktionen.js?v=20260828b"></script>
<script src="assets/js/medien-welt.js?v=20260828b"></script>
<script src="assets/js/i18n-medien-dogfather.js?v=20260828b"></script>
<script src="assets/js/main.js?v=20260828b"></script>
</body>
</html>