@extends('layouts.app')
@section('ownCta', '1') {{-- eigene Pre-Footer-CTA (.ithx-cta) → generische Footer-CTA unterdrücken --}}

@php
    // Sprache NUR über das erste URL-Segment erkennen (Route::dispatch biegt request() nicht um).
    $siteLocale = in_array(request()->segment(1), ['de', 'en'], true) ? request()->segment(1) : 'de';
    $en = $siteLocale === 'en';
    $t  = fn ($de, $enT) => $en ? $enT : $de;
    $lp = $en ? 'en/' : '';

    // Ablauf (3 Schritte) — das Rückgrat der Seite (Direction B).
    $steps = [
        [
            'icon'  => 'fa-comment-dots',
            'title' => $t('Anrufen oder schreiben', 'Call or write'),
            'desc'  => $t('Schildern Sie mir kurz Ihr Problem — ganz in Ihren Worten. Fachvokabular brauchen Sie nicht.', 'Briefly describe your problem — in your own words. No technical jargon needed.'),
        ],
        [
            'icon'  => 'fa-calendar-check',
            'title' => $t('Termin vereinbaren', 'Arrange a date'),
            'desc'  => $t('Wir finden einen passenden Zeitpunkt. Ich komme zu Ihnen nach Hause oder helfe per Fernwartung.', 'We find a time that suits you. I come to your home or help via remote support.'),
        ],
        [
            'icon'  => 'fa-circle-check',
            'title' => $t('Problem gelöst', 'Problem solved'),
            'desc'  => $t('Ich behebe den Fehler und erkläre Ihnen auf Wunsch in Ruhe, was passiert ist.', 'I fix the issue and, if you like, calmly explain what happened.'),
        ],
    ];

    // Leistungen (3) — echte Inhalte, nichts erfunden.
    $services = [
        [
            'icon'    => 'fa-desktop',
            'title'   => $t('Computer & Laptop', 'Computer & Laptop'),
            'desc'    => $t('Langsam, eingefroren oder startet nicht mehr? Ich bringe Ihren PC wieder in Form — verständlich und in Ruhe.', 'Slow, frozen or won\'t start? I get your PC back in shape — clearly explained and without rush.'),
            'feat'    => false,
            'items'   => [
                $t('System-Reinigung & Speedup', 'System cleanup & speed-up'),
                $t('Virenschutz einrichten', 'Set up virus protection'),
                $t('Programme prüfen & einrichten', 'Check & set up programs'),
                $t('Windows-Neuinstallation', 'Fresh Windows installation'),
            ],
        ],
        [
            'icon'    => 'fa-mobile-screen-button',
            'title'   => $t('Handy & Tablet', 'Phone & Tablet'),
            'desc'    => $t('WhatsApp, Fotos oder E-Mails machen Probleme? Ich zeige Ihnen Schritt für Schritt, wie alles sicher und einfach funktioniert.', 'Trouble with WhatsApp, photos or e-mail? I show you step by step how everything works safely and simply.'),
            'feat'    => true,
            'badge'   => $t('Häufigste Anfrage', 'Most common request'),
            'items'   => [
                $t('WhatsApp & E-Mail einrichten', 'Set up WhatsApp & e-mail'),
                $t('Android & iPhone erklären', 'Android & iPhone explained'),
                $t('Speicherplatz prüfen', 'Check storage space'),
                $t('Updates & Einstellungen', 'Updates & settings'),
            ],
        ],
        [
            'icon'    => 'fa-wifi',
            'title'   => $t('WLAN & Internet', 'Wi-Fi & Internet'),
            'desc'    => $t('Kein Empfang im Schlafzimmer oder das Internet bricht ständig ab? Ich optimiere Ihr Netzwerk und schließe Geräte richtig an.', 'No signal in the bedroom or the internet keeps dropping? I optimise your network and connect devices the right way.'),
            'feat'    => false,
            'items'   => [
                $t('Router einrichten & optimieren', 'Set up & optimise the router'),
                $t('WLAN-Reichweite verbessern', 'Improve Wi-Fi range'),
                $t('Smart-TV & Streaming-Setup', 'Smart TV & streaming setup'),
                $t('Drucker & Scanner anschließen', 'Connect printer & scanner'),
            ],
        ],
    ];

    // Versprechen
    $promises = [
        [
            'icon'  => 'fa-hand-holding-heart',
            'title' => $t('Keine Lösung = kein Preis', 'No fix = no charge'),
            'desc'  => $t('Wenn ich Ihr Problem nicht lösen kann, zahlen Sie nichts. So einfach ist das.', 'If I can\'t solve your problem, you pay nothing. It\'s that simple.'),
        ],
        [
            'icon'  => 'fa-comments',
            'title' => $t('Geduld inklusive', 'Patience included'),
            'desc'  => $t('Ich erkläre alles so oft und so einfach, wie Sie es brauchen.', 'I explain everything as often and as simply as you need.'),
        ],
        [
            'icon'  => 'fa-house-chimney',
            'title' => $t('Vor-Ort-Service', 'On-site service'),
            'desc'  => $t('In Lichtenstein, Glauchau, Hohenstein-Ernstthal & Umgebung — oder per Fernwartung.', 'In Lichtenstein, Glauchau, Hohenstein-Ernstthal & the surrounding area — or via remote support.'),
        ],
    ];
