@import 'tailwindcss';
@tailwind base;
@tailwind components;
@tailwind utilities;

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}


/* Brand + Produktfarben (nur 1x anpassen) */
.text-xoto        { @apply text-white !important; }          /* "Xoto" bleibt schwarz */
.text-xpay        { @apply text-green-500; }      /* XotoPay */
.text-xmail       { @apply text-blue-400; }       /* XotoMailBox */
.text-xcluster    { @apply text-purple-500; }     /* XotoAICluster */
.text-xdash       { @apply text-amber-500; }      /* XotoDash */
.text-xfinder     { @apply text-sky-500; }        /* XotoFinder */
.text-xprofile    { @apply text-rose-500; }       /* XotoProfile */
.text-xshop       { @apply text-emerald-500; }    /* XotoShop */
.text-xbot        { @apply text-indigo-500; }     /* XotoBot */
.text-xbox        { @apply text-stone-400; }      /* XotoBox / Hardware */
.text-xoffice     { @apply text-teal-500; }       /* XotoOffice */
.text-xoffers     { @apply text-orange-400; }     /* XotoOffers */
.text-xshort      { @apply text-fuchsia-500; }    /* XotoShortner */
.text-xmailbox    { @apply text-blue-400; }       /* Alias zu MailBox */
.text-xcontact    { @apply text-cyan-500; }       /* ContactStation */
.text-xsphere     { @apply text-violet-500; }     /* XotoSphere */
.text-xgenerator  { @apply text-pink-500; }       /* Xoto(X)generator */
.text-xclusterhw  { @apply text-zinc-400; }       /* XotoCluster (HW) */
.text-xcopper     { @apply text-orange-300; }     /* Copper-Akzent */

/* Global für alle Links im Terms-Bereich */
.xoto-terms a {
  color: #ffffff !important;
  text-decoration: underline; /* optional */
}

.xoto-terms a:hover {
  color: #e2e8f0 !important; /* leichtes Grau beim Hover */
}
.glass {
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .glass-dark {
      background: rgba(0, 0, 0, .35);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, .08);
    }

    body {
      min-height: 100vh;
    }

    .metallic {
      background: radial-gradient(1200px 600px at 10% 10%, rgba(255, 255, 255, .08), transparent 40%),
        linear-gradient(135deg, #1a1a1a 0%, #121212 40%, #16110d 60%, #0f0f0f 100%);
    }

    .copper-sheen {
      background: linear-gradient(90deg, rgba(255, 161, 94, .35), rgba(110, 66, 28, .15) 50%, rgba(255, 161, 94, .35));
      background-size: 300% 100%;
      animation: sheen 8s linear infinite;
    }

    @keyframes sheen {
      0% {
        background-position: 0%
      }

      100% {
        background-position: 300%
      }
    }

    .tab-active {
      border-bottom: 2px solid #d8792f;
      color: #ffd9be;
    }

    .pill {
      transition: all .25s ease;
    }

    /* Mobile fix: Stack section titles and tabs */
    .section-header {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    @media (min-width: 768px) {
      .section-header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
      }
    }