/* ===== Deutsch Einfach — الهوية البصرية المشتركة =====
   ذهبي على أسود. كل صفحة كتورث من هنا بدل ما تعيد
   تعريف الألوان بوحدها.

   الأحجام كتستعمل clamp() باش تكبر بوحدها من الهاتف
   حتى الشاشة الكبيرة (TV) بلا ما نكتبو media query
   لكل مقاس. */

:root {
    /* ===== اللوحة =====
       أبيض + أحمر. الخلفية بيضا بشبكة مربعات خفيفة،
       والأحمر هو لون العلامة — بحال telc والعلم
       الألماني، إذن كيمشي مع الموقع.

       الأسماء --gold* بقاو كيف ما هوما حيت مستعملين
       ف عشرات الصفحات. دابا كيحملو لون العلامة (أحمر).
       الأسماء الجديدة --brand* هي اللي خاص يتستعملو
       ف أي كود جديد. */

    --brand: #e11d33;
    --brand-dark: #b4142a;
    --brand-soft: #ffe1e5;
    --brand-tint: rgba(225,29,51,.08);

    --gold: var(--brand);
    --gold-dark: var(--brand-dark);
    --gold-soft: var(--brand-soft);

    --ink: #ffffff;
    --surface: #ffffff;
    --surface-2: #f7f8fc;

    --text: #14161f;
    --muted: #5b6172;

    --line: rgba(20,22,31,.10);
    --line-gold: rgba(225,29,51,.28);
    --line-brand: var(--line-gold);

    --ok: #0f9d58;
    --danger: #e11d33;

    /* الأسماء القديمة — باش الصفحات القديمة تبقى خدامة */
    --red: var(--gold);
    --red-dark: var(--gold-dark);
    --yellow: var(--gold-soft);
    --bg: var(--ink);
    --card: var(--surface);
    --light: var(--surface-2);
    --white: var(--surface);
    --dark: var(--text);
    --gray: var(--muted);
    --border: var(--line);
    --border-strong: var(--line-gold);
    --shadow: 0 10px 28px rgba(20,22,31,.08);

    /* الأحجام — كتكبر مع الشاشة */
    --step-0: clamp(14px, .5vw + 12.5px, 19px);
    --step-1: clamp(16px, .7vw + 14px, 22px);
    --step-2: clamp(20px, 1vw + 17px, 28px);
    --step-3: clamp(24px, 1.6vw + 19px, 38px);
    --step-4: clamp(28px, 2.6vw + 21px, 56px);

    --gutter: clamp(14px, 2.5vw, 34px);
    --radius: 16px;
    --shell: 1200px;
}

/* الشاشات الكبيرة والتلفزة: كنوسعو الحاوية،
   وclamp() فوق كتكفل بالخطوط. */
@media (min-width: 1600px) { :root { --shell: 1440px; } }
@media (min-width: 2000px) { :root { --shell: 1680px; } }
@media (min-width: 2600px) { :root { --shell: 2000px; } }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: "Cairo", "IBM Plex Sans Arabic", "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: var(--step-0);
    line-height: 1.7;
    color: var(--text);
    /* شبكة مربعات خفيفة + لمستين ديال الأحمر فالزوايا.
       المربعات كيعطيو إحساس "منصة" بلا ما يشوشو على
       القراية — الخطوط رقاق بزاف عمداً. */
    background-color: #fdfdff;
    background-image:
        radial-gradient(760px 420px at 6% -8%, rgba(225,29,51,.07), transparent 60%),
        radial-gradient(700px 420px at 96% 2%, rgba(225,29,51,.05), transparent 58%),
        linear-gradient(rgba(20,22,31,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20,22,31,.045) 1px, transparent 1px);
    background-size: auto, auto, 34px 34px, 34px 34px;
    background-attachment: fixed, fixed, fixed, fixed;
    min-height: 100vh;
}

/* ما نخليو حتى صفحة تخرج على العرض فالهاتف */
img, video, canvas, svg { max-width: 100%; height: auto; }