@endphp

@section('title', $t('IT-Hilfe vor Ort | Lichtenstein & Umgebung | A. Kotsch', 'On-site IT Help | Lichtenstein & Region | A. Kotsch'))
@section('meta_description', $t('IT-Hilfe vor Ort für Computer, Handy und WLAN in Lichtenstein, Glauchau und Umgebung – geduldig, fair nach Aufwand, Erstberatung kostenlos.', 'On-site IT help for computer, phone and Wi-Fi in Lichtenstein, Glauchau and the region – patient, fair by effort, free first consultation.'))

@section('content')

{{-- ===================== HERO — LOCAL & ON-SITE ===================== --}}
<header class="ithx-hero">
    <div class="container ithx-hero-inner reveal active">
        <div class="ithx-hero-copy">
            <span class="ithx-chip">
                <i class="fa-solid fa-house-chimney"></i>
                {{ $t('Vor-Ort-Service · Region Lichtenstein', 'On-site service · Lichtenstein area') }}
            </span>
            <h1 class="ithx-hero-h">
                {{ $t('Technik-Stress?', 'Tech trouble?') }}<br>
                <span class="ithx-accent">{{ $t('Ich komme zu Ihnen.', 'I come to you.') }}</span>
            </h1>
            <p class="ithx-hero-p">
                {{ $t('Persönliche IT-Hilfe direkt bei Ihnen zuhause — für Computer, Handy und WLAN. Ich nehme mir Zeit, erkläre alles in Ruhe und fahre direkt in Ihre Nähe.', 'Personal IT help right at your home — for computer, phone and Wi-Fi. I take my time, explain everything calmly and come right to your door.') }}
            </p>
            <div class="ithx-hero-btns">
                <a href="/{{ $lp }}kontakt?subject=Hilfe-Anfrage" class="ithx-btn-primary">
                    <i class="fa-solid fa-headset"></i>
                    {{ $t('Termin anfragen', 'Request a visit') }}
                </a>
                <a href="#ith-ablauf" class="ithx-btn-ghost">
                    {{ $t('So einfach geht es', 'How it works') }}
                    <i class="fa-solid fa-arrow-down"></i>
                </a>
            </div>
            <ul class="ithx-hero-trust">
                <li><i class="fa-solid fa-circle-check"></i> <span>{{ $t('Keine Lösung = kein Preis', 'No fix = no charge') }}</span></li>
                <li><i class="fa-solid fa-circle-check"></i> <span>{{ $t('Erstberatung kostenlos', 'First consultation free') }}</span></li>
                <li><i class="fa-solid fa-circle-check"></i> <span>{{ $t('Geduldig erklärt', 'Patiently explained') }}</span></li>
            </ul>
        </div>

        {{-- Flaches, deterministisches Motiv: Karte mit Haus + Pin + Helfer-Schild (kein 3D-Stacking) --}}
        <div class="ithx-hero-art" aria-hidden="true">
            <div class="ithx-map-card">
                <span class="ithx-map-tag">
                    <i class="fa-solid fa-location-dot"></i>
                    {{ $t('Ihre Region', 'Your area') }}
                </span>
                <svg class="ithx-map-svg" viewBox="0 0 400 320" role="img"
                     aria-label="{{ $t('Karte der Region mit Haus und Schutzschild', 'Map of the region with house and shield') }}"
                     xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <linearGradient id="ithxSky" x1="0" y1="0" x2="0" y2="1">
                            <stop offset="0" stop-color="var(--primary-light)"/>
                            <stop offset="1" stop-color="#ffffff"/>
                        </linearGradient>
                        <linearGradient id="ithxRoof" x1="0" y1="0" x2="1" y2="1">
                            <stop offset="0" stop-color="var(--primary)"/>
                            <stop offset="1" stop-color="var(--primary-dark)"/>
                        </linearGradient>
                    </defs>

                    {{-- Himmel + weiche Regions-Fläche --}}
                    <rect x="0" y="0" width="400" height="320" fill="url(#ithxSky)"/>
                    <path d="M40 250 Q120 215 210 245 T390 235 L390 320 L20 320 Z" fill="var(--primary-soft)"/>
                    {{-- gepunktete Route zum Pin --}}
                    <path d="M70 285 C150 270 150 200 230 195" fill="none"
                          stroke="var(--primary)" stroke-width="3" stroke-linecap="round"
                          stroke-dasharray="2 12" opacity="0.55"/>

                    {{-- Haus --}}
                    <rect x="150" y="150" width="120" height="100" rx="10" fill="#ffffff"
                          stroke="var(--primary-soft)" stroke-width="2"/>
                    <path d="M138 158 L210 104 L282 158 Z" fill="url(#ithxRoof)"/>
                    <rect x="196" y="196" width="28" height="54" rx="5" fill="var(--primary-soft)"/>
                    <rect x="166" y="172" width="22" height="22" rx="4" fill="var(--primary-soft)"/>
                    <rect x="232" y="172" width="22" height="22" rx="4" fill="var(--primary-soft)"/>

                    {{-- Karten-Pin --}}
                    <ellipse cx="318" cy="206" rx="20" ry="7" fill="var(--primary-soft)"/>
                    <path d="M318 120 a34 34 0 0 1 34 34 c0 26 -34 56 -34 56 s-34 -30 -34 -56 a34 34 0 0 1 34 -34 Z" fill="var(--primary)"/>
                    <circle cx="318" cy="154" r="13" fill="#ffffff"/>

                    {{-- Helfer-Schild --}}
                    <path d="M86 120 l30 -12 l30 12 v22 c0 22 -16 34 -30 40 c-14 -6 -30 -18 -30 -40 Z"
                          fill="#ffffff" stroke="var(--primary)" stroke-width="3"/>
                    <path d="M104 142 l8 8 l16 -18" fill="none" stroke="var(--primary)"
                          stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <div class="ithx-map-foot">
                    <i class="fa-solid fa-shield-halved"></i>
                    <span>{{ $t('Der zuverlässige Helfer aus der Nähe', 'The reliable helper from nearby') }}</span>
                </div>
            </div>
        </div>
    </div>
