PageSourceSearch

https://media-atelier.tv/

html media-atelier.tv collected 2026-10-08 10:56:18 UTC 27,774 bytes, 385 lines download raw bytes

1<!DOCTYPE html>
2<html lang="de">
3<head>
4  <style>
5    html, body { background-color: #f0f2f5; }
6  </style>
7    <meta charset="UTF-8">
8    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9    <title>Media Atelier Mainz – Postproduktion, Tonstudio, Film & Hörbuchproduktion</title>
10    <meta name="description" content="Media Atelier in Mainz bietet professionelle Postproduktion für Film, Fernsehen und Audio: Schnitt, Color Grading, Sounddesign, Sprachaufnahme, Hörbuchproduktion und Filmproduktion.">
11    <meta name="robots" content="index, follow">
12    <link rel="canonical" href="https://www.media-atelier.tv/">
13
14    <!-- Open Graph -->
15    <meta property="og:type" content="website">
16    <meta property="og:url" content="https://www.media-atelier.tv/">
17    <meta property="og:title" content="Media Atelier Mainz – Postproduktion, Tonstudio, Film & Hörbuchproduktion">
18    <meta property="og:description" content="Professionelle Postproduktion für Film, Fernsehen und Audio in Mainz.">
19    <meta property="og:image" content="https://www.media-atelier.tv/Bilder/MA/MA_innen_recolor.webp">
20    <!-- Twitter -->
21    <meta property="twitter:card" content="summary_large_image">
22    <meta property="twitter:title" content="Media Atelier Mainz – Postproduktion, Tonstudio, Film & Hörbuchproduktion">
23    <meta property="twitter:description" content="Professionelle Postproduktion für Film, Fernsehen und Audio in Mainz.">
24    <meta property="twitter:image" content="https://www.media-atelier.tv/Bilder/MA/MA_innen_recolor.webp">
25
26    <!-- JSON-LD -->
27    
27<script type="application/ld+json">
28    {
29      "@context": "https://schema.org",
30      "@type": "ProfessionalService",
31      "name": "Media Atelier GmbH",
32      "image": "https://www.media-atelier.tv/Bilder/MA/m_hellgrau_rgb_small_wabe.webp",
33      "@id": "https://www.media-atelier.tv/",
34      "url": "https://www.media-atelier.tv/",
35      "telephone": "06131-6692480",
36      "address": {
37        "@type": "PostalAddress",
38        "streetAddress": "Poststraße 37",
39        "addressLocality": "Mainz",
40        "postalCode": "55126",
41        "addressCountry": "DE"
42      },
43      "email": "[email protected]",
44      "description": "Media Atelier in Mainz bietet professionelle Postproduktion für Film, Fernsehen und Audio."
45    }
46    </script>
46
47
48    <link rel="stylesheet" href="tailwind-built.css">
49
50    <!-- Fonts -->
51    <link rel="stylesheet" href="fonts.css">
52
53    <!-- Lucide Icons -->
54    
54<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
54
55    
55<script src="data.js"></script>
55
56
57    <!-- Shared Styles -->
58    <link rel="stylesheet" href="styles.css?v=2.0">
59    <link rel="icon" type="image/png" href="Bilder/MA/m_hellgrau_rgb_small_wabe.webp">
60    
60<script defer src="https://cloud.umami.is/script.js" data-website-id="b75518e1-7dc1-43ef-8c1e-9a261a686e78"></script>
60
61</head>
62<body class="antialiased flex flex-col min-h-screen">
63
64    <!-- HEADER -->
65    <!-- HEADER_START -->
66<header>
67    <div class="container mx-auto px-6 flex items-center justify-between w-full h-full">
68        <a href="index.html" class="shrink-0 z-50 flex items-center">
69            <img src="Bilder/MA/m_hellgrau_rgb_small_wabe.webp" alt="Media Atelier Logo" class="h-8 md:h-10 w-auto hover:opacity-80 transition-opacity">
70        </a>
71        <div class="hidden md:flex items-center justify-center flex-grow">
72            <nav class="flex gap-2 items-center">
73                <a href="index.html" class="nav-link active">Home</a>
74                <a href="ueber-uns.html" class="nav-link">Über Uns</a>
75                <a href="leistungen.html" class="nav-link">Leistungen</a>
76                <a href="projekte.html" class="nav-link">Projekte</a>
77            </nav>
78        </div>
79        <div class="hidden md:flex items-center shrink-0">
80            <a href="kontakt.html" class="btn-contact shadow-lg">Kontakt</a>
81        </div>
82        <button id="mobile-menu-btn" class="md:hidden text-white hover:text-brand-yellow p-2 focus:outline-none ml-auto">
83            <i data-lucide="menu" class="w-8 h-8"></i>
84        </button>
85    </div>
86    <div id="mobile-menu" class="hidden absolute top-[90px] left-0 w-full bg-[#4d4f53] border-t border-gray-600 shadow-2xl p-6 z-40">
87        <div class="flex flex-col space-y-4">
88            <a href="index.html" class="text-brand-yellow font-bold text-lg py-3 border-b border-gray-600 uppercase">Home</a>
89            <a href="ueber-uns.html" class="text-white font-bold text-lg py-3 border-b border-gray-600 uppercase">Über Uns</a>
90            <a href="leistungen.html" class="text-white font-bold text-lg py-3 border-b border-gray-600 uppercase">Leistungen</a>
91            <a href="projekte.html" class="text-white font-bold text-lg py-3 border-b border-gray-600 uppercase">Projekte</a>
92            <a href="kontakt.html" class="text-brand-yellow font-bold text-lg py-3 uppercase">Kontakt</a>
93        </div>
94    </div>
95</header>
96<!-- HEADER_END -->
97
98    <main class="flex-grow">
99
100        <!-- HERO -->
101        <section class="relative flex items-center justify-center overflow-hidden" style="height: calc(100vh - 90px); min-height: 550px;">
102            <div class="absolute inset-0 z-0">
103                <video autoplay loop muted playsinline poster="Bilder/MA/MA_innen_recolor.webp" class="w-full h-full object-cover">
104                    <source src="Videos/MA_showreel_noBlack.mp4" type="video/mp4">
105                </video>
106                <div class="absolute inset-0 bg-[#4d4f53]/60 mix-blend-multiply"></div>
107                <div class="absolute inset-0 bg-gradient-to-t from-[#4d4f53] via-trans
107parent to-transparent"></div>
108            </div>
109            <div class="relative z-10 container mx-auto px-6 text-center">
110                <div class="reveal-on-scroll">
111                    <p class="eyebrow drop-shadow-md">Media Atelier Mainz</p>
112                    <h1 class="text-5xl md:text-7xl font-serif font-bold text-white leading-tight mb-6 drop-shadow-lg">
113                       Der perfekte Ton und Look <br>für Ihre Geschichten
114                    </h1>
115                    <p class="text-lg md:text-xl text-gray-200 max-w-2xl mx-auto mb-10 font-light drop-shadow-md leading-relaxed">
116                        Seit 1999 Ihr Partner für TV &amp; Video-Postproduktion in Mainz. Kreativer Schnitt, kinoreifes Sounddesign und präzises Color Grading für Dokus, TV-Formate und Markencontent – persönlich, leidenschaftlich und aus einer Hand.
117                    </p>
118                    <div class="flex flex-wrap gap-4 justify-center">
119                        <a href="kontakt.html" class="btn-primary text-lg shadow-xl">Jetzt Projekt anfragen</a>
120                        <a href="projekte.html" class="btn-outline-light text-lg">Showreel ansehen</a>
121                    </div>
122                </div>
123            </div>
124        </section>
125
126        <!-- INTRO / WER WIR SIND -->
127        <section class="section bg-surface-base">
128            <div class="container mx-auto px-6">
129                <div class="editorial-block">
130                    <div class="editorial-text reveal-on-scroll">
131                        <span class="eyebrow">Über uns</span>
132                        <h2 class="section-title">Ihr Partner für TV &amp; Video-Postproduktion</h2>
133                        <p class="text-gray-600 leading-relaxed mb-4">
134                            Große Geschichten verdienen besondere Veredelung. Seit 1999 steht Media Atelier Mainz für technische Präzision und kreative Postproduktion auf höchstem Broadcast-Niveau.
135                        </p>
136                        <p class="text-gray-600 leading-relaxed mb-6">
137                            Ob <a href="projekte.html" class="underline hover:text-brand-dark transition-colors">ARTE-Dokumentation</a>, Hörbuch-Bestseller auf <a href="projekte.html" class="underline hover:text-brand-dark transition-colors">Audible</a> oder wirkungsvoller Corporate Content: Unsere Editoren, Coloristen und Sounddesigner verwandeln Ihr Rohmaterial in cinematische Erlebnisse, EBU-R128-konform und mit feinstem Gespür für Storytelling.
138                        </p>
139                        <a href="ueber-uns.html" class="btn-outline">Mehr über uns erfahren</a>
140                    </div>
141                    <div class="editorial-img reveal-on-scroll delay-200">
142                        <img src="Bilder/MA/MA_innen_recolor.webp" alt="Media Atelier Studio Empfangsbereich" loading="lazy" width="1600" height="893">
143                    </div>
144                </div>
145            </div>
146        </section>
147
148        <!-- KERNKOMPETENZEN -->
149        <section class="section bg-surface-alt border-y border-black/5">
150            <div class="container mx-auto px-6">
151                <div class="text-center mb-16 reveal-on-scroll">
152                    <h2 class="section-title">Unsere Kernkompetenzen</h2>
153                    <p class="section-subtitle mx-auto">
154                        Von der Idee bis zum fertigen Master – wir begleiten Ihr Projekt mit Leidenschaft und Expertise.
155                    </p>
156                </div>
157                <div class="grid md:grid-cols-3 gap-8">
158                    <!-- Tongestaltung -->
159                    <a href="tonstudio-mainz.html" class="card reveal-on-scroll group flex flex-col justify-between">
160                        <div class="card-body text-center flex flex-col items-center flex-grow">
161                            <div class="w-16 h-16 bg-brand-dark rounded-2xl flex items-center justify-center mb-6 text-brand-yellow group-hover:bg-brand-yellow group-hover:text-brand-dark transition-colors shadow-md">
162                                <i data-lucide="mic" class="w-7 h-7"></i>
163                            </div>
164                            <h3 class="text-xl font-bold text-brand-dark mb-3">Tongestaltung &amp; Hörbuchproduktion</h3>
165                            <p class="text-gray-600 mb-6 leading-relaxed text-sm sm:text-base">
166                                Glasklare Dialoge, kinoreifes Sounddesign und dynamische Mischungen. Wir schaffen akustische Welten, die Emotionen tragen – vom Hörbuch bis zum 5.1-Surround-Mix.
167                            </p>
168                            <ul class="w-full text-left space-y-3 my-auto py-5 border-t border-b border-gray-200/80 text-xs sm:text-sm text-gray-700">
169                                <li class="flex items-start gap-3">
170                                    <i data-lucide="check" class="w-4 h-4 text-brand-dark shrink-0 mt-0.5 stroke-[2.5]"></i>
171                                    <span class="leading-snug"><strong class="font-bold text-brand-dark">Sprachaufnahme:</strong> Hörbücher, Voice-Over &amp; ADR</span>
172                                </li>
173                                <li class="flex items-start gap-3">
174                                    <i data-lucide="check" class="w-4 h-4 text-brand-dark shrink-0 mt-0.5 stroke-[2.5]"></i>
175                                    <span class="leading-snug"><strong class="font-bold text-brand-dark">Mischung &amp; Normung:</strong> EBU-R128 &amp; 5.1-Surround</span>
176                                </li>
177                                <li class="flex items-start gap-3">
178                                    <i data-lucide="check" class="w-4 h-4 text-brand-dark shrink-0 mt-0.5 stroke-[2.5]"></i>
179                                    <span class="leading-snug"><strong class="font-bold text-brand-dark">Sounddesign:</strong> Foley, SFX &amp; Audiodesign</span>
180                                </li>
181                            </ul>
182                            <span class="text-brand-dark font-bold group-hover:text-brand-yellow transition-colors flex items-center gap-1 mt-6">
183                                Tonstudio entdecken <i data-lucide="arrow-right" class="w-4 h-4"></i>
184                            </span>
185                        </div>
186                    </a>
187                    <!-- Bildgestaltung -->
188                    <a href="postproduktion-mainz.html" class="card reveal-on-scroll delay-100 group flex flex-col justify-between">
189                        <div class="card-body text-center flex flex-col items-center flex-grow">
190                            <div class="w-16 h-16 bg-brand-dark rounded-2xl flex items-center justify-center mb-6 text-brand-yellow group-hover:bg-brand-yellow group-hover:text-brand-dark transition-colors shadow-md">
191                                <i data-lucide="film" class="w-7 h-7"></i>
192                            </div>
193                            <h3 class="text-xl font-bold text-brand-dark mb-3">Bildgestaltung</h3>
194                            <p class="text-gray-600 mb-6 leading-relaxed text-sm sm:text-base">
195                                Dramaturgischer Schnitt, stimmungsvolles Color Grading und nahtlose VFX. Wir verleihen Ihren Aufnahmen visuelle Tiefe, Rhythmus und den passenden cinematischen Look.
196                            </p>
197                            <ul class="w-full text-left space-y-3 my-auto py-5 border-t border-b border-gray-200/80 text-xs sm:text-sm text-gray-700">
198                                <li class="flex items-start gap-3">
199                                    <i data-lucide="check" class="w-4 h-4 text-brand-dark shrink-0 mt-0.5 stroke-[2.5]"></i>
200                                    <span class="leading-snug"><strong class="font-bold text-brand-dark">Color Grading:</strong> DaVinci Resolve 4K &amp; Look-Entwicklung</span>
201                                </li>
202                                <li class="flex items-start gap-3">
203                                    <i data-lucide="check" class="w-4 h-4 text-brand-dark shrink-0 mt-0.5 stroke-[2.5]"></i>
204                                    <span class="leading-snug"><strong class="font-bold text-brand-dark">Schnitt:</strong> Roh- &amp; Feinschnitt für TV, Doku &amp; Imagefilm</span>
205                                </li>
206                                <li class="flex items-start gap-3">
207                                    <i data-lucide="check" class="w-4 h-4 text-brand-dark shrink-0 mt-0.5 stroke-[2.5]"></i>
208                                    <span class="leading-snug"><strong class="font-bold text-brand-dark">VFX &amp; Finishing:</strong> Retusche, Titling &amp; Retiming</span>
209                                </li>
210                            </ul>
211                            <span class="text-brand-dark font-bold group-hover:text-brand-yellow transition-colors flex items-center gap-1 mt-6">
212                                Postproduktion entdecken <i data-lucide="arrow-right" class="w-4 h-4"></i>
213                            </span>
214                        </div>
215                    </a>
216                    <!-- Komplettproduktion -->
217                    <a href="leistungen.html" class="card reveal-on-scroll delay-200 group flex flex-col justify-between">
218                        <div class="card-body text-center flex flex-col items-center flex-grow">
219                            <div class="w-16 h-16 bg-brand-dark rounded-2xl flex items-center justify-center mb-6 text-brand-yellow group-hover:bg-brand-yellow group-hover:text-brand-dark transition-colors shadow-md">
220                                <i data-lucide="clapperboard" class="w-7 h-7"></i>
221                            </div>
222                            <h3 class="text-xl font-bold text-brand-dark mb-3">Komplettproduktion</h3>
223                            <p class="text-gray-600 mb-6 leading-relaxed text-sm sm:text-base">
224                                Von der ersten Drehbuchseite bis zum sendefähigen Master. Wir begleiten Ihre Produktion mit hoher Sorgfalt, termintreu und broadcast-ready.
225                            </p>
226                            <ul class="w-full text-left space-y-3 my-auto py-5 border-t border-b border-gray-200/80 text-xs sm:text-sm text-gray-700">
227                                <li class="flex items-start gap-3">
228                                    <i data-lucide="check" class="w-4 h-4 text-brand-dark shrink-0 mt-0.5 stroke-[2.5]"></i>
229                                    <span class="leading-snug"><strong class="font-bold text-brand-dark">Full-Service:</strong> Vorproduktion, Dreh &amp; Postproduktion</span>
230                                </li>
231                                <li class="flex items-start gap-3">
232                                    <i data-lucide="check" class="w-4 h-4 text-brand-dark shrink-0 mt-0.5 stroke-[2.5]"></i>
233                                    <span class="leading-snug"><strong class="font-bold text-brand-dark">Mastering:</strong> Sendefähiges File-Delivery (MXF, ProRes)</span>
234                                </li>
235                                <li class="flex items-start gap-3">
236                                    <i data-lucide="check" class="w-4 h-4 text-brand-dark shrink-0 mt-0.5 stroke-[2.5]"></i>
237                                    <span class="leading-snug"><strong class="font-bold text-brand-dark">Quality Control:</strong> Senderkonforme Abnahmegarantie</span>
238                                </li>
239                            </ul>
240                            <span class="text-brand-dark font-bold group-hover:text-brand-yellow transition-colors flex items-center gap-1 mt-6">
241                                Alle Leistungen ansehen <i data-lucide="arrow-right" class="w-4 h-4"></i>
242                            </span>
243                        </div>
244                    </a>
245                </div>
246            </div>
247        </section>
248
249        <!-- PROJEKTAUSWAHL (BENTO) -->
250        <section class="section bg-surface-base">
251            <div class="container mx-auto px-6">
252                <div class="text-center mb-16 reveal-on-scroll">
253                    <span class="eyebrow">Portfolio-Highlights</span>
254                    <h2 class="section-title">Auswahl aus unseren Projekten</h2>
255                    <p class="section-subtitle mx-auto">
256                        Ein Einblick in Produktionen, bei denen wir die gesamte Bandbreite unserer Postproduktion einbringen konnten.
257                    </p>
258                </div>
259                <div id="home-bento-grid" class="bento-grid reveal-on-scroll">
260                    <!-- JS Generated -->
261                </div>
262                <div class="text-center mt-12 reveal-on-scroll">
263                    <a href="projekte.html" class="btn-primary shadow-xl">Alle Arbeiten entdecken</a>
264                </div>
265            </div>
266        </section>
267
268        <!-- KUNDEN -->
269        <section class="section-sm bg-surface-alt border-y border-black/5">
270            <div class="container mx-auto px-6">
271                <div class="text-center">
272                    <h2 class="section-title mb-12 reveal-on-scroll">Vertrauen führender TV-Sender, Agenturen &amp; Marken</h2>
273                    <div id="clients-grid" class="grid grid-cols-4 sm:grid-cols-4 md:grid-cols-4 lg:grid-cols-6 gap-2 sm:gap-6 justify-items-center items-center reveal-on-scroll">
274                        <!-- Content via JS -->
275                    </div>
276                </div>
277            </div>
278        </section>
279
280        <!-- CTA -->
281        <section class="py-24 bg-brand-dark text-white text-center">
282            <div class="container mx-auto px-6 reveal-on-scroll">
283                <h2 class="text-3xl md:text-4xl font-serif font-bold mb-6">Bereit für den perfekten Cut &amp; Sound?</h2>
284                <p class="text-gray-300 max-w-xl mx-auto mb-10 text-lg">
285                    Lassen Sie uns Ihre nächste Produktion termintreu zum Klingen und Leuchten bringen.
286                </p>
287                <a href="kontakt.html" class="btn-primary text-lg">Jetzt unverbindlich anfragen</a>
288            </div>
289        </section>
290
291    </main>
292
293    <!-- FOOTER -->
294    <!-- FOOTER_START -->
295<footer>
296    <div class="container mx-auto px-6">
297        <div class="grid md:grid-cols-3 gap-12 mb-12">
298            <div>
299                <img src="Bilder/MA/m_hellgrau_rgb_small_wabe.webp" alt="Media Atelier" class="h-10 mb-4 opacity-70">
300                <p class="text-sm leading-relaxed mb-6">Postproduktion für Film, Fernsehen und Audio in Mainz. Seit über 25 Jahren.</p>
301                <div class="flex items-center gap-3">
302                    <a href="https://www.instagram.com/media_atelier_gmbh/" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-full bg-white/15 border border-white/20 flex items-center justify-center text-white hover:bg-brand-yellow hover:text-brand-dark hover:border-brand-yellow transition-all duration-300 shadow-md" title="Instagram">
303                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current" viewBox="0 0 24 24">
303<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
304                    </a>
305                    <a href="https://www.facebook.com/MediaAtelierGmbH/?locale=de_DE" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-full bg-white/15 border border-white/20 flex items-center justify-center text-white hover:bg-brand-yellow hover:text-brand-dark hover:border-brand-yellow transition-all duration-300 shadow-md" title="Facebook">
306                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M9 8H6v4h3v12h5V12h3.642L18 8h-4V6.333C14 5.374 14.5 5 15.5 5H18V0h-3.808C10.592 0 9 1.583 9 4.615V8z"/></svg>
307                    </a>
308                    <a href="https://de.linkedin.com/company/media-atelier-gmbh" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-full bg-white/15 border border-white/20 flex items-center justify-center text-white hover:bg-brand-yellow hover:text-brand-dark hover:border-brand-yellow transition-all duration-300 shadow-md" title="LinkedIn">
309                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
310                    </a>
311                </div>
312            </div>
313            <div>
314                <h4 class="text-white font-bold mb-4 text-sm uppercase tracking-wider">Seiten</h4>
315                <nav class="flex flex-col gap-2 text-sm">
316                    <a href="leistungen.html">Leistungen</a>
317                    <a href="projekte.html">Projekte</a>
318                    <a href="hoerbuchproduktion.html">Hörbuchmanufaktur</a>
319                    <a href="ueber-uns.html">Über Uns</a>
320                </nav>
321            </div>
322            <div>
323                <h4 class="text-white font-bold mb-4 text-sm uppercase tracking-wider">Kontakt</h4>
324                <div class="text-sm space-y-2">
325                    <p>Media Atelier GmbH</p>
326                    <p>Poststraße 37, 55126 Mainz</p>
327                    <p>Telefon: 06131-6692480</p>
328                    <p><a href="mailto:[email protected]" class="hover:text-brand-yellow">[email protected]</a></p>
329                </div>
330            </div>
331        </div>
332        <div class="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-sm">
333            <p>&copy; 1999–2026 Media Atelier GmbH.</p>
334            <div class="flex gap-6">
335                <a href="impressum.html" class="hover:text-white">Impressum</a>
336                <a href="datenschutz.html" class="hover:text-white">Datenschutz</a>
337            </div>
338        </div>
339    </div>
340</footer>
341<!-- FOOTER_END -->
342
343    <!-- JS -->
344    
344<script src="shared.js"></script>
344
345    
345<script>
346        document.addEventListener('DOMContentLoaded', function() {
347            // --- HOME BENTO GRID ---
348            function renderHomeBento() {
349                const container = document.getElementById('home-bento-grid');
350                if (!container) return;
351                const sortedProjects = [...mockData.projects].sort((a, b) => b.icons.length - a.icons.length).slice(0, 8);
352                container.innerHTML = sortedProjects.map((p, i) => {
353                    let gridClass = 'bento-1x1';
354                    if (i === 0) gridClass = 'bento-2x2';
355                    else if (i === 5) gridClass = 'bento-2x1';
356                    return `
357                        <div class="group relative overflow-hidden rounded-2xl ${gridClass} bg-brand-dark shadow-lg hover:shadow-xl transition-all duration-500">
358                            <img src="${p.img}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" alt="${p.title}"
359                                 onerror="if(this.src.includes('maxresdefault')){this.src=this.src.replace('maxresdefault','hqdefault');}else{this.src='https://placehold.co/600x400/4d4f53/fedf00?text=Postproduktion';}">
360                            <div class="absolute inset-0 bg-gradient-to-t from-[#1a1a1a]/95 via-[#1a1a1a]/20 to-transparent opacity-80 transition-opacity"></div>
361                            <div class="absolute bottom-0 left-0 p-5 w-full transition-transform duration-300">
362                                <span class="text-[9px] font-bold text-brand-yellow uppercase tracking-widest mb-1 block">${p.sender}</span>
363                                <h4 class="text-base font-bold text-white leading-tight mb-2 line-clamp-2">${p.title}</h4>
364                            </div>
365                            <a href="${p.url}" target="_blank" class="absolute inset-0 z-10"></a>
366                        </div>`;
367                }).join('');
368            }
369
370            // --- CLIENTS ---
371            function renderClients() {
372                const grid = document.getElementById('clients-grid');
373                if (!grid) return;
374                grid.innerHTML = mockData.clients.map(c => {
375                    const baseName = c.substring(0, c.lastIndexOf('.'));
376                    return `<div class="client-logo"><img src="Bilder/Kunden/${baseName}.webp" alt="${baseName}" onerror="this.src='Bilder/Kunden/${c}'"></div>`;
377                }).join('');
378            }
379
380            renderHomeBento();
381            renderClients();
382        });
383    </script>
383
384</body>
385</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.