/* النص الذهبي المتدرج */
.gold-text {
    background: linear-gradient(135deg, var(--gold-soft), var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.shell {
    width: min(100% - (var(--gutter) * 2), var(--shell));
    margin-inline: auto;
}

/* الوصول: ما نقتلوش مؤشر لوحة المفاتيح */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ===== الشاشات الكبيرة جداً / التلفزة =====
   الصفحات القديمة كتستعمل px ثابتة. بدل ما نعاودو نكتبو
   كل حجم فيهم، كنكبرو الصفحة كاملة — الويب على TV كيتشاف
   من بعيد، ف كلشي كيولي صغير بزاف بلا هادشي. */

/* التلفزة والشاشة ديال 4K عندهم نفس العرض — ماتقدرش
   تفرق بيناتهم بالعرض بوحدو. الفرق هو نوع المؤشر:
   التلفزة كتتحكم بريموت (pointer: coarse، بلا hover)،
   والشاشة ديال PC عندها فأر (pointer: fine).

   قبل، الـ zoom كان كيتطبق على الجوج — والنتيجة أن
   الأزرار كيوليو ضخام بزاف على شاشة 4K ديال PC. */

/* تلفزة / ريموت: كنكبرو، حيت كتتشاف من بعيد */
@media (min-width: 2200px) and (pointer: coarse) { html { zoom: 1.3; } }
@media (min-width: 3000px) and (pointer: coarse) { html { zoom: 1.55; } }
@media (min-width: 3800px) and (pointer: coarse) { html { zoom: 1.8; } }

/* شاشة كبيرة بفأر: تكبير خفيف بزاف — clamp() ديجا كيكبر
   الخطوط، ومانبغيوش أزرار ضخام. */
@media (min-width: 2600px) and (pointer: fine) { html { zoom: 1.15; } }
@media (min-width: 3400px) and (pointer: fine) { html { zoom: 1.3; } }

/* إلا ما عرفناش نوع المؤشر (شي متصفحات قدام)، كنطبقو
   التكبير الخفيف باش ما يطلعش شي حاجة ضخمة. */
@media (min-width: 2600px) and (pointer: none) { html { zoom: 1.15; } }

/* ===== شبكة أمان للهاتف =====
   المشكل الأكثر شيوعاً فالهاتف هو تمرير أفقي: رابط طويل،
   إيميل، ولا كلمة ألمانية مركبة كتوسّع الحاوية وكتخلي
   الصفحة كاملة تزلق. */

body {
    overflow-wrap: break-word;
    word-break: normal;
}

/* الروابط والإيميلات: كنخليوهم يتقطعو فأي بلاصة */
a[href^="mailto:"],
a[href^="http"],
code, pre, kbd {
    overflow-wrap: anywhere;
}

/* الجداول ما كتنكمشش — كنخليوها تزلق هي بوحدها */
table { display: block; max-width: 100%; overflow-x: auto; }

/* أهداف اللمس: أصغر حاجة مقبولة هي 44px حسب
   إرشادات Apple و Google. */
@media (hover: none) and (pointer: coarse) {
    button, [role="button"], .btn, .top-btn, .start-btn, .offer-btn {
        min-height: 44px;
    }
}

/* الهاتف: كنقلصو الهوامش الكبيرة اللي كتاكل العرض */
@media (max-width: 480px) {
    h1 { font-size: clamp(22px, 6vw, 30px); }
    h2 { font-size: clamp(19px, 5vw, 26px); }
    h3 { font-size: clamp(17px, 4.5vw, 22px); }
}

/* ===== حجم اللمس فالتيليفون =====
   الروابط الواقفة بوحدها (رجوع، بطاقة…) خاصهم يكونو
   كبار بزاف باش يتنقرو بالصبع. النص العادي داخل فقرة
   ماكيدخلش هنا. */
@media (pointer: coarse) {
    a.back-home,
    a.back-button,
    a.card-link,
    .nav-action,
    .hero-button,
    .cta-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }
    a.back-home, a.back-button, a.card-link { padding: 10px 14px; }
}

/* روابط الفوتر وnav ديال Hören: حتى هوما خاصهم يتنقرو بالصبع */
@media (pointer: coarse) {
    .footer-links a,
    .hoeren-nav-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }
    .footer-links a { padding: 6px 10px; }
}