</header>

{{-- ===================== ABLAUF — DAS RÜCKGRAT ===================== --}}
<section id="ith-ablauf" class="ithx-section ithx-section-light">
    <div class="container">
        <div class="ithx-head reveal">
            <span class="ithx-eyebrow">{{ $t('Kein Stress', 'No stress') }}</span>
            <h2 class="ithx-h2">{{ $t('So einfach geht es', 'This is all it takes') }}</h2>
            <p class="ithx-sub">{{ $t('In drei ruhigen Schritten ist Ihr Problem gelöst — ganz ohne Fachchinesisch.', 'Your problem is solved in three calm steps — with no tech-speak.') }}</p>
        </div>

        <ol class="ithx-steps reveal">
            @foreach ($steps as $i => $step)
                <li class="ithx-step">
                    <span class="ithx-step-rail" aria-hidden="true"></span>
                    <span class="ithx-step-num">{{ $i + 1 }}</span>
                    <span class="ithx-step-ico"><i class="fa-solid {{ $step['icon'] }}"></i></span>
                    <h3 class="ithx-step-title">{{ $step['title'] }}</h3>
                    <p class="ithx-step-desc">{{ $step['desc'] }}</p>
                </li>
            @endforeach
        </ol>
    </div>
</section>

{{-- ===================== LEISTUNGEN ===================== --}}
<section id="ith-leistungen" class="ithx-section ithx-section-white">
    <div class="container">
        <div class="ithx-head reveal">
            <span class="ithx-eyebrow">{{ $t('Meine Leistungen', 'My services') }}</span>
            <h2 class="ithx-h2">{{ $t('Wobei darf ich Ihnen helfen?', 'How can I help you?') }}</h2>
            <p class="ithx-sub">{{ $t('Drei Bereiche, in denen ich am häufigsten unterstütze — vor Ort oder per Fernwartung.', 'Three areas where I help most often — on-site or via remote support.') }}</p>
        </div>

        <div class="ithx-services reveal">
            @foreach ($services as $svc)
                <article class="ithx-card {{ $svc['feat'] ? 'ithx-card-feat' : '' }}">
                    @if ($svc['feat'])
                        <span class="ithx-card-badge"><i class="fa-solid fa-star"></i> {{ $svc['badge'] }}</span>
                    @endif
                    <span class="ithx-card-icon"><i class="fa-solid {{ $svc['icon'] }}"></i></span>
                    <h3 class="ithx-card-title">{{ $svc['title'] }}</h3>
                    <p class="ithx-card-desc">{{ $svc['desc'] }}</p>
                    <ul class="ithx-checks">
                        @foreach ($svc['items'] as $item)
                            <li><i class="fa-solid fa-check"></i><span>{{ $item }}</span></li>
                        @endforeach
                    </ul>
                </article>
            @endforeach
        </div>
    </div>
