@extends('layouts.app')

@php
    // Social-Vorschaubilder MUESSEN absolut sein. heroImage ist host-relativ
    // (/news-assets/...) — bei vorhandenem Hero zur absoluten URL machen.
    // Canonical ist https; daher Bild-URLs hart auf https zwingen (auf localhost
    // liefert url()/secure_url() sonst http und es entsteht ein http/https-Mismatch).
    $heroAbs = !empty($page['heroImage'])
        ? (\Illuminate\Support\Str::startsWith($page['heroImage'], ['http://', 'https://']) ? $page['heroImage'] : url($page['heroImage']))
        : asset('img/logo-wordmark-solid-cropped.png');
    $heroAbs = str_replace('http://', 'https://', $heroAbs);

    // /en-Varianten sind Wörterbuch-/Client-Übersetzungen der deutschen Inhalte:
    // auf die deutsche URL kanonisieren und noindex setzen, statt sich selbst zu
    // kanonisieren (M3). Die deutsche, host-unabhängige URL liefert der Controller
    // bereits als $page['url'] (https://news.kotsch.tech/<slug>).
    $isEnLocale = request()->segment(1) === 'en';
    $germanCanonical = $page['url'] ?? null;
@endphp

@section('title', $page['title'] . ' | kotsch.tech')
@section('meta_description', $page['description'])
@section('og_type', 'article')
@if(!empty($page['noindex']) || $isEnLocale)
    @section('robots', 'noindex, follow')
@endif
@if($isEnLocale && $germanCanonical)
    @section('canonical', $germanCanonical)
@endif
@section('og_image', $heroAbs)
@section('twitter_image', $heroAbs)
@section('structured_data')
    <script type="application/ld+json">
        {!! json_encode([
            '@' . 'context' => 'https://schema.org',
            '@type' => 'Article',
            'headline' => $page['title'],
            'description' => $page['description'],
            'datePublished' => $page['publishedAt'] ?: null,
            'dateModified' => $page['modifiedAt'] ?? $page['publishedAt'],
            'image' => $heroAbs,
            'author' => [
                '@type' => 'Person',
                'name' => 'Arthur Kotsch',
            ],
            'publisher' => [
                '@type' => 'Organization',
                'name' => 'KOTSCH.TECH',
            ],
        ], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) !!}
    </script>
@endsection

{{-- Diese Artikelseite zeigt Werbung: feste Direct-Link-Banner UND schwebende In-Page Push.
     Das Flag schaltet die Popups im Layout frei — ohne es bleibt eine Seite popup-frei. --}}
@section('pageAds', 'on')

