/* ==========================================================================
   TOP-TRIP — Core design system
   One file for colours, typography, buttons, forms and the public layout.
   Every public page loads this first. Admin pages load tt-admin.css on top.
   ========================================================================== */

:root {
    /* Surfaces */
    --tt-bg: #07090b;
    --tt-bg-2: #0b0e11;
    --tt-surface: #101418;
    --tt-surface-2: #161b20;
    --tt-surface-3: #1d232a;
    --tt-input: #0c1013;

    /* Brand gold — one gold, three tones */
    --tt-gold: #d4a843;
    --tt-gold-light: #f2d27c;
    --tt-gold-dark: #a67a1f;
    --tt-gold-gradient: linear-gradient(135deg, #f6dc8c 0%, #d4a843 45%, #a67a1f 100%);
    --tt-gold-soft: rgba(212, 168, 67, 0.12);
    --tt-gold-line: rgba(212, 168, 67, 0.32);

    /* Text */
    --tt-text: #f4f2ed;
    --tt-text-2: #b8bcc2;
    --tt-muted: #80868e;

    /* Lines */
    --tt-line: rgba(255, 255, 255, 0.08);
    --tt-line-2: rgba(255, 255, 255, 0.14);

    /* Status */
    --tt-green: #3cc47c;
    --tt-green-soft: rgba(60, 196, 124, 0.13);
    --tt-orange: #eda33b;
    --tt-orange-soft: rgba(237, 163, 59, 0.13);
    --tt-red: #ec5f67;
    --tt-red-soft: rgba(236, 95, 103, 0.13);
    --tt-blue: #5b9ef0;
    --tt-blue-soft: rgba(91, 158, 240, 0.13);
    --tt-purple: #a07ce8;
    --tt-purple-soft: rgba(160, 124, 232, 0.13);

    /* Type */
    --tt-font-head: "Montserrat", "Segoe UI", Arial, sans-serif;
    --tt-font-body: "Inter", "Segoe UI", Arial, sans-serif;

    /* Shape */
    --tt-radius-sm: 8px;
    --tt-radius: 12px;
    --tt-radius-lg: 18px;
    --tt-radius-xl: 26px;
    --tt-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
    --tt-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.3);

    /* Layout */
    --tt-header-h: 84px;
    --tt-container: 1200px;
    --tt-gutter: clamp(16px, 4vw, 40px);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    font-family: var(--tt-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--tt-text);
    background: var(--tt-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; font-family: var(--tt-font-head); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
p { margin: 0; }
::selection { background: var(--tt-gold); color: #111; }
:focus-visible { outline: 2px solid var(--tt-gold-light); outline-offset: 2px; }

.tt-container { width: min(var(--tt-container), 100% - 2 * var(--tt-gutter)); margin-inline: auto; }
.tt-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Typography helpers ---------- */
.tt-kicker {
    display: inline-flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
    color: var(--tt-gold-light);
    font-family: var(--tt-font-head);
    font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
}
.tt-kicker::before { content: ""; width: 28px; height: 1px; background: var(--tt-gold); }
.tt-gold-text {
    background: var(--tt-gold-gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.tt-lead { color: var(--tt-text-2); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.7; }

/* ---------- Buttons ---------- */
.tt-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 50px; padding: 0 26px;
    border: 1px solid transparent; border-radius: var(--tt-radius);
    font-family: var(--tt-font-head); font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    text-decoration: none; white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.tt-btn:hover:not(:disabled) { transform: translateY(-2px); }
.tt-btn:disabled, .tt-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.tt-btn-primary { color: #111; background: var(--tt-gold-gradient); box-shadow: 0 10px 28px rgba(212, 168, 67, .25); }
.tt-btn-primary:hover:not(:disabled) { box-shadow: 0 14px 34px rgba(212, 168, 67, .38); }
.tt-btn-outline { color: var(--tt-text); border-color: var(--tt-gold-line); background: rgba(0, 0, 0, .35); backdrop-filter: blur(6px); }
.tt-btn-outline:hover:not(:disabled) { border-color: var(--tt-gold); color: var(--tt-gold-light); }
.tt-btn-ghost { color: var(--tt-text); background: var(--tt-surface-2); border-color: var(--tt-line-2); }
.tt-btn-ghost:hover:not(:disabled) { border-color: var(--tt-gold-line); }
.tt-btn-danger { color: #fff; background: #b8323a; border-color: #d4484f; }
.tt-btn-sm { min-height: 40px; padding: 0 16px; font-size: 12px; border-radius: var(--tt-radius-sm); }
.tt-btn-block { width: 100%; }

/* ---------- Forms ---------- */
.tt-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.tt-field > span, .tt-label { color: var(--tt-text-2); font-size: 13px; font-weight: 600; }
.tt-input, .tt-field input, .tt-field select, .tt-field textarea {
    width: 100%; min-height: 50px; padding: 0 15px;
    color: var(--tt-text); background: var(--tt-input);
    border: 1px solid var(--tt-line-2); border-radius: var(--tt-radius);
    outline: none; color-scheme: dark;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.tt-field textarea { min-height: 130px; padding: 13px 15px; resize: vertical; }
.tt-input:focus, .tt-field input:focus, .tt-field select:focus, .tt-field textarea:focus {
    border-color: var(--tt-gold); box-shadow: 0 0 0 3px rgba(212, 168, 67, .15); background: #0e1317;
}
.tt-input::placeholder, .tt-field input::placeholder, .tt-field textarea::placeholder { color: #5f656c; }

.tt-message { padding: 13px 16px; border-radius: var(--tt-radius); font-size: 14px; line-height: 1.5; }
.tt-message:empty { display: none; }
.tt-message.error { color: #ffd0d3; background: var(--tt-red-soft); border: 1px solid rgba(236, 95, 103, .4); }
.tt-message.success { color: #cff5df; background: var(--tt-green-soft); border: 1px solid rgba(60, 196, 124, .4); }

/* ---------- Cards ---------- */
.tt-card {
    background: linear-gradient(160deg, var(--tt-surface-2), var(--tt-surface));
    border: 1px solid var(--tt-line);
    border-radius: var(--tt-radius-lg);
    box-shadow: var(--tt-shadow-sm);
}
.tt-card-gold { border-color: var(--tt-gold-line); }
.tt-icon-box {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 54px; height: 54px;
    color: var(--tt-gold-light); background: var(--tt-gold-soft);
    border: 1px solid var(--tt-gold-line); border-radius: 14px;
    font-size: 21px;
}

/* ==========================================================================
   Public header
   ========================================================================== */
.tt-header {
    position: fixed; inset: 0 0 auto 0; z-index: 5000;
    height: var(--tt-header-h);
    display: flex; align-items: center;
    background: linear-gradient(180deg, rgba(5, 7, 9, .92), rgba(5, 7, 9, .78));
    border-bottom: 1px solid var(--tt-gold-line);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    transition: background .25s ease, box-shadow .25s ease;
}
.tt-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--tt-gold-light) 35%, var(--tt-gold-light) 65%, transparent);
    opacity: .55;
}
.tt-header.is-scrolled { background: rgba(5, 7, 9, .97); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.tt-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(1320px, 100% - 2 * var(--tt-gutter)); margin-inline: auto; }
.tt-brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.tt-brand img { width: auto; height: 50px; filter: drop-shadow(0 0 12px rgba(212, 168, 67, .25)); }

.tt-nav { display: flex; align-items: center; gap: 6px; }
.tt-nav a {
    position: relative; display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 18px;
    color: var(--tt-text);
    font-family: var(--tt-font-head); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    text-decoration: none;
    transition: color .2s ease;
}
.tt-nav a i { color: var(--tt-gold); font-size: 17px; }
.tt-nav a + a::before { content: ""; position: absolute; left: -3px; top: 50%; width: 1px; height: 22px; background: var(--tt-line-2); transform: translateY(-50%); }
.tt-nav a::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 2px; height: 2px; background: var(--tt-gold); transform: scaleX(0); transition: transform .25s ease; }
.tt-nav a:hover, .tt-nav a[aria-current="page"] { color: var(--tt-gold-light); }
.tt-nav a:hover::after, .tt-nav a[aria-current="page"]::after { transform: scaleX(1); }

.tt-header-actions { display: flex; align-items: center; gap: 12px; }
.tt-lang { display: inline-flex; padding: 3px; border: 1px solid var(--tt-gold-line); border-radius: 999px; background: rgba(0, 0, 0, .4); }
.tt-lang button {
    min-width: 38px; height: 32px; padding: 0 9px;
    border: 0; border-radius: 999px; background: transparent; color: var(--tt-text-2);
    font-family: var(--tt-font-head); font-size: 12px; font-weight: 700; letter-spacing: .06em;
}
.tt-lang button.active { color: #111; background: var(--tt-gold-gradient); }
.tt-header .tt-btn { min-height: 44px; padding: 0 20px; }

.tt-menu-btn {
    display: none; place-items: center;
    width: 46px; height: 46px; padding: 0;
    color: var(--tt-gold-light); background: transparent;
    border: 1px solid var(--tt-gold-line); border-radius: var(--tt-radius);
    font-size: 19px;
}

@media (max-width: 1080px) {
    :root { --tt-header-h: 74px; }
    .tt-brand img { height: 42px; }
    .tt-menu-btn { display: grid; }
    .tt-header .tt-header-cta { display: none; }
    .tt-nav {
        position: fixed; top: var(--tt-header-h); left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        padding: 12px var(--tt-gutter) 22px;
        background: rgba(6, 8, 10, .98);
        border-bottom: 1px solid var(--tt-gold-line);
        box-shadow: 0 24px 40px rgba(0, 0, 0, .55);
        transform: translateY(-8px); opacity: 0; visibility: hidden;
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }
    .tt-header.menu-open .tt-nav { transform: none; opacity: 1; visibility: visible; }
    .tt-nav a { padding: 16px 6px; font-size: 14px; border-bottom: 1px solid var(--tt-line); }
    .tt-nav a + a::before, .tt-nav a::after { display: none; }
    .tt-nav .tt-nav-cta { display: flex; margin-top: 16px; border: 0; justify-content: center; color: #111; }
}
@media (min-width: 1081px) { .tt-nav .tt-nav-cta { display: none; } }
@media (max-width: 420px) {
    .tt-brand img { height: 36px; }
    .tt-lang button { min-width: 32px; padding: 0 6px; }
}

/* ==========================================================================
   Page scaffolding
   ========================================================================== */
.tt-main { padding-top: var(--tt-header-h); }
.tt-section { padding: clamp(70px, 9vw, 120px) 0; position: relative; }
.tt-section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.tt-section-head.center { margin-inline: auto; text-align: center; }
.tt-section-head.center .tt-kicker { justify-content: center; }
.tt-section-head h2 { font-size: clamp(30px, 3.8vw, 48px); margin-bottom: 16px; }

.tt-page-hero {
    position: relative; overflow: hidden;
    padding: clamp(70px, 10vw, 130px) 0 clamp(60px, 8vw, 100px);
    background:
        radial-gradient(ellipse at 80% 0%, rgba(212, 168, 67, .14), transparent 55%),
        linear-gradient(180deg, rgba(7, 9, 11, .55), var(--tt-bg)),
        url("../assets/img/worldmap.jpg") center / cover no-repeat;
    border-bottom: 1px solid var(--tt-line);
}
.tt-page-hero h1 { max-width: 820px; font-size: clamp(36px, 5.4vw, 66px); margin-bottom: 20px; }
.tt-page-hero .tt-lead { max-width: 700px; }
.tt-swoosh { position: absolute; left: -5%; right: -5%; bottom: -1px; height: 90px; pointer-events: none; }

/* ---------- Footer ---------- */
.tt-footer { position: relative; background: #040506; border-top: 1px solid var(--tt-gold-line); }
.tt-footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding: 64px 0 44px; }
.tt-footer img.tt-footer-logo { height: 56px; width: auto; margin-bottom: 18px; }
.tt-footer p { color: var(--tt-muted); font-size: 14px; line-height: 1.7; }
.tt-footer h4 { margin-bottom: 18px; color: var(--tt-gold-light); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.tt-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.tt-footer li, .tt-footer a { color: var(--tt-text-2); font-size: 14px; text-decoration: none; }
.tt-footer a:hover { color: var(--tt-gold-light); }
.tt-footer li i { width: 20px; color: var(--tt-gold); }
.tt-footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 0 28px; border-top: 1px solid var(--tt-line); color: var(--tt-muted); font-size: 13px; }
.tt-footer-bottom a { color: var(--tt-muted); font-size: 13px; }
.tt-footer-bottom nav { display: flex; gap: 22px; flex-wrap: wrap; }
@media (max-width: 900px) { .tt-footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tt-footer-top { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- Status card pages (login, success, details, receipt) ---------- */
.tt-center-page {
    min-height: calc(100vh - var(--tt-header-h));
    display: grid; place-items: center;
    padding: 50px var(--tt-gutter) 80px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(212, 168, 67, .12), transparent 55%),
        linear-gradient(180deg, rgba(7, 9, 11, .7), rgba(7, 9, 11, .95)),
        url("../assets/img/worldmap.jpg") center / cover no-repeat;
}
.tt-spinner { width: 46px; height: 46px; margin: 0 auto 22px; border: 3px solid rgba(255, 255, 255, .1); border-top-color: var(--tt-gold); border-radius: 50%; animation: tt-spin .8s linear infinite; }
@keyframes tt-spin { to { transform: rotate(360deg); } }

/* ---------- Reveal on scroll ---------- */
.tt-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.tt-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .tt-reveal { opacity: 1; transform: none; }
}

/* Language-specific blocks (e.g. legal pages): <div class="only-de"> / <div class="only-en"> */
html[lang="en"] .only-de, html:not([lang="en"]) .only-en { display: none !important; }
.legal-note { margin-top: 28px; color: var(--tt-muted); font-size: 13px; font-style: italic; }