</section>

{{-- ===================== PREISE / VERSPRECHEN ===================== --}}
<section id="ith-preise" class="ithx-section ithx-section-light">
    <div class="container">
        <div class="ithx-promise-grid reveal">
            <div class="ithx-promise-copy">
                <span class="ithx-eyebrow">{{ $t('Ehrlich & transparent', 'Honest & transparent') }}</span>
                <h2 class="ithx-h2 ithx-h2-left">{{ $t('Faire Preise.', 'Fair rates.') }}<br>{{ $t('Kein Kleingedrucktes.', 'No small print.') }}</h2>
                <p class="ithx-promise-text">
                    {{ $t('Ich bin dualer Student und biete IT-Hilfe zu fairen Konditionen an — ohne versteckte Kosten und ohne teure Anfahrtspauschalen in der Region. Abgerechnet wird nach Aufwand, die Erstberatung ist kostenlos.', 'I\'m a dual-study student and offer IT help at fair rates — with no hidden costs and no expensive travel fees within the region. You pay by effort, and the first consultation is free.') }}
                </p>
                <div class="ithx-price-tags">
                    <span class="ithx-ptag"><i class="fa-solid fa-graduation-cap"></i>{{ $t('Dualer Student', 'Dual-study student') }}</span>
                    <span class="ithx-ptag"><i class="fa-solid fa-scale-balanced"></i>{{ $t('Faire Preise', 'Fair rates') }}</span>
                    <span class="ithx-ptag"><i class="fa-solid fa-gift"></i>{{ $t('Erstberatung kostenlos', 'First consultation free') }}</span>
                </div>
                <div class="ithx-price-pill">
                    <i class="fa-solid fa-tag"></i>
                    <span>{{ $t('Preis:', 'Price:') }} <strong>{{ $t('Fair & nach Aufwand', 'Fair & by effort') }}</strong> — {{ $t('Erstberatung kostenlos.', 'first consultation free.') }}</span>
                </div>
            </div>

            <div class="ithx-promise-box">
                <h3 class="ithx-promise-h">{{ $t('Mein Versprechen an Sie', 'My promise to you') }}</h3>
                <ul class="ithx-promise-list">
                    @foreach ($promises as $p)
                        <li class="ithx-promise-item">
                            <span class="ithx-pi-icon"><i class="fa-solid {{ $p['icon'] }}"></i></span>
                            <span class="ithx-pi-body">
                                <strong>{{ $p['title'] }}</strong>
                                <span>{{ $p['desc'] }}</span>
                            </span>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>

        {{-- Datenschutz-Hinweis (beibehalten) --}}
        <div class="ithx-privacy reveal">
            <span class="ithx-privacy-icon"><i class="fa-solid fa-shield-halved"></i></span>
            <div class="ithx-privacy-body">
                <h3>{{ $t('Datenschutz bei der IT-Hilfe', 'Data protection during IT help') }}</h3>
                <p>{{ $t('Bei der IT-Hilfe können personenbezogene Daten sichtbar werden. Diese werden nur verarbeitet, soweit dies für die gewünschte Unterstützung erforderlich ist. Zugangsdaten geben Sie nach Möglichkeit bitte selbst ein.', 'During IT help personal data may become visible. It is only processed as far as needed for the requested support. Where possible, please enter access credentials yourself.') }}</p>
            </div>
        </div>
    </div>
</section>

{{-- ===================== KONTAKT — FINALE CTA (einziges dunkles Band) ===================== --}}
<section id="ith-kontakt" class="ithx-cta">
    <div class="container ithx-cta-inner reveal">
        <span class="ithx-cta-badge"><i class="fa-solid fa-house-chimney"></i> {{ $t('Vor Ort & per Fernwartung', 'On-site & remote') }}</span>
        <h2 class="ithx-cta-h">{{ $t('Soll ich vorbeikommen?', 'Shall I come over?') }}</h2>
        <p class="ithx-cta-p">{{ $t('Schreiben Sie mir kurz, was nicht funktioniert. Ich melde mich so schnell wie möglich bei Ihnen — unverbindlich und mit kostenloser Erstberatung.', 'Just tell me what isn\'t working. I\'ll get back to you as soon as possible — no obligation, with a free first consultation.') }}</p>
        <a href="/{{ $lp }}kontakt?subject=Hilfe-Anfrage" class="ithx-cta-btn">
            {{ $t('Jetzt Hilfe anfragen', 'Request help now') }}
            <i class="fa-solid fa-arrow-right"></i>
        </a>
        <p class="ithx-cta-note">
            <i class="fa-solid fa-location-dot"></i>
            <span>{{ $t('In Lichtenstein, Glauchau, Hohenstein-Ernstthal & Umgebung — oder ganz bequem per Fernwartung.', 'In Lichtenstein, Glauchau, Hohenstein-Ernstthal & the surrounding area — or conveniently via remote support.') }}</span>
        </p>
    </div>
</section>