@section('content')
    @php $pageHue = fn ($slug) => abs(crc32((string) $slug)) % 360; @endphp
    <style>
        .auto-article-hero {
            padding: 140px 5% 74px;
            background:
                radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.12), transparent 32%),
                linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            border-bottom: 1px solid rgba(226, 232, 240, 0.9);
        }

        .auto-article-hero-inner {
            max-width: 940px;
        }

        .auto-article-back {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            width: fit-content;
            margin-bottom: 24px;
            color: var(--primary);
            font-weight: 900;
            text-decoration: none;
        }

        .auto-article-title {
            max-width: 900px;
            margin: 0 0 24px;
            color: var(--text-dark);
            font-size: clamp(2.7rem, 6vw, 5.1rem);
            font-weight: 900;
            line-height: 1;
            letter-spacing: -0.055em;
            overflow-wrap: break-word;
            word-break: break-word;
            hyphens: auto;
        }

        .auto-article-lead {
            max-width: 760px;
            color: var(--text-muted);
            font-size: clamp(1.05rem, 2vw, 1.22rem);
            line-height: 1.75;
        }

        .auto-article-hero-media {
            overflow: hidden;
            margin-top: 34px;
            border: 1px solid #e2e8f0;
            border-radius: 24px;
            background: #dbeafe;
            box-shadow: var(--shadow-soft);
        }

        .auto-article-hero-media img {
            width: 100%;
            max-height: 460px;
            object-fit: contain;
            background: #f0f4ff;
        }

        .auto-article-meta {
            display: flex;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
            margin-bottom: 22px;
            color: var(--text-muted);
            font-size: 0.85rem;
            font-weight: 800;
        }

        .auto-article-author a {
            color: inherit;
            text-decoration: none;
            border-bottom: 1px solid currentColor;
            transition: color 0.2s ease;
        }

        .auto-article-author a:hover {
            color: #2563eb;
        }

        .auto-article-category {
            display: inline-flex;
            align-items: center;
            min-height: 36px;
            padding: 8px 13px;
            border-radius: 999px;
            background: rgba(37, 99, 235, 0.1);
            color: #2563eb;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .auto-article-section {
            padding: 76px 5% 120px;
            background: #ffffff;
            max-width: 100%;
        }

        .auto-article-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
            gap: 48px;
            align-items: start;
        }

        .auto-article-body {
            color: var(--text-dark);
            font-size: 1.08rem;
            line-height: 1.85;
            overflow-wrap: break-word;
            word-break: break-word;
            min-width: 0;
            overflow-x: clip;
        }
        /* Sicherheitsnetz: nichts im Artikel-Inhalt darf horizontal über den Rand;
           Tabellen/Pre haben eigenes overflow-x:auto und scrollen daher in sich selbst. */
        .auto-article-body > * { max-width: 100%; }
        .auto-article-body img,
        .auto-article-body figure,
        .auto-article-body svg,
        .auto-article-body video { max-width: 100%; height: auto; }

        .auto-article-body > * + * {
            margin-top: 1.35em;
        }

        .auto-article-body h2 {
            margin-top: 1.8em;
            margin-bottom: 0.55em;
            color: var(--text-dark);
            font-size: clamp(1.9rem, 4vw, 2.7rem);
            letter-spacing: -0.04em;
        }

        .auto-article-body p {
            color: #334155;
        }

        .auto-article-body ul {
            display: grid;
            gap: 10px;
            padding-left: 1.1em;
            color: #334155;
        }

        .auto-article-body figure {
            overflow: hidden;
            border: 1px solid #e2e8f0;
            border-radius: 22px;
            background: #f8fafc;
        }

        .auto-article-body a {
            color: var(--primary);
            font-weight: 800;
            text-decoration-thickness: 0.08em;
            text-underline-offset: 0.18em;
        }

        .auto-article-body figure img,
        .auto-article-body img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }

        .auto-article-body h3 {
            margin-top: 1.4em;
            margin-bottom: 0.4em;
            color: var(--text-dark);
            font-size: clamp(1.2rem, 2.5vw, 1.6rem);
            font-weight: 900;
            letter-spacing: -0.025em;
        }

        .auto-article-body ol {
            display: grid;
            gap: 10px;
            padding-left: 1.3em;
            color: #334155;
        }

        .auto-article-body table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.95rem;
            margin: 1.5em 0;
            border-radius: 14px;
            overflow: hidden;
            border: 1px solid #e2e8f0;
        }

        .auto-article-body table th {
            background: #f1f5f9;
            color: var(--text-dark);
            font-weight: 900;
            padding: 12px 16px;
            text-align: left;
            border-bottom: 2px solid #e2e8f0;
        }

        .auto-article-body table td {
            padding: 11px 16px;
            border-bottom: 1px solid #f1f5f9;
            color: #334155;
            vertical-align: top;
        }

        .auto-article-body table tr:last-child td {
            border-bottom: none;
        }

        .auto-article-body table tr:nth-child(even) td {
            background: #f8fafc;
        }

        /* Code-Blöcke & Inline-Code: umbrechen statt die Seite zu sprengen (hell, zur Marke passend) */
        .auto-article-body pre {
            max-width: 100%;
            margin: 1.4em 0;
            padding: 15px 17px;
            background: #f6f8fc;
            color: #1e293b;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            font-size: 0.85rem;
            line-height: 1.6;
            white-space: pre-wrap;
            overflow-wrap: break-word;
            word-break: break-word;
        }
        .auto-article-body pre code {
            background: none;
            color: inherit;
            padding: 0;
            font-size: inherit;
            white-space: pre-wrap;
            overflow-wrap: break-word;
            word-break: break-word;
        }
        .auto-article-body code {
            background: #eef2f8;
            color: #b91c5c;
            padding: 2px 6px;
            border-radius: 6px;
            font-size: 0.88em;
            overflow-wrap: break-word;
            word-break: break-word;
        }
        .auto-article-body iframe,
        .auto-article-body video,
        .auto-article-body embed,
        .auto-article-body object {
            max-width: 100%;
        }

        .auto-article-body .tip-box,
        .auto-article-body .warning-box,
        .auto-article-body .info-box {
            padding: 18px 20px;
            border-radius: 14px;
            border-left: 4px solid;
            margin: 1.5em 0;
            font-size: 0.97rem;
            line-height: 1.7;
        }

        .auto-article-body .tip-box {
            background: #f0fdf4;
            border-color: #22c55e;
            color: #166534;
        }

        .auto-article-body .warning-box {
            background: #fff7ed;
            border-color: #f97316;
            color: #9a3412;
        }

        .auto-article-body .info-box {
            background: #eff6ff;
            border-color: #3b82f6;
            color: #1e40af;
        }

        .auto-article-body .tip-box strong,
        .auto-article-body .warning-box strong,
        .auto-article-body .info-box strong {
            display: block;
            margin-bottom: 6px;
            font-size: 0.8rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .auto-article-sidebar {
            position: sticky;
            top: 118px;
            display: grid;
            gap: 18px;
        }

        .auto-ad-sidebar {
            position: sticky;
            top: 118px;
        }

        .auto-ad-box {
            min-height: 360px;
            padding: 12px;
            border: 1px solid #e2e8f0;
            border-radius: 22px;
            background: rgba(248, 250, 252, 0.9);
            text-align: center;
        }

        .auto-ad-label {
            margin-bottom: 8px;
            color: #94a3b8;
            font-size: 0.62rem;
            font-weight: 900;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .auto-ad-placeholder {
            display: grid;
            place-items: center;
            min-height: 300px;
            border: 1px dashed #cbd5e1;
            border-radius: 16px;
            color: #94a3b8;
            font-size: 0.82rem;
            font-weight: 800;
        }

        /* ── Artikel-Abschluss (Themen · Links · Ähnliche Artikel) — hell & clean ── */
        /* Bewusst ein <div> (kein <footer>), sonst greift die globale dunkle footer-Regel. */
        .auto-article-footer {
            margin-top: 64px;
            padding-top: 44px;
            border-top: 1px solid #e9eef5;
            display: grid;
            gap: 46px;
            background: transparent;
            color: var(--text-dark);
        }

        .auto-article-footer-section h2 {
            margin: 0 0 18px;
            color: var(--text-dark);
            font-size: 1.25rem;
            font-weight: 900;
            letter-spacing: -0.02em;
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            overflow-wrap: break-word;
        }
        .auto-article-footer-section h2 i { color: var(--primary); font-size: 0.86em; }

        .auto-article-tags { display: flex; gap: 9px; flex-wrap: wrap; }

        .auto-article-tag {
            display: inline-flex;
            padding: 8px 15px;
            border-radius: 999px;
            border: 1px solid #e6ebf3;
            background: #f6f8fc;
            color: #475569;
            font-size: 0.85rem;
            font-weight: 800;
            text-decoration: none;
        }
        .auto-article-tag--cat {
            background: color-mix(in srgb, var(--primary) 12%, #fff);
            border-color: color-mix(in srgb, var(--primary) 28%, #e6ebf3);
            color: color-mix(in srgb, var(--primary) 72%, #1d1d1f);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-size: 0.78rem;
        }

        .auto-article-link-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 12px;
        }

        .auto-article-link {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 16px 18px;
            border: 1px solid #e9eef5;
            border-radius: 16px;
            background: #ffffff;
            color: inherit;
            text-decoration: none;
            box-shadow: 0 12px 26px -22px rgba(15, 30, 80, 0.4);
            transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
        }
        .auto-article-link:hover {
            border-color: color-mix(in srgb, var(--primary) 42%, #e9eef5);
            transform: translateY(-2px);
            box-shadow: 0 18px 30px -20px rgba(15, 30, 80, 0.42);
        }
        .auto-article-link strong { color: var(--text-dark); line-height: 1.35; font-size: 0.95rem; }
        .auto-article-link span {
            display: inline-flex; align-items: center; gap: 6px;
            color: var(--text-muted); font-size: 0.78rem; font-weight: 800;
        }
        .auto-article-link span i { color: var(--primary); font-size: 0.9em; }

        .auto-related-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 16px;
        }

        .auto-related-card {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border: 1px solid #e9eef5;
            border-radius: 18px;
            background: #ffffff;
            color: inherit;
            text-decoration: none;
            box-shadow: 0 12px 26px -22px rgba(15, 30, 80, 0.4);
            transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
        }
        .auto-related-card:hover {
            transform: translateY(-4px);
            border-color: color-mix(in srgb, var(--primary) 30%, #e9eef5);
            box-shadow: 0 20px 34px -20px rgba(15, 30, 80, 0.45);
        }

        .auto-related-media {
            position: relative; aspect-ratio: 16 / 9; overflow: hidden;
            background: linear-gradient(135deg, #e7eefb 0%, #f3f7ff 100%);
        }
        .auto-related-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .auto-related-media[data-ph] {
            background: linear-gradient(135deg, hsl(var(--ph) 70% 90%) 0%, hsl(var(--ph) 72% 80%) 100%);
        }
        .auto-related-ph {
            position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center; gap: 8px;
            color: hsl(var(--ph) 55% 32%);
            font-weight: 900; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em;
        }

        .auto-related-card-body { padding: 14px 16px 16px; }
        .auto-related-card strong {
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
            color: var(--text-dark); font-size: 0.95rem; line-height: 1.38; margin-bottom: 9px;
        }
        .auto-related-cat {
            display: inline-block; padding: 3px 11px; border-radius: 999px;
            background: color-mix(in srgb, var(--primary) 10%, #fff);
            color: var(--primary);
            font-size: 0.72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em;
        }

        @media (max-width: 900px) {
            /* WICHTIG: minmax(0, 1fr) statt bloßem 1fr — sonst dehnt sich die Spalte auf
               die min-content-Breite des breitesten Kindes (Tabelle/Code) und sprengt die Seite. */
            .auto-article-layout {
                grid-template-columns: minmax(0, 1fr);
            }

            .auto-article-layout > * {
                min-width: 0;
            }

            .auto-article-sidebar,
            .auto-ad-sidebar {
                position: static;
            }

            .auto-ad-sidebar {
                display: none;
            }
        }

        /* ════════ Mobile-Optimierung ════════ */
        @media (max-width: 768px) {
            .auto-article-hero { padding: 102px 18px 34px; }
            .auto-article-title {
                font-size: clamp(1.85rem, 8.2vw, 3rem);
                letter-spacing: -0.03em;
                line-height: 1.08;
                margin-bottom: 18px;
            }
            .auto-article-lead { font-size: 1.02rem; line-height: 1.65; }
            .auto-article-meta { gap: 8px; margin-bottom: 18px; font-size: 0.8rem; }
            .auto-article-hero-media { margin-top: 22px; border-radius: 18px; }
            .auto-article-hero-media img { max-height: 300px; }

            .auto-article-section { padding: 34px 18px 70px; }
            .auto-article-layout { gap: 0; }
            .auto-article-body { font-size: 1rem; line-height: 1.75; overflow-wrap: break-word; word-break: break-word; }
            .auto-article-body > * + * { margin-top: 1.2em; }
            .auto-article-body h2 { font-size: clamp(1.5rem, 6.4vw, 2.1rem); margin-top: 1.5em; }
            .auto-article-body h3 { font-size: 1.16rem; }

            /* Bilder & Boxen nie breiter als der Schirm */
            .auto-article-body img,
            .auto-article-body figure { max-width: 100%; height: auto; border-radius: 16px; }
            .auto-article-body .tip-box,
            .auto-article-body .info-box,
            .auto-article-body .warning-box { padding: 15px 16px; font-size: 0.92rem; }

            /* Tabellen horizontal scrollbar machen, statt die Seite zu sprengen */
            .auto-article-body table {
                display: block;
                width: 100%;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                white-space: nowrap;
                font-size: 0.86rem;
                border-radius: 12px;
            }
            .auto-article-body table th,
            .auto-article-body table td { padding: 9px 12px; }

            /* Abschluss-Sektion (Themen · Links · Ähnliche) einspaltig */
            .auto-article-footer { margin-top: 48px; padding-top: 34px; gap: 34px; }
            .auto-article-footer-section h2 { font-size: 1.15rem; }
            .auto-article-link-list { grid-template-columns: 1fr; }
            .auto-related-list { grid-template-columns: 1fr 1fr; gap: 12px; }
        }

        @media (max-width: 460px) {
            .auto-related-list { grid-template-columns: 1fr; }
            .auto-article-back { margin-bottom: 18px; }
        }
    </style>

    <header class="auto-article-hero">
        <div class="container">
            <div class="auto-article-hero-inner">
                <a class="auto-article-back" href="{{ route('news.index') }}"><i class="fas fa-arrow-left"></i> Zur Übersicht</a>
                    <div class="auto-article-meta">
                        <span class="auto-article-category">{{ $page['category'] }}</span>
                        <span class="auto-article-author">Von <a href="{{ route('kontakt') }}" rel="author">Arthur Kotsch</a></span>
                        @if($page['publishedLabel'])
                            <span>{{ $page['publishedLabel'] }}</span>
                        @endif
                        @if($page['readingTime'])
                            <span>{{ $page['readingTime'] }}</span>
                        @endif
                    </div>
                    <h1 class="auto-article-title">{{ $page['title'] }}</h1>
                    <p class="auto-article-lead">{{ $page['description'] }}</p>
                    @if($page['heroImage'])
                        <figure class="auto-article-hero-media">
                            <img src="{{ $page['heroImage'] }}" alt="{{ $page['heroAlt'] }}" loading="eager">
                        </figure>
                    @endif
            </div>
        </div>
    </header>

    <section class="auto-article-section">
        <div class="container auto-article-layout">

            <div>
                <article class="auto-article-body">
                    {!! $page['body'] !!}
                </article>

                {{-- Werbung (PropellerAds Direct Link) — eingebettet nach dem Artikeltext,
                     zwei Karten nebeneinander. Überlappt nichts (im Textfluss der Spalte). --}}
                @include('partials.direct-link-ads')

                <div class="auto-article-footer">
                    <div class="auto-article-footer-section">
                        <h2><i class="fas fa-tags"></i> Themen</h2>
                        <div class="auto-article-tags">
                            <span class="auto-article-tag auto-article-tag--cat">{{ $page['category'] }}</span>
                            @foreach($page['tags'] as $tag)
                                <span class="auto-article-tag">#{{ $tag }}</span>
                            @endforeach
                        </div>
                    </div>

                    @php
                        $categoryResources = [
                            // ── Hoch-volumige Themen-Kategorien (topisch passende Quellen statt Software-Default) ──
                            'Mathematik'   => [
                                ['label' => 'Wolfram MathWorld – Mathematik-Nachschlagewerk', 'url' => 'https://mathworld.wolfram.com/', 'host' => 'mathworld.wolfram.com'],
                                ['label' => 'Khan Academy – Mathematik lernen', 'url' => 'https://de.khanacademy.org/math', 'host' => 'de.khanacademy.org'],
                                ['label' => 'Mathebibel – Formeln & Erklärungen', 'url' => 'https://www.mathebibel.de/', 'host' => 'mathebibel.de'],
                            ],
                            'Finanzen'     => [
                                ['label' => 'Finanztip – Unabhängige Finanztipps', 'url' => 'https://www.finanztip.de/', 'host' => 'finanztip.de'],
                                ['label' => 'Verbraucherzentrale – Geld & Versicherungen', 'url' => 'https://www.verbraucherzentrale.de/geld-versicherungen', 'host' => 'verbraucherzentrale.de'],
                                ['label' => 'Deutsche Bundesbank – Zinsen & Statistiken', 'url' => 'https://www.bundesbank.de/', 'host' => 'bundesbank.de'],
                            ],
                            'Gesundheit'   => [
                                ['label' => 'gesund.bund.de – Verlässliche Gesundheitsinfos', 'url' => 'https://gesund.bund.de/', 'host' => 'gesund.bund.de'],
                                ['label' => 'Stiftung Warentest – Gesundheit', 'url' => 'https://www.test.de/gesundheit/', 'host' => 'test.de'],
                                ['label' => 'BZgA – Gesundheitliche Aufklärung', 'url' => 'https://www.bzga.de/', 'host' => 'bzga.de'],
                            ],
                            'Developer'    => [
                                ['label' => 'MDN Web Docs – Web-Referenz', 'url' => 'https://developer.mozilla.org/de/', 'host' => 'developer.mozilla.org'],
                                ['label' => 'Stack Overflow – Entwickler-Q&A', 'url' => 'https://stackoverflow.com/', 'host' => 'stackoverflow.com'],
                                ['label' => 'GitHub – Code & Open Source', 'url' => 'https://github.com/', 'host' => 'github.com'],
                                ['label' => 'DevDocs – API-Dokumentationen', 'url' => 'https://devdocs.io/', 'host' => 'devdocs.io'],
                            ],
                            'Text'         => [
                                ['label' => 'Duden – Rechtschreibung & Grammatik', 'url' => 'https://www.duden.de/', 'host' => 'duden.de'],
                                ['label' => 'DWDS – Digitales Wörterbuch', 'url' => 'https://www.dwds.de/', 'host' => 'dwds.de'],
                                ['label' => 'LanguageTool – Rechtschreibprüfung', 'url' => 'https://languagetool.org/de', 'host' => 'languagetool.org'],
                            ],
                            'Haushalt'     => [
                                ['label' => 'Verbraucherzentrale – Energie & Haushalt', 'url' => 'https://www.verbraucherzentrale.de/energie', 'host' => 'verbraucherzentrale.de'],
                                ['label' => 'Stiftung Warentest – Haushalt & Garten', 'url' => 'https://www.test.de/haushalt-garten/', 'host' => 'test.de'],
                                ['label' => 'co2online – Energie sparen im Haushalt', 'url' => 'https://www.co2online.de/', 'host' => 'co2online.de'],
                            ],
                            'Business'     => [
                                ['label' => 'Handelsblatt – Wirtschaftsnachrichten', 'url' => 'https://www.handelsblatt.com/', 'host' => 'handelsblatt.com'],
                                ['label' => 'Existenzgründer – BMWK-Portal', 'url' => 'https://www.existenzgruender.de/', 'host' => 'existenzgruender.de'],
                                ['label' => 'IHK – Industrie- und Handelskammer', 'url' => 'https://www.ihk.de/', 'host' => 'ihk.de'],
                            ],
                            'Marketing'    => [
                                ['label' => 'OMR – Online Marketing Rockstars', 'url' => 'https://omr.com/de/', 'host' => 'omr.com'],
                                ['label' => 'HubSpot Blog – Marketing-Wissen', 'url' => 'https://blog.hubspot.de/', 'host' => 'blog.hubspot.de'],
                                ['label' => 'Google Search Central – SEO & Marketing', 'url' => 'https://developers.google.com/search', 'host' => 'developers.google.com'],
                            ],
                            'Auto'         => [
                                ['label' => 'ADAC – Auto, Test & Ratgeber', 'url' => 'https://www.adac.de/rund-ums-fahrzeug/', 'host' => 'adac.de'],
                                ['label' => 'Auto Motor und Sport – Tests & News', 'url' => 'https://www.auto-motor-und-sport.de/', 'host' => 'auto-motor-und-sport.de'],
                                ['label' => 'Kraftfahrt-Bundesamt – Kfz-Infos', 'url' => 'https://www.kba.de/', 'host' => 'kba.de'],
                            ],
                            'Reise'        => [
                                ['label' => 'ADAC – Reise-Tipps', 'url' => 'https://www.adac.de/reise-freizeit/', 'host' => 'adac.de'],
                                ['label' => 'Reisewarnung – Auswärtiges Amt', 'url' => 'https://www.auswaertiges-amt.de/de/ReiseUndSicherheit/reise-und-sicherheitshinweise', 'host' => 'auswaertiges-amt.de'],
                                ['label' => 'Tripadvisor – Reisebewertungen', 'url' => 'https://www.tripadvisor.de/', 'host' => 'tripadvisor.de'],
                            ],
                            'Sport'        => [
                                ['label' => 'DOSB – Deutscher Olympischer Sportbund', 'url' => 'https://www.dosb.de/', 'host' => 'dosb.de'],
                                ['label' => 'Stiftung Warentest – Sport & Fitness', 'url' => 'https://www.test.de/', 'host' => 'test.de'],
                                ['label' => 'Verbraucherzentrale – Fitnessstudio & Sport', 'url' => 'https://www.verbraucherzentrale.de/', 'host' => 'verbraucherzentrale.de'],
                            ],
                            'Design'       => [
                                ['label' => 'Smashing Magazine – Web- & UX-Design', 'url' => 'https://www.smashingmagazine.com/', 'host' => 'smashingmagazine.com'],
                                ['label' => 'Dribbble – Design-Inspiration', 'url' => 'https://dribbble.com/', 'host' => 'dribbble.com'],
                                ['label' => 'Adobe Color – Farbpaletten', 'url' => 'https://color.adobe.com/de/', 'host' => 'color.adobe.com'],
                            ],
                            'Alltag'       => [
                                ['label' => 'Verbraucherzentrale – Ratgeber für den Alltag', 'url' => 'https://www.verbraucherzentrale.de/', 'host' => 'verbraucherzentrale.de'],
                                ['label' => 'Stiftung Warentest – Tests & Ratgeber', 'url' => 'https://www.test.de/', 'host' => 'test.de'],
                                ['label' => 'Haushaltsfragen – Tipps & Tricks', 'url' => 'https://www.haushaltsfee.org/', 'host' => 'haushaltsfee.org'],
                            ],
                            'Software'     => [
                                ['label' => 'heise Download – Software-Downloads', 'url' => 'https://www.heise.de/download/', 'host' => 'heise.de'],
                                ['label' => 'Chip.de – Freeware & Programme', 'url' => 'https://www.chip.de/downloads/', 'host' => 'chip.de'],
                                ['label' => 'Softwareok.de – Freeware', 'url' => 'https://www.softwareok.de/', 'host' => 'softwareok.de'],
                                ['label' => 'AlternativeTo – Software-Alternativen finden', 'url' => 'https://alternativeto.net/', 'host' => 'alternativeto.net'],
                            ],
                            'Downloads'    => [
                                ['label' => 'heise Download – Sicherer Software-Download', 'url' => 'https://www.heise.de/download/', 'host' => 'heise.de'],
                                ['label' => 'Sabnzbd – NZB Usenet Downloader', 'url' => 'https://sabnzbd.org/', 'host' => 'sabnzbd.org'],
                                ['label' => 'NZBGet – Schneller Usenet Client', 'url' => 'https://nzbget.com/', 'host' => 'nzbget.com'],
                            ],
                            'News'         => [
                                ['label' => 'heise online – IT-Nachrichten', 'url' => 'https://www.heise.de/', 'host' => 'heise.de'],
                                ['label' => 'Golem.de – IT-News', 'url' => 'https://www.golem.de/', 'host' => 'golem.de'],
                                ['label' => 't3n – Digital Pioneers', 'url' => 'https://t3n.de/', 'host' => 't3n.de'],
                            ],
                            'KI'           => [
                                ['label' => 'heise online – KI & Künstliche Intelligenz', 'url' => 'https://www.heise.de/thema/KI', 'host' => 'heise.de'],
                                ['label' => 'Google AI Blog', 'url' => 'https://ai.googleblog.com/', 'host' => 'ai.googleblog.com'],
                                ['label' => 'Golem.de – KI & Machine Learning', 'url' => 'https://www.golem.de/specials/maschinelles-lernen/', 'host' => 'golem.de'],
                            ],
                            'Hosting'      => [
                                ['label' => 'Hostinger – Webhosting', 'url' => 'https://www.hostinger.de/', 'host' => 'hostinger.de'],
                                ['label' => 'Netcup – Günstige Server', 'url' => 'https://www.netcup.de/', 'host' => 'netcup.de'],
                                ['label' => 'cPanel – Hosting-Verwaltung', 'url' => 'https://cpanel.net/', 'host' => 'cpanel.net'],
                            ],
                            'SEO'          => [
                                ['label' => 'Google Search Central – SEO-Dokumentation', 'url' => 'https://developers.google.com/search', 'host' => 'developers.google.com'],
                                ['label' => 'Ahrefs Blog – SEO-Wissen', 'url' => 'https://ahrefs.com/blog/', 'host' => 'ahrefs.com'],
                                ['label' => 'Moz – SEO Basics', 'url' => 'https://moz.com/learn/seo', 'host' => 'moz.com'],
                                ['label' => 'Sistrix – SERP-Vorschau & SEO-Tools', 'url' => 'https://www.sistrix.de/', 'host' => 'sistrix.de'],
                            ],
                            'Apps'         => [
                                ['label' => 'App Store – iOS Apps', 'url' => 'https://apps.apple.com/de/', 'host' => 'apps.apple.com'],
                                ['label' => 'Google Play – Android Apps', 'url' => 'https://play.google.com/store/apps', 'host' => 'play.google.com'],
                                ['label' => 'Appbrain – Android App-Empfehlungen', 'url' => 'https://www.appbrain.com/', 'host' => 'appbrain.com'],
                            ],
                            'Datenschutz'  => [
                                ['label' => 'BSI – IT-Sicherheit für Bürger', 'url' => 'https://www.bsi.bund.de/', 'host' => 'bsi.bund.de'],
                                ['label' => 'datenschutz.org – Datenschutz erklärt', 'url' => 'https://www.datenschutz.org/', 'host' => 'datenschutz.org'],
                                ['label' => 'Privacy Handbuch', 'url' => 'https://www.privacy-handbuch.de/', 'host' => 'privacy-handbuch.de'],
                            ],
                            'Webentwicklung' => [
                                ['label' => 'MDN Web Docs – HTML/CSS/JS Referenz', 'url' => 'https://developer.mozilla.org/de/', 'host' => 'developer.mozilla.org'],
                                ['label' => 'CSS-Tricks – Frontend-Tipps', 'url' => 'https://css-tricks.com/', 'host' => 'css-tricks.com'],
                                ['label' => 'Laravel Dokumentation', 'url' => 'https://laravel.com/docs', 'host' => 'laravel.com'],
                            ],
                            'Android'       => [
                                ['label' => 'Google Play Store', 'url' => 'https://play.google.com/store/apps', 'host' => 'play.google.com'],
                                ['label' => 'Android-Hilfe.de – Forum & Tipps', 'url' => 'https://www.android-hilfe.de/', 'host' => 'android-hilfe.de'],
                                ['label' => 'AndroidPIT – News & Tests', 'url' => 'https://www.androidpit.de/', 'host' => 'androidpit.de'],
                            ],
                            'Browser'       => [
                                ['label' => 'Can I Use – Browser-Kompatibilität', 'url' => 'https://caniuse.com/', 'host' => 'caniuse.com'],
                                ['label' => 'heise online – Browser-News', 'url' => 'https://www.heise.de/thema/Browser', 'host' => 'heise.de'],
                                ['label' => 'Privacy Tests – Browser-Vergleich', 'url' => 'https://privacytests.org/', 'host' => 'privacytests.org'],
                            ],
                            'Gaming'        => [
                                ['label' => 'Steam – Spieleplattform', 'url' => 'https://store.steampowered.com/', 'host' => 'steampowered.com'],
                                ['label' => 'PC Games – News & Tests', 'url' => 'https://www.pcgames.de/', 'host' => 'pcgames.de'],
                                ['label' => 'Golem.de – Gaming', 'url' => 'https://www.golem.de/specials/games/', 'host' => 'golem.de'],
                            ],
                            'Hardware'      => [
                                ['label' => 'Heise ct – Hardware-Tests', 'url' => 'https://www.heise.de/ct/', 'host' => 'heise.de'],
                                ['label' => 'Computerbase – Hardware-Tests', 'url' => 'https://www.computerbase.de/', 'host' => 'computerbase.de'],
                                ['label' => 'UserBenchmark – System-Benchmarks', 'url' => 'https://www.userbenchmark.com/', 'host' => 'userbenchmark.com'],
                            ],
                            'Kommunikation' => [
                                ['label' => 'heise online – Kommunikations-Tools', 'url' => 'https://www.heise.de/thema/Kommunikation', 'host' => 'heise.de'],
                                ['label' => 'Alternative.me – Tool-Vergleich', 'url' => 'https://alternativeto.net/', 'host' => 'alternativeto.net'],
                                ['label' => 'Stiftung Warentest – Messenger-Vergleich', 'url' => 'https://www.test.de/', 'host' => 'test.de'],
                            ],
                            'Multimedia'    => [
                                ['label' => 'VideoHelp – Codecs & Player', 'url' => 'https://www.videohelp.com/', 'host' => 'videohelp.com'],
                                ['label' => 'heise Download – Multimedia', 'url' => 'https://www.heise.de/download/', 'host' => 'heise.de'],
                                ['label' => 'Codec Guide – K-Lite Codec Pack', 'url' => 'https://codecguide.com/', 'host' => 'codecguide.com'],
                            ],
                            'Sicherheit'    => [
                                ['label' => 'BSI – IT-Sicherheit für Bürger', 'url' => 'https://www.bsi.bund.de/', 'host' => 'bsi.bund.de'],
                                ['label' => 'AV-TEST – Antivirus-Bewertungen', 'url' => 'https://www.av-test.org/de/', 'host' => 'av-test.org'],
                                ['label' => 'Heise Security – IT-Sicherheit', 'url' => 'https://www.heise.de/security/', 'host' => 'heise.de'],
                            ],
                            'KI-Tools'      => [
                                ['label' => 'heise online – KI & Künstliche Intelligenz', 'url' => 'https://www.heise.de/thema/KI', 'host' => 'heise.de'],
                                ['label' => 'Hugging Face – KI-Modelle & Demos', 'url' => 'https://huggingface.co/', 'host' => 'huggingface.co'],
                                ['label' => 'Golem.de – KI & Machine Learning', 'url' => 'https://www.golem.de/specials/maschinelles-lernen/', 'host' => 'golem.de'],
                            ],
                            'Gesundheits-Apps' => [
                                ['label' => 'Stiftung Warentest – Gesundheits-Apps', 'url' => 'https://www.test.de/', 'host' => 'test.de'],
                                ['label' => 'BZgA – Bundeszentrale für gesundheitliche Aufklärung', 'url' => 'https://www.bzga.de/', 'host' => 'bzga.de'],
                                ['label' => 'RKI – Robert Koch-Institut', 'url' => 'https://www.rki.de/', 'host' => 'rki.de'],
                            ],
                            'Betriebssystem' => [
                                ['label' => 'Microsoft – Windows-Support', 'url' => 'https://support.microsoft.com/de-de/', 'host' => 'support.microsoft.com'],
                                ['label' => 'heise online – Betriebssysteme', 'url' => 'https://www.heise.de/thema/Betriebssysteme', 'host' => 'heise.de'],
                                ['label' => 'Chip.de – Windows-Tipps', 'url' => 'https://www.chip.de/themen/windows/', 'host' => 'chip.de'],
                            ],
                            'Windows'       => [
                                ['label' => 'Microsoft – Windows-Support', 'url' => 'https://support.microsoft.com/de-de/', 'host' => 'support.microsoft.com'],
                                ['label' => 'heise online – Windows-News', 'url' => 'https://www.heise.de/thema/Windows', 'host' => 'heise.de'],
                                ['label' => 'Chip.de – Windows-Tipps', 'url' => 'https://www.chip.de/themen/windows/', 'host' => 'chip.de'],
                            ],
                            'Freizeit'      => [
                                ['label' => 'heise online – Unterhaltungselektronik', 'url' => 'https://www.heise.de/thema/Unterhaltungselektronik', 'host' => 'heise.de'],
                                ['label' => 'Chip.de – Freizeit & Hobby', 'url' => 'https://www.chip.de/', 'host' => 'chip.de'],
                                ['label' => 'Stiftung Warentest – Freizeit', 'url' => 'https://www.test.de/', 'host' => 'test.de'],
                            ],
                            'Reise'         => [
                                ['label' => 'ADAC – Reise-Tipps', 'url' => 'https://www.adac.de/reise-freizeit/', 'host' => 'adac.de'],
                                ['label' => 'Reisewarnung – Auswärtiges Amt', 'url' => 'https://www.auswaertiges-amt.de/de/ReiseUndSicherheit/reise-und-sicherheitshinweise', 'host' => 'auswaertiges-amt.de'],
                                ['label' => 'Tripadvisor – Reisebewertungen', 'url' => 'https://www.tripadvisor.de/', 'host' => 'tripadvisor.de'],
                            ],
                            'Recht'         => [
                                ['label' => 'Bundesministerium der Justiz – Gesetze', 'url' => 'https://www.bmj.de/', 'host' => 'bmj.de'],
                                ['label' => 'Gesetze im Internet – Bundesrecht', 'url' => 'https://www.gesetze-im-internet.de/', 'host' => 'gesetze-im-internet.de'],
                                ['label' => 'Verbraucherzentrale – Rechtstipps', 'url' => 'https://www.verbraucherzentrale.de/', 'host' => 'verbraucherzentrale.de'],
                            ],
                            'Wetter'        => [
                                ['label' => 'Deutscher Wetterdienst', 'url' => 'https://www.dwd.de/', 'host' => 'dwd.de'],
                                ['label' => 'WetterOnline – Wettervorhersage', 'url' => 'https://www.wetteronline.de/', 'host' => 'wetteronline.de'],
                                ['label' => 'Wetter.com – Wetter Deutschland', 'url' => 'https://www.wetter.com/', 'host' => 'wetter.com'],
                            ],
                            'Wirtschaft'    => [
                                ['label' => 'Handelsblatt – Wirtschaftsnachrichten', 'url' => 'https://www.handelsblatt.com/', 'host' => 'handelsblatt.com'],
                                ['label' => 'Statista – Statistiken & Daten', 'url' => 'https://de.statista.com/', 'host' => 'statista.com'],
                                ['label' => 'Bundesbank – Wirtschaftsberichte', 'url' => 'https://www.bundesbank.de/', 'host' => 'bundesbank.de'],
                            ],
                            'Telekommunikation' => [
                                ['label' => 'Bundesnetzagentur – Telekommunikation', 'url' => 'https://www.bundesnetzagentur.de/', 'host' => 'bundesnetzagentur.de'],
                                ['label' => 'Teltarif – Tarif-Vergleich', 'url' => 'https://www.teltarif.de/', 'host' => 'teltarif.de'],
                                ['label' => 'heise online – Telekommunikation', 'url' => 'https://www.heise.de/thema/Telekommunikation', 'host' => 'heise.de'],
                            ],
                            'Bildbearbeitung' => [
                                ['label' => 'GIMP – Kostenlose Bildbearbeitung', 'url' => 'https://www.gimp.org/', 'host' => 'gimp.org'],
                                ['label' => 'Adobe Photoshop – Hilfe & Tutorials', 'url' => 'https://helpx.adobe.com/de/photoshop/', 'host' => 'helpx.adobe.com'],
                                ['label' => 'Chip.de – Bildbearbeitung', 'url' => 'https://www.chip.de/themen/bildbearbeitung/', 'host' => 'chip.de'],
                            ],
                            'Browser-Tools' => [
                                ['label' => 'Chrome Web Store – Erweiterungen', 'url' => 'https://chromewebstore.google.com/', 'host' => 'chromewebstore.google.com'],
                                ['label' => 'Firefox Add-ons', 'url' => 'https://addons.mozilla.org/de/firefox/', 'host' => 'addons.mozilla.org'],
                                ['label' => 'Privacy Tests – Browser-Vergleich', 'url' => 'https://privacytests.org/', 'host' => 'privacytests.org'],
                            ],
                            'Kultur'        => [
                                ['label' => 'Deutsche Welle Kultur', 'url' => 'https://www.dw.com/de/themen/kultur/s-1445', 'host' => 'dw.com'],
                                ['label' => 'Zeit Online – Kultur', 'url' => 'https://www.zeit.de/kultur/index', 'host' => 'zeit.de'],
                                ['label' => 'Süddeutsche Zeitung – Kultur', 'url' => 'https://www.sueddeutsche.de/kultur', 'host' => 'sueddeutsche.de'],
                            ],
                            'Produktivität' => [
                                ['label' => 'Notion – Wissensmanagement', 'url' => 'https://www.notion.so/', 'host' => 'notion.so'],
                                ['label' => 'Lifehacker – Produktivitäts-Tipps', 'url' => 'https://lifehacker.com/', 'host' => 'lifehacker.com'],
                                ['label' => 'heise online – Produktivitäts-Tools', 'url' => 'https://www.heise.de/thema/Produktivitaet', 'host' => 'heise.de'],
                            ],
                            'Internet'      => [
                                ['label' => 'heise online – Internet-News', 'url' => 'https://www.heise.de/thema/Internet', 'host' => 'heise.de'],
                                ['label' => 'Golem.de – Internet & Netze', 'url' => 'https://www.golem.de/specials/internet/', 'host' => 'golem.de'],
                                ['label' => 'Klicksafe – Sicher im Netz', 'url' => 'https://www.klicksafe.de/', 'host' => 'klicksafe.de'],
                            ],
                            'Karriere'      => [
                                ['label' => 'LinkedIn – Berufsnetzwerk', 'url' => 'https://www.linkedin.com/', 'host' => 'linkedin.com'],
                                ['label' => 'XING – Jobs & Karriere', 'url' => 'https://www.xing.com/', 'host' => 'xing.com'],
                                ['label' => 'Bundesagentur für Arbeit – Jobbörse', 'url' => 'https://www.arbeitsagentur.de/jobsuche/', 'host' => 'arbeitsagentur.de'],
                            ],
                        ];
                        $extraLinks = $categoryResources[$page['category']] ?? $categoryResources['Software'];
                        $allLinks = array_values(array_filter(
                            array_merge($page['outboundLinks'], $extraLinks),
                            fn($l) => !empty($l['url'])
                        ));
                        $seen = [];
                        $dedupedLinks = [];
                        foreach ($allLinks as $l) {
                            $host = parse_url($l['url'], PHP_URL_HOST) ?: $l['url'];
                            if (!isset($seen[$host])) {
                                $seen[$host] = true;
                                $dedupedLinks[] = $l;
                            }
                        }
                    @endphp

                    @if(!empty($dedupedLinks))
                        <div class="auto-article-footer-section">
                            <h2><i class="fas fa-link"></i> Weiterführende Links</h2>
                            <div class="auto-article-link-list">
                                @foreach($dedupedLinks as $link)
                                    <a class="auto-article-link" href="{{ route('go', ['url' => $link['url']]) }}" rel="noopener noreferrer">
                                        <strong>{{ $link['label'] }}</strong>
                                        @if(!empty($link['host']) && strtolower(trim($link['host'])) !== strtolower(trim($link['label'])))
                                            <span><i class="fas fa-external-link-alt"></i>{{ $link['host'] }}</span>
                                        @endif
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    @if($relatedPages->isNotEmpty())
                        <div class="auto-article-footer-section">
                            <h2><i class="fas fa-newspaper"></i> Ähnliche Artikel</h2>
                            <div class="auto-related-list">
                                @foreach($relatedPages as $relatedPage)
                                    <a class="auto-related-card" href="{{ $relatedPage['url'] }}">
                                        @if($relatedPage['heroImage'])
                                            <div class="auto-related-media">
                                                <img src="{{ $relatedPage['heroImage'] }}" alt="{{ $relatedPage['heroAlt'] }}" loading="lazy">
                                            </div>
                                        @else
                                            <div class="auto-related-media" data-ph style="--ph: {{ $pageHue($relatedPage['slug']) }}">
                                                <span class="auto-related-ph"><i class="fas fa-newspaper"></i>{{ $relatedPage['category'] }}</span>
                                            </div>
                                        @endif
                                        <div class="auto-related-card-body">
                                            <strong>{{ $relatedPage['title'] }}</strong>
                                            <span class="auto-related-cat">{{ $relatedPage['category'] }}</span>
                                        </div>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <aside class="auto-article-sidebar">
                @include('news._ad-sidebar')
            </aside>

        </div>
    </section>

    <script>
    (function () {
        var goBase = '{{ route('go', ['url' => '__URL__']) }}';
        document.querySelectorAll('.auto-article-body a[href^="http"]').forEach(function (a) {
            a.addEventListener('click', function (e) {
                // Interne Links (kotsch.tech) direkt aufrufen — nur echte
                // externe Links über das /go-Interstitial leiten.
                var host = a.hostname || '';
                if (host === location.hostname || host === 'kotsch.tech' || host.endsWith('.kotsch.tech')) {
                    return;
                }
                e.preventDefault();
                window.location.href = goBase.replace('__URL__', encodeURIComponent(a.href));
            });
        });
    })();
    </script>
@endsection