/* ToSender — Tosender Page Styles
   Extracted from tosender.blade.php */

        :root, [data-theme="dark"] {
            --bg: #141416;
            --bg-raised: #1d1d1b;
            --bg-card: #232325;
            --border: rgba(255,255,255,0.07);
            --border-grad-1: rgba(160,160,155,0.2);
            --border-grad-2: rgba(120,120,115,0.12);
            --border-grad-3: rgba(100,100,95,0.1);
            --text-primary: #ededec;
            --text-secondary: #8a8a86;
            --text-muted: #5c5c58;
            --grad-1: linear-gradient(135deg, #a0a09a, #d4d4cf);
            --grad-2: linear-gradient(135deg, #8a8a86, #bbbbb6);
            --grad-3: linear-gradient(135deg, #c4c4bf, #8a8a86);
            --grad-4: linear-gradient(135deg, #9a9a95, #d4d4cf);
            --nav-bg: rgba(20,20,22,0.88);
            --btn-bg: #ededec;
            --btn-color: #1d1d1b;
            --card-shadow: 0 0 0 1px rgba(255,255,255,0.07);
            --glow-1: rgba(200,200,195,0.04);
            --glow-2: rgba(160,160,155,0.03);
            --cloud-1: rgba(255,255,250,0.22);
            --cloud-2: rgba(255,255,252,0.16);
            --cloud-3: rgba(255,255,254,0.12);
            --logo-filter: invert(1);
        }
        [data-theme="light"] {
            --bg: #f5f5f3;
            --bg-raised: #ffffff;
            --bg-card: #ffffff;
            --border: rgba(29,29,27,0.08);
            --border-grad-1: rgba(29,29,27,0.15);
            --border-grad-2: rgba(29,29,27,0.08);
            --border-grad-3: rgba(29,29,27,0.06);
            --text-primary: #1d1d1b;
            --text-secondary: #6b6b67;
            --text-muted: #9a9a96;
            --grad-1: linear-gradient(135deg, #1d1d1b, #4a4a47);
            --grad-2: linear-gradient(135deg, #3a3a37, #6b6b67);
            --grad-3: linear-gradient(135deg, #4a4a47, #1d1d1b);
            --grad-4: linear-gradient(135deg, #2d2d2a, #5c5c58);
            --nav-bg: rgba(245,245,243,0.9);
            --btn-bg: #1d1d1b;
            --btn-color: #f5f5f3;
            --card-shadow: 0 1px 3px rgba(29,29,27,0.06), 0 0 0 1px rgba(29,29,27,0.04);
            --glow-1: rgba(29,29,27,0.03);
            --glow-2: rgba(29,29,27,0.02);
            --cloud-1: rgba(255,252,235,0.70);
            --cloud-2: rgba(255,254,245,0.55);
            --cloud-3: rgba(255,255,250,0.45);
            --logo-filter: none;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { overflow-x: hidden; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--bg);
            color: var(--text-secondary);
            line-height: 1.7;
            -webkit-font-smoothing: antialiased;
            letter-spacing: -0.01em;
        }
        h1, h2, h3, .section-title, .cta h2 {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            font-weight: 300;
            letter-spacing: -0.03em;
        }
        a { color: inherit; text-decoration: none; }

        .grad { background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; font-style: italic; }
        .grad-1 { background-image: linear-gradient(135deg, #FFD600, #FFD600); }
        .grad-2 { background-image: linear-gradient(135deg, #FFD600, #FFD600); }
        .grad-3 { background-image: linear-gradient(135deg, #FFD600, #B89400); }
        .grad-4 { background-image: linear-gradient(135deg, #FFD600, #FFD600); }
        [data-theme="light"] .grad-1 { background-image: linear-gradient(135deg, #FFD600, #E6B800); }
        [data-theme="light"] .grad-2 { background-image: linear-gradient(135deg, #E6B800, #FFD600); }
        [data-theme="light"] .grad-3 { background-image: linear-gradient(135deg, #FFD600, #B89400); }
        [data-theme="light"] .grad-4 { background-image: linear-gradient(135deg, #E6B800, #FFD600); }

        .gcard {
            position: relative;
            background: var(--bg-card);
            border-radius: 20px;
            padding: 44px;
        }
        .gcard::before {
            content: '';
            position: absolute; inset: 0;
            border-radius: 16px;
            padding: 1px;
            background: linear-gradient(135deg, var(--border-grad-1), transparent 50%, var(--border-grad-2));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

        /* Background Logo Glow */
        .bg-logo-glow {
            position: absolute; left: 50%; top: 50%;
            transform: translate(-50%, -50%);
            width: 160%; max-width: 900px;
            opacity: 0.35; pointer-events: none;
            filter: blur(14px) saturate(0.6) brightness(1.5);
            z-index: 0;
        }
        [data-theme="light"] .bg-logo-glow {
            opacity: 0.30;
            filter: blur(14px) saturate(0.5) brightness(1.6);
        }

        /* Cloud Effect */
        .hero-cloud {
            position: absolute;
            inset: -50% -40%;
            pointer-events: none; z-index: 0;
            background:
                radial-gradient(ellipse 60% 50% at 45% 42%, var(--cloud-1) 0%, transparent 65%),
                radial-gradient(ellipse 50% 42% at 55% 58%, var(--cloud-2) 0%, transparent 60%),
                radial-gradient(ellipse 70% 60% at 50% 50%, var(--cloud-3) 0%, transparent 70%);
            filter: blur(30px);
        }

        /* Hero */
        .ts-hero {
            position: relative;
            text-align: center;
            padding: 140px 32px 60px;
            max-width: 700px;
            margin: 0 auto;
        }
        .ts-hero h1 {
            font-size: clamp(28px, 5vw, 42px);
            font-weight: 300;
            color: var(--text-primary);
            line-height: 1.15;
            margin-bottom: 16px;
            position: relative; z-index: 1;
        }
        .ts-hero p {
            font-size: 16px;
            line-height: 1.7;
            max-width: 520px;
            margin: 0 auto;
            position: relative; z-index: 1;
        }

        /* Monitor Mockup */
        .ts-monitor-section {
            text-align: center;
            max-width: 510px;
            margin: 0 auto;
            padding: 0 32px 60px;
        }
        .monitor {
            display: flex; flex-direction: column; align-items: center;
        }
        .monitor-screen {
            background: #1c1c1e;
            border-radius: 12px; padding: 10px;
            position: relative; width: 100%;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        /* Gold corner accents — 4 L-shaped edges via dedicated overlay */
        .monitor-corners {
            position: absolute; inset: 0; pointer-events: none; z-index: 2;
            --c: #FFD600; --len: 36px; --w: 2px; --r: 12px;
        }
        .monitor-corner {
            position: absolute; width: var(--len); height: var(--len);
        }
        .monitor-corner:nth-child(1) {
            top: 0; left: 0;
            border-top: var(--w) solid var(--c); border-left: var(--w) solid var(--c);
            border-radius: var(--r) 0 0 0;
        }
        .monitor-corner:nth-child(2) {
            top: 0; right: 0;
            border-top: var(--w) solid var(--c); border-right: var(--w) solid var(--c);
            border-radius: 0 var(--r) 0 0;
        }
        .monitor-corner:nth-child(3) {
            bottom: 0; left: 0;
            border-bottom: var(--w) solid var(--c); border-left: var(--w) solid var(--c);
            border-radius: 0 0 0 var(--r);
        }
        .monitor-corner:nth-child(4) {
            bottom: 0; right: 0;
            border-bottom: var(--w) solid var(--c); border-right: var(--w) solid var(--c);
            border-radius: 0 0 var(--r) 0;
        }
        .monitor-stand { width: 28px; height: 28px; background: linear-gradient(rgba(255,214,0,0.25), rgba(255,214,0,0.15)); }
        .monitor-base {
            width: 80px; height: 6px;
            background: linear-gradient(rgba(255,214,0,0.25), rgba(255,214,0,0.15));
            border-radius: 0 0 6px 6px;
        }
        [data-theme="light"] .monitor-screen {
            background: #e8e4d8;
            box-shadow: 0 20px 60px rgba(0,0,0,0.12);
        }
        [data-theme="light"] .monitor-corners { --c: #C7A500; }
        [data-theme="light"] .monitor-stand { background: linear-gradient(rgba(200,170,0,0.3), rgba(200,170,0,0.2)); }
        [data-theme="light"] .monitor-base { background: linear-gradient(rgba(200,170,0,0.3), rgba(200,170,0,0.2)); }

        .slideshow-viewport {
            position: relative;
            aspect-ratio: 9 / 16;
            overflow: hidden;
            border-radius: 4px;
            background: #1a1a1c;
        }
        [data-theme="light"] .slideshow-viewport { background: #f0f0f2; }
        .slideshow-viewport img {
            position: absolute; inset: 0;
            width: 100%; height: 100%;
            object-fit: cover;
            object-position: top;
            opacity: 0; transition: opacity 0.6s ease;
        }
        .slideshow-viewport img.active { opacity: 1; }

        /* Vollbericht vertical scroll */
        .slideshow-viewport img.vollbericht-scroll {
            object-fit: cover;
            object-position: center top;
            animation: vollberichtScroll 25s ease-in-out forwards;
        }
        @keyframes vollberichtScroll {
            0% { object-position: center top; }
            5% { object-position: center top; }
            95% { object-position: center bottom; }
            100% { object-position: center bottom; }
        }

        /* Slideshow dots */
        .slideshow-dots {
            display: flex; gap: 6px; justify-content: center;
            margin-top: 16px;
        }
        .slideshow-dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: rgba(255,255,255,0.15); border: none; cursor: pointer;
            transition: all 0.2s;
        }
        .slideshow-dot.active { background: #FFD600; transform: scale(1.2); }
        [data-theme="light"] .slideshow-dot { background: rgba(0,0,0,0.12); }
        [data-theme="light"] .slideshow-dot.active { background: #FFD600; }
        .slideshow-dot.dot-code {
            width: auto; height: auto; border-radius: 10px;
            padding: 2px 8px;
            font-size: 9px; font-family: 'SF Mono', 'Consolas', monospace;
            color: rgba(255,255,255,0.35);
            background: rgba(255,255,255,0.08);
            letter-spacing: 0.5px;
        }
        .slideshow-dot.dot-code.active {
            background: #FFD600; color: #111;
            transform: scale(1);
        }
        [data-theme="light"] .slideshow-dot.dot-code { color: rgba(0,0,0,0.35); background: rgba(0,0,0,0.06); }
        [data-theme="light"] .slideshow-dot.dot-code.active { color: #111; }

        /* Code Demo Slide */
        .code-demo {
            position: absolute; inset: 0;
            background: #0d1117;
            opacity: 0; transition: opacity 0.6s ease;
            display: flex; flex-direction: column;
            padding: 20px 16px;
            font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
            font-size: 11px;
            line-height: 1.6;
            overflow: hidden;
        }
        .code-demo.active { opacity: 1; }
        [data-theme="light"] .code-demo { background: #f6f8fa; }

        .code-demo-header {
            display: flex; align-items: center; gap: 6px;
            padding-bottom: 12px; margin-bottom: 12px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        [data-theme="light"] .code-demo-header { border-bottom-color: rgba(0,0,0,0.08); }
        .code-demo-header .dot { width: 8px; height: 8px; border-radius: 50%; }
        .code-demo-header .dot-r { background: #ff5f56; }
        .code-demo-header .dot-y { background: #ffbd2e; }
        .code-demo-header .dot-g { background: #27c93f; }
        .code-demo-header span.file-name {
            font-size: 10px; color: rgba(255,255,255,0.4);
            margin-left: 8px;
        }
        [data-theme="light"] .code-demo-header span.file-name { color: rgba(0,0,0,0.4); }

        .code-phase { opacity: 0; transform: translateY(6px); transition: all 0.4s ease; }
        .code-phase.visible { opacity: 1; transform: translateY(0); }

        .code-prompt {
            color: #FFD600;
            margin-bottom: 14px;
            white-space: pre-wrap;
        }
        .code-prompt .cursor {
            display: inline-block; width: 7px; height: 14px;
            background: #FFD600; margin-left: 2px;
            animation: blink 0.8s step-end infinite;
            vertical-align: text-bottom;
        }
        @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

        .code-block {
            margin-bottom: 14px;
            white-space: pre-wrap;
            color: #e6edf3;
        }
        [data-theme="light"] .code-block { color: #24292f; }
        .code-block .kw { color: #ff7b72; }
        [data-theme="light"] .code-block .kw { color: #cf222e; }
        .code-block .str { color: #a5d6ff; }
        [data-theme="light"] .code-block .str { color: #0a3069; }
        .code-block .fn { color: #d2a8ff; }
        [data-theme="light"] .code-block .fn { color: #8250df; }
        .code-block .num { color: #79c0ff; }
        [data-theme="light"] .code-block .num { color: #0550ae; }
        .code-block .cm { color: #8b949e; font-style: italic; }
        .code-block .var { color: #ffa657; }
        [data-theme="light"] .code-block .var { color: #953800; }
        .code-block .op { color: #ff7b72; }
        [data-theme="light"] .code-block .op { color: #cf222e; }

        .code-result {
            padding: 10px 12px;
            background: rgba(39,201,63,0.08);
            border-left: 2px solid #27c93f;
            border-radius: 4px;
            white-space: pre-wrap;
            color: #7ee787;
            font-size: 10.5px;
        }
        [data-theme="light"] .code-result {
            background: rgba(39,201,63,0.06);
            color: #116329;
        }
        .code-result .check { color: #27c93f; }
        [data-theme="light"] .code-result .check { color: #116329; }

        /* Content Sections */
        .section {
            max-width: 960px; margin: 0 auto;
            padding: 120px 40px;
        }
        .two-col {
            display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start;
        }
        .section-title {
            font-size: clamp(28px, 4.5vw, 48px);
            font-weight: 400;
            color: var(--text-primary);
            line-height: 1.1;
            letter-spacing: -0.03em;
            margin-bottom: 20px;
        }
        .section-sub { font-size: 17px; line-height: 1.8; }
        .divider {
            max-width: 900px; margin: 0 auto;
            border: none; border-top: 1px solid var(--border);
        }

        .steps { display: flex; flex-direction: column; gap: 24px; }
        .step { display: flex; gap: 16px; align-items: flex-start; }
        .step-num {
            width: 32px; height: 32px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 13px; font-weight: 700; flex-shrink: 0;
            background: #FFD600 !important;
            color: #1d1d1b;
            -webkit-text-fill-color: #1d1d1b;
            border: none;
        }
        [data-theme="light"] .step-num {
            background: #FFD600 !important;
        }
        .step h4 { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
        .step p { font-size: 13px; line-height: 1.6; }

        .tech-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
        .tech-tag {
            font-size: 11px; font-weight: 600;
            padding: 4px 10px; border-radius: 6px;
            background: var(--bg-card); border: 1px solid var(--border);
            color: var(--text-muted);
        }

        /* Feature-Liste */
        .feature-list {
            max-width: 900px;
            margin: 0 auto;
            padding: 80px 40px;
        }
        .feature-list-title {
            font-size: clamp(24px, 3vw, 36px);
            font-weight: 400;
            color: var(--text-primary);
            letter-spacing: -0.03em;
            text-align: center;
            margin-bottom: 12px;
        }
        .feature-list-sub {
            text-align: center;
            font-size: 15px;
            color: var(--text-muted);
            margin-bottom: 48px;
        }
        .feature-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }
        .feature-category {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 28px 24px;
            border: 1px solid var(--border);
        }
        .feature-category-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
        }
        .feature-category-icon {
            width: 32px; height: 32px;
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: 16px;
            flex-shrink: 0;
        }
        .feature-category-name {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: -0.01em;
        }
        .feature-category ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .feature-category li {
            font-size: 13px;
            color: var(--text-secondary);
            padding: 5px 0;
            border-bottom: 1px solid var(--border);
            line-height: 1.5;
        }
        .feature-category li:last-child {
            border-bottom: none;
        }
        .feature-category li::before {
            content: '\2022';
            color: var(--text-muted);
            margin-right: 8px;
        }
        @media (max-width: 768px) {
            .feature-grid { grid-template-columns: 1fr; }
            .feature-list { padding: 48px 16px; }
        }

        /* CTA */
        .cta {
            text-align: center;
            padding: 120px 40px;
            max-width: 640px;
            margin: 0 auto;
        }
        .cta h2 {
            font-size: clamp(28px, 4vw, 48px);
            font-weight: 400;
            color: var(--text-primary);
            line-height: 1.1;
            letter-spacing: -0.03em;
            margin-bottom: 20px;
        }
        .cta p { font-size: 17px; line-height: 1.8; margin-bottom: 36px; }
        .btn-primary {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 12px 24px; border-radius: 10px;
            background: #FFD600; color: #1d1d1b;
            font-size: 14px; font-weight: 600; transition: opacity 0.2s;
        }
        .btn-primary:hover { opacity: 0.85; }
        [data-theme="light"] .btn-primary {
            background: #FFD600;
        }
        .btn-ghost {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 12px 24px; border-radius: 10px;
            border: 1px solid var(--border); color: var(--text-secondary);
            font-size: 14px; font-weight: 600; transition: all 0.2s;
        }
        .btn-ghost:hover { border-color: var(--text-muted); color: var(--text-primary); }

        /* Footer */
        .footer {
            text-align: center;
            padding: 40px 32px;
            font-size: 12px;
            color: var(--text-muted);
            border-top: 1px solid var(--border);
        }
        .footer a { color: var(--text-muted); transition: color 0.2s; }
        .footer a:hover { color: var(--text-primary); }
        .footer-social { display: flex; justify-content: center; gap: 16px; margin-bottom: 16px; }
        .footer-social a {
            width: 36px; height: 36px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            border: 1px solid var(--border); color: var(--text-muted);
            transition: all 0.2s;
        }
        .footer-social a:hover { color: #FFD600; border-color: rgba(255,214,0,0.3); background: rgba(255,214,0,0.06); }
        .footer-social svg { width: 18px; height: 18px; }

        @media (max-width: 768px) {
            .two-col { grid-template-columns: 1fr; gap: 32px; }
            .gcard { padding: 28px; }
            .ts-monitor-section { max-width: 100%; }
        }

/* ========== FEATURE LIST ========== */
    .cookie-overlay {
        position: fixed; inset: 0; z-index: 9999;
        display: none; align-items: flex-end; justify-content: flex-end;
        padding: 24px;
        pointer-events: none;
    }
    .cookie-overlay.visible { display: flex; }
    .cookie-card {
        pointer-events: auto;
        background: #1a1a1e; border-radius: 20px;
        padding: 36px 40px 32px;
        max-width: 520px; width: 100%;
        box-shadow: 0 25px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
        transform: translateY(40px); opacity: 0;
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
    }
    .cookie-overlay.visible .cookie-card { transform: translateY(0); opacity: 1; }
    .cookie-title {
        font-size: 22px; font-weight: 700; color: #ffffff;
        margin-bottom: 14px; letter-spacing: -0.02em;
    }
    .cookie-desc {
        font-size: 15px; line-height: 1.7;
        color: rgba(255,255,255,0.6);
        margin-bottom: 28px;
    }
    .cookie-desc a { color: rgba(255,255,255,0.6); text-decoration: underline; }
    .cookie-desc a:hover { color: #ffffff; }
    .cookie-actions {
        display: flex; gap: 12px;
    }
    .cookie-btn {
        flex: 1; padding: 14px 24px; border-radius: 12px;
        font-size: 15px; font-weight: 600; cursor: pointer;
        transition: all 0.2s; border: none;
    }
    .cookie-outline {
        background: transparent;
        border: 1px solid rgba(255,255,255,0.2);
        color: #ffffff;
    }
    .cookie-outline:hover {
        border-color: rgba(255,255,255,0.4);
        background: rgba(255,255,255,0.05);
    }
    .cookie-accept {
        background: #FFD600; color: #1a1a1e;
    }
    .cookie-accept:hover { background: #ffe033; }
    @media (max-width: 540px) {
        .cookie-overlay { padding: 16px; }
        .cookie-card { padding: 28px 24px 24px; }
        .cookie-actions { flex-direction: column; }
    }