<style>
    /* ============ IT-HILFE · Direction B — Local & on-site ============ */
    /* Alle Custom-Klassen mit ithx- · Akzent ausschließlich über var(--primary) = WARM ORANGE */
    #ith-ablauf, #ith-leistungen, #ith-preise, #ith-kontakt { scroll-margin-top: 84px; }

    .ithx-section { padding: clamp(64px, 9vw, 120px) 6%; }
    .ithx-section-light { background: var(--bg-light); }
    .ithx-section-white { background: #ffffff; }

    .ithx-head { max-width: 640px; margin: 0 auto clamp(40px, 6vw, 68px); text-align: center; }
    .ithx-eyebrow {
        display: inline-block; color: var(--primary); font-size: 0.8rem; font-weight: 800;
        letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px;
    }
    .ithx-h2 {
        font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 900; line-height: 1.08;
        letter-spacing: -0.02em; color: var(--text-main); margin: 0; overflow-wrap: anywhere;
    }
    .ithx-h2-left { text-align: left; }
    .ithx-sub {
        margin: 16px auto 0; max-width: 540px; color: var(--text-muted);
        font-size: 1.08rem; line-height: 1.65; overflow-wrap: anywhere;
    }

    /* ============ HERO ============ */
    .ithx-hero {
        padding: clamp(120px, 16vw, 168px) 6% clamp(60px, 9vw, 104px);
        background:
            radial-gradient(120% 90% at 84% -10%, var(--primary-soft) 0%, transparent 48%),
            linear-gradient(180deg, #ffffff 0%, var(--bg-light) 100%);
        border-bottom: 1px solid rgba(226, 232, 240, 0.9);
        overflow: hidden;
    }
    .ithx-hero-inner {
        display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        gap: clamp(36px, 6vw, 72px); align-items: center;
    }
    .ithx-hero-copy { min-width: 0; }
    .ithx-chip {
        display: inline-flex; align-items: center; gap: 9px;
        background: var(--primary-soft); color: var(--primary-dark);
        padding: 8px 18px; border-radius: 999px; font-weight: 800; font-size: 0.8rem;
        letter-spacing: 0.01em; margin-bottom: 26px;
        border: 1px solid var(--primary-glow); overflow-wrap: anywhere;
    }
    .ithx-chip i { color: var(--primary); flex: 0 0 auto; }
    .ithx-hero-h {
        font-size: clamp(2.5rem, 6.2vw, 4.6rem); font-weight: 900; line-height: 1.04;
        letter-spacing: -0.03em; color: var(--text-main); margin: 0 0 22px;
        overflow-wrap: anywhere;
    }
    .ithx-accent {
        color: var(--primary);
        background: linear-gradient(120deg, var(--primary), var(--primary-dark));
        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    }
    .ithx-hero-p {
        font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--text-muted);
        max-width: 560px; line-height: 1.7; margin: 0 0 34px; overflow-wrap: anywhere;
    }
    .ithx-hero-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
    .ithx-btn-primary {
        display: inline-flex; align-items: center; justify-content: center; gap: 11px;
        min-height: 56px; padding: 0 34px; border-radius: 16px;
        background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff;
        font-weight: 800; font-size: 1.02rem; text-decoration: none; letter-spacing: 0.01em;
        box-shadow: 0 16px 34px -12px var(--primary-glow);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .ithx-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -14px var(--primary-glow); }
    .ithx-btn-ghost {
        display: inline-flex; align-items: center; justify-content: center; gap: 10px;
        min-height: 56px; padding: 0 30px; border-radius: 16px;
        background: #ffffff; color: var(--text-main); font-weight: 800; font-size: 1.02rem;
        text-decoration: none; border: 2px solid rgba(15, 23, 42, 0.1);
        transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
    }
    .ithx-btn-ghost:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-3px); }
    .ithx-hero-trust {
        list-style: none; margin: 0; padding: 0;
        display: flex; flex-wrap: wrap; gap: 14px 26px;
    }
    .ithx-hero-trust li {
        display: flex; align-items: center; gap: 9px;
        font-size: 0.92rem; font-weight: 700; color: var(--text-main); min-width: 0;
    }
    .ithx-hero-trust i { color: var(--primary); font-size: 0.95rem; flex: 0 0 auto; }
    .ithx-hero-trust li span { min-width: 0; overflow-wrap: anywhere; }

    /* Hero-Motiv — flache, deterministische Karte (KEIN 3D preserve-3d) */
    .ithx-hero-art { min-width: 0; display: flex; justify-content: center; }
    .ithx-map-card {
        position: relative; width: min(100%, 460px);
        background: #ffffff; border: 1px solid rgba(226, 232, 240, 0.95);
        border-radius: 30px; padding: 18px;
        box-shadow: var(--shadow-soft);
    }
    .ithx-map-tag {
        position: absolute; top: 32px; left: 32px; z-index: 2;
        display: inline-flex; align-items: center; gap: 7px;
        background: #ffffff; color: var(--primary-dark);
        padding: 7px 14px; border-radius: 999px;
        font-size: 0.78rem; font-weight: 800;
        box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.28);
        border: 1px solid var(--primary-soft);
    }
    .ithx-map-tag i { color: var(--primary); flex: 0 0 auto; }
    .ithx-map-svg {
        display: block; width: 100%; max-width: 100%; height: auto;
        border-radius: 20px; overflow: hidden; background: var(--primary-light);
    }
    .ithx-map-foot {
        display: flex; align-items: center; gap: 11px;
        margin-top: 16px; padding: 14px 16px;
        background: var(--bg-light); border-radius: 16px;
        font-weight: 700; font-size: 0.92rem; color: var(--text-main);
    }
    .ithx-map-foot i { color: var(--primary); font-size: 1.15rem; flex: 0 0 auto; }
    .ithx-map-foot span { min-width: 0; overflow-wrap: anywhere; }

    /* ============ STEPS (Rückgrat) ============ */
    .ithx-steps {
        list-style: none; margin: 0; padding: 0;
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px);
    }
    .ithx-step {
        position: relative; min-width: 0;
        background: #ffffff; border: 1px solid rgba(226, 232, 240, 0.95);
        border-radius: 22px; padding: 40px 28px 30px; text-align: center;
        box-shadow: 0 18px 40px -30px rgba(15, 23, 42, 0.25);
        transition: transform 0.28s ease, box-shadow 0.28s ease;
    }
    .ithx-step:hover { transform: translateY(-5px); box-shadow: 0 28px 56px -28px var(--card-glow); }
    .ithx-step-rail {
        position: absolute; top: 70px; left: calc(100% + 1px); width: clamp(20px, 3vw, 32px); height: 2px;
        background: linear-gradient(90deg, var(--primary), transparent); z-index: 1;
    }
    .ithx-step:last-child .ithx-step-rail { display: none; }
    .ithx-step-num {
        position: absolute; top: 18px; right: 22px;
        font-size: 2.4rem; font-weight: 900; line-height: 1;
        color: var(--primary); opacity: 0.16; letter-spacing: -0.04em;
    }
    .ithx-step-ico {
        display: inline-flex; align-items: center; justify-content: center;
        width: 60px; height: 60px; border-radius: 50%; margin-bottom: 20px;
        background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff;
        font-size: 1.4rem; box-shadow: 0 14px 28px -12px var(--primary-glow);
    }
    .ithx-step-title { font-size: 1.18rem; font-weight: 800; color: var(--text-main); margin: 0 0 10px; overflow-wrap: anywhere; }
    .ithx-step-desc { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin: 0; overflow-wrap: anywhere; }

    /* ============ SERVICES ============ */
    .ithx-services {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
        gap: clamp(18px, 2.4vw, 26px);
    }
    .ithx-card {
        position: relative; min-width: 0;
        background: #ffffff; border: 1px solid rgba(226, 232, 240, 0.95);
        border-radius: 24px; padding: 36px 32px;
        transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
    }
    .ithx-card:hover {
        transform: translateY(-7px); border-color: var(--primary-light);
        box-shadow: 0 30px 60px -28px var(--card-glow);
    }
    .ithx-card-feat {
        border-color: var(--primary-glow);
        box-shadow: 0 24px 50px -30px var(--card-glow);
        background:
            linear-gradient(180deg, var(--primary-soft) 0%, transparent 22%),
            #ffffff;
    }
    .ithx-card-feat::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
        border-radius: 0 0 24px 24px;
        background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    }
    .ithx-card-badge {
        position: absolute; top: -13px; left: 28px;
        display: inline-flex; align-items: center; gap: 7px;
        background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff;
        padding: 6px 15px; border-radius: 999px; font-size: 0.72rem; font-weight: 800;
        letter-spacing: 0.02em; box-shadow: 0 10px 22px -10px var(--primary-glow);
    }
    .ithx-card-icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 58px; height: 58px; border-radius: 17px; margin-bottom: 22px;
        background: var(--primary-soft); color: var(--primary); font-size: 1.55rem;
        border: 1px solid var(--primary-glow);
    }
    .ithx-card-title { font-size: 1.35rem; font-weight: 900; color: var(--text-main); margin: 0 0 12px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
    .ithx-card-desc { color: var(--text-muted); font-size: 0.96rem; line-height: 1.65; margin: 0 0 22px; overflow-wrap: anywhere; }
    .ithx-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
    .ithx-checks li { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
    .ithx-checks li span { font-size: 0.92rem; font-weight: 700; color: var(--text-main); line-height: 1.4; overflow-wrap: anywhere; }
    .ithx-checks i {
        flex: 0 0 auto; margin-top: 2px; width: 20px; height: 20px; border-radius: 6px;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--primary-soft); color: var(--primary); font-size: 0.66rem;
    }

    /* ============ PROMISE / PRICING ============ */
    .ithx-promise-grid {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: clamp(36px, 5vw, 70px); align-items: center;
        margin-bottom: clamp(36px, 5vw, 56px);
    }
    .ithx-promise-copy { min-width: 0; }
    .ithx-promise-text {
        color: var(--text-muted); font-size: 1.05rem; line-height: 1.72;
        margin: 20px 0 0; overflow-wrap: anywhere;
    }
    .ithx-price-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
    .ithx-ptag {
        display: inline-flex; align-items: center; gap: 8px;
        background: #ffffff; border: 1px solid var(--primary-glow);
        color: var(--text-main); padding: 9px 16px; border-radius: 999px;
        font-size: 0.86rem; font-weight: 800; overflow-wrap: anywhere;
    }
    .ithx-ptag i { color: var(--primary); flex: 0 0 auto; }
    .ithx-price-pill {
        display: flex; align-items: center; gap: 12px;
        background: var(--primary-soft); border: 1px solid var(--primary-glow);
        color: var(--primary-dark); padding: 14px 22px; border-radius: 16px;
        font-weight: 700; font-size: 0.98rem; line-height: 1.4; margin-top: 24px;
    }
    .ithx-price-pill i { color: var(--primary); font-size: 1.05rem; flex: 0 0 auto; }
    .ithx-price-pill strong { color: var(--primary-dark); font-weight: 900; }
    .ithx-price-pill span { min-width: 0; overflow-wrap: anywhere; }

    .ithx-promise-box {
        min-width: 0; background: #ffffff; border: 1px solid rgba(226, 232, 240, 0.95);
        border-radius: 26px; padding: clamp(28px, 4vw, 44px); box-shadow: var(--shadow-soft);
    }
    .ithx-promise-h { font-size: 1.3rem; font-weight: 900; color: var(--text-main); margin: 0 0 24px; overflow-wrap: anywhere; }
    .ithx-promise-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
    .ithx-promise-item { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
    .ithx-pi-icon {
        flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--primary-soft); color: var(--primary); font-size: 1.1rem;
        border: 1px solid var(--primary-glow);
    }
    .ithx-pi-body { min-width: 0; }
    .ithx-pi-body strong { display: block; font-size: 1.02rem; color: var(--text-main); font-weight: 800; margin-bottom: 4px; overflow-wrap: anywhere; }
    .ithx-pi-body span { display: block; font-size: 0.92rem; color: var(--text-muted); line-height: 1.55; overflow-wrap: anywhere; }

    /* Datenschutz-Hinweis */
    .ithx-privacy {
        display: flex; align-items: flex-start; gap: 18px; min-width: 0;
        background: #ffffff; border: 1px solid var(--primary-glow);
        border-radius: 22px; padding: 26px 30px;
    }
    .ithx-privacy-icon {
        flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--primary-soft); color: var(--primary); font-size: 1.15rem;
    }
    .ithx-privacy-body { min-width: 0; }
    .ithx-privacy-body h3 { font-size: 1.12rem; font-weight: 800; color: var(--text-main); margin: 4px 0 8px; overflow-wrap: anywhere; }
    .ithx-privacy-body p { margin: 0; color: var(--text-muted); font-size: 0.95rem; line-height: 1.68; overflow-wrap: anywhere; }

    /* ============ CTA (einziges dunkles Band) ============ */
    .ithx-cta {
        padding: clamp(72px, 11vw, 132px) 6%;
        background:
            radial-gradient(110% 120% at 50% -20%, color-mix(in srgb, var(--primary) 28%, transparent) 0%, transparent 55%),
            var(--bg-dark);
    }
    .ithx-cta-inner { text-align: center; max-width: 680px; }
    .ithx-cta-badge {
        display: inline-flex; align-items: center; gap: 9px;
        background: color-mix(in srgb, var(--primary) 22%, transparent);
        color: var(--primary-light); padding: 8px 18px; border-radius: 999px;
        font-weight: 800; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
        margin-bottom: 22px; border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent);
        overflow-wrap: anywhere;
    }
    .ithx-cta-badge i { flex: 0 0 auto; }
    .ithx-cta-h {
        font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 900; letter-spacing: -0.03em;
        color: #ffffff; margin: 0 0 18px; line-height: 1.06; overflow-wrap: anywhere;
    }
    .ithx-cta-p {
        color: #cbd5e1; font-size: clamp(1.02rem, 1.6vw, 1.18rem); line-height: 1.7;
        margin: 0 auto 38px; max-width: 560px; overflow-wrap: anywhere;
    }
    .ithx-cta-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 12px;
        min-height: 60px; padding: 0 44px; border-radius: 16px;
        background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff;
        font-weight: 800; font-size: 1.08rem; text-decoration: none; letter-spacing: 0.01em;
        box-shadow: 0 18px 40px -14px var(--primary-glow);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .ithx-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 26px 52px -16px var(--primary-glow); }
    .ithx-cta-note {
        display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: center;
        margin: 28px auto 0; color: #94a3b8; font-size: 0.92rem; line-height: 1.5;
        max-width: 540px; overflow-wrap: anywhere;
    }
    .ithx-cta-note i { color: var(--primary-light); flex: 0 0 auto; }
    .ithx-cta-note span { min-width: 0; }

    /* ============ RESPONSIVE ============ */
    @media (max-width: 980px) {
        .ithx-hero-inner { grid-template-columns: minmax(0, 1fr); text-align: center; }
        .ithx-hero-copy { order: 2; }
        .ithx-hero-art { order: 1; }
        .ithx-hero-btns, .ithx-hero-trust { justify-content: center; }
        .ithx-hero-p { margin-left: auto; margin-right: auto; }
        .ithx-map-card { max-width: 400px; }
        .ithx-promise-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
        .ithx-h2-left { text-align: center; }
        .ithx-promise-copy { text-align: center; }
        .ithx-price-tags { justify-content: center; }
    }
    @media (max-width: 900px) {
        .ithx-steps { grid-template-columns: minmax(0, 1fr); gap: 18px; }
        .ithx-step-rail { display: none !important; }
    }
    @media (max-width: 768px) {
        .ithx-hero { padding-top: 116px; }
        .ithx-section { padding-left: 5%; padding-right: 5%; }
        .ithx-cta { padding-left: 5%; padding-right: 5%; }
    }
    @media (max-width: 560px) {
        .ithx-hero-btns { flex-direction: column; }
        .ithx-btn-primary, .ithx-btn-ghost, .ithx-cta-btn { width: 100%; }
        .ithx-hero-trust { flex-direction: column; align-items: center; gap: 12px; }
        .ithx-card { padding: 30px 24px; }
        .ithx-map-tag { top: 26px; left: 26px; }
    }

    @media (prefers-reduced-motion: reduce) {
        .ithx-card, .ithx-step, .ithx-btn-primary, .ithx-btn-ghost, .ithx-cta-btn { transition: none !important; }
        .ithx-card:hover, .ithx-step:hover, .ithx-btn-primary:hover, .ithx-btn-ghost:hover, .ithx-cta-btn:hover { transform: none !important; }
    }
</style>

@endsection