/* Global Styles for TOBI Website */

/* ============================================
   FONTS - Statically loaded
   ============================================ */

/* Geist Sans - Loaded from local files */
@font-face {
    font-family: 'Geist Sans';
    src: url('../fonts/geist-sans.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Geist Mono - Loaded from local files */
@font-face {
    font-family: 'Geist Mono';
    src: url('../fonts/geist-mono.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Instrument Serif - Loaded from Google Fonts API (static CSS) */
/* Note: For fully static fonts, download woff2 files and use @font-face */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&display=swap');

/* ============================================
   MAXIMUM CONTAINER WIDTH
   ============================================ */
.container-max {
    max-width: 100rem; /* 1600px - consistent with existing design */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* ============================================
   HEADER STYLES
   ============================================ */
.logo-text-path {
    transition: fill 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.header-link:hover .logo-text-path {
    fill: #5e5855; /* Secondary Color on Hover */
}

/* Logo auf dunklem Hintergrund sichtbar machen */
body.dark-theme .logo-text-path,
body.dark-theme .header-link .logo-text-path,
body.dark-theme .logo-text-container .logo-text-path {
    fill: #f8f8f7 !important;
}

body.dark-theme .header-link:hover .logo-text-path,
body.dark-theme .logo-text-container:hover .logo-text-path {
    fill: rgba(248, 248, 247, 0.7) !important;
}

/* Auch für CTA-Sektionen mit dunklem Hintergrund */
section.bg-primary .logo-text-path,
section.bg-primary .header-link .logo-text-path,
section.bg-primary .logo-text-container .logo-text-path {
    fill: #f8f8f7 !important;
}

section.bg-primary .header-link:hover .logo-text-path,
section.bg-primary .logo-text-container:hover .logo-text-path {
    fill: rgba(248, 248, 247, 0.7) !important;
}

/* Logo-Text-Container auf dunklem Hintergrund */
body.dark-theme .logo-text-container {
    color: #f8f8f7 !important;
}

section.bg-primary .logo-text-container {
    color: #f8f8f7 !important;
}

.symbol-container {
    position: relative;
    width: 36px;
    height: 36px;
}

.symbol-mask-layer {
    width: 100%;
    height: 100%;
    animation: spin 60s linear infinite;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48.54 48.47'%3E%3Cg%3E%3Cpolygon points='26.48 0 21.98 0 23.16 15.34 25.32 15.33 26.48 0'/%3E%3Cpolygon points='4.35 10.23 2.07 14.1 16.1 20.63 17.14 18.85 4.35 10.23'/%3E%3Cpolygon points='13.96 2.14 10.16 4.35 18.91 17.08 20.72 16.01 13.96 2.14'/%3E%3Cpolygon points='38.23 4.35 34.36 2.07 27.82 15.99 29.6 17 38.23 4.35'/%3E%3Cpath d='M31.41,18.77l1.1,1.84,13.82-6.65c-.65-1.2-1.38-2.49-2.21-3.87l-12.7,8.68h0Z'/%3E%3Cpolygon points='0 21.98 0 26.48 15.41 25.31 15.41 23.14 0 21.98'/%3E%3Cpolygon points='34.5 46.32 38.37 44.04 29.77 31.33 27.96 32.41 34.5 46.32'/%3E%3Cpolygon points='48.54 26.41 48.54 21.91 33.2 23.16 33.21 25.25 48.54 26.41'/%3E%3Cpath d='M44.18,38.23c.18-.37.92-1.66,2.21-3.87l-13.83-6.66h0l-1.04,1.82,12.65,8.71h0Z'/%3E%3Cpolygon points='20.83 32.5 19.02 31.46 10.3 44.11 14.1 46.39 20.83 32.5'/%3E%3Cpolygon points='25.38 33.12 23.27 33.13 23.21 33.13 22.05 48.47 26.55 48.47 25.38 33.12'/%3E%3Cpolygon points='17.16 29.65 16.09 27.83 2.14 34.5 4.42 38.37 17.16 29.65'/%3E%3Ccircle cx='24.3' cy='24.23' r='2.62'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48.54 48.47'%3E%3Cg%3E%3Cpolygon points='26.48 0 21.98 0 23.16 15.34 25.32 15.33 26.48 0'/%3E%3Cpolygon points='4.35 10.23 2.07 14.1 16.1 20.63 17.14 18.85 4.35 10.23'/%3E%3Cpolygon points='13.96 2.14 10.16 4.35 18.91 17.08 20.72 16.01 13.96 2.14'/%3E%3Cpolygon points='38.23 4.35 34.36 2.07 27.82 15.99 29.6 17 38.23 4.35'/%3E%3Cpath d='M31.41,18.77l1.1,1.84,13.82-6.65c-.65-1.2-1.38-2.49-2.21-3.87l-12.7,8.68h0Z'/%3E%3Cpolygon points='0 21.98 0 26.48 15.41 25.31 15.41 23.14 0 21.98'/%3E%3Cpolygon points='34.5 46.32 38.37 44.04 29.77 31.33 27.96 32.41 34.5 46.32'/%3E%3Cpolygon points='48.54 26.41 48.54 21.91 33.2 23.16 33.21 25.25 48.54 26.41'/%3E%3Cpath d='M44.18,38.23c.18-.37.92-1.66,2.21-3.87l-13.83-6.66h0l-1.04,1.82,12.65,8.71h0Z'/%3E%3Cpolygon points='20.83 32.5 19.02 31.46 10.3 44.11 14.1 46.39 20.83 32.5'/%3E%3Cpolygon points='25.38 33.12 23.27 33.13 23.21 33.13 22.05 48.47 26.55 48.47 25.38 33.12'/%3E%3Cpolygon points='17.16 29.65 16.09 27.83 2.14 34.5 4.42 38.37 17.16 29.65'/%3E%3Ccircle cx='24.3' cy='24.23' r='2.62'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    position: relative;
    background: transparent;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.liquid-gradient-fill {
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background: #0a0500;
    background-size: 200% 200%;
    background-position: 50% 50%;
    /* Animation entfernt - statischer Gradient */
}

.noise-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.18;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.symbol-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
    filter: blur(8px);
    z-index: -1;
    pointer-events: none;
}

/* ============================================
   FOOTER STYLES
   ============================================ */
.global-footer {
    padding-top: 2rem;
    padding-bottom: 3rem;
}

/* Footer - immer dunkel */
.global-footer {
    color: rgba(248, 248, 247, 0.3);
    background-color: #140700;
}

.global-footer a {
    color: rgba(248, 248, 247, 0.3);
}

.global-footer a:hover {
    color: rgba(248, 248, 247, 0.6);
}

/* ============================================
   BASE STYLES (Common across all pages)
   ============================================ */
:root {
    --cursor-x: 50%;
    --cursor-y: 50%;
    --glow-color: rgba(238, 207, 109, 0.12);
}

body {
    background-color: #f8f8f7;
    color: #140700;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" on, "liga" on;
    cursor: default;
}
main {
    margin-bottom: 0px !important;
}

/* GRID PATTERN BACKGROUND */
body {
    background-image: 
        linear-gradient(to right, rgba(20, 7, 0, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(20, 7, 0, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    background-position: center top;
}

/* AMBIENT MOUSE GLOW */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        600px circle at var(--cursor-x) var(--cursor-y), 
        var(--glow-color), 
        transparent 40%
    );
    transition: opacity 0.3s ease;
    opacity: 1;
}

/* TEXT RENDERING */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* GLASS MENU */
.glass-menu {
    background: rgba(248, 248, 247, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(20, 7, 0, 0.05);
}

/* MOBILE MENU STYLES */
.mobile-menu-btn {
    position: relative;
    min-width: 44px;
    min-height: 44px;
}

.mobile-menu-btn .burger-icon,
.mobile-menu-btn .close-icon {
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.mobile-menu-expanded {
    pointer-events: none;
}

.mobile-menu-expanded.opacity-100 {
    pointer-events: auto;
}

/* Mobile menu links */
.nav-link-mobile {
    display: block;
    width: 100%;
}

/* ANIMATIONS */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: transform, opacity;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* EDITORIAL LIST HOVER EFFECT - FLUID */
.list-item-hover {
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 16px;
}

.list-item-hover:hover {
    background-color: #140700;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    border-radius: 16px;
    border-color: transparent;
    transform: scale(1.005);
}

/* Alle Text-Elemente auf helle Farbe beim Hover */
.list-item-hover:hover h3,
.list-item-hover:hover h4,
.list-item-hover:hover .mono-label,
.list-item-hover:hover .icon-marker {
    color: #f8f8f7 !important;
}

/* Headlines (span mit font-serif) bleiben weiß */
.list-item-hover:hover span.font-serif {
    color: #f8f8f7 !important;
}

/* Paragraphs und normale Text-Spans werden etwas transparenter */
.list-item-hover:hover p,
.list-item-hover:hover span:not(.font-serif):not(.mono-label):not(.icon-marker span) {
    color: rgba(248, 248, 247, 0.7) !important;
}

/* Icon-Marker und Mono-Labels auf helle Farbe */
.list-item-hover:hover .icon-marker {
    background-color: rgba(248, 248, 247, 0.1) !important;
}

.list-item-hover:hover .icon-marker span {
    color: rgba(248, 248, 247, 0.6) !important;
}

.list-arrow {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, color 0.4s ease;
}
.list-item-hover:hover .list-arrow {
    transform: translateX(12px);
    opacity: 1;
    color: #eecf6d;
}

/* BUTTONS */
.btn-main {
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.btn-main:hover {
    transform: scale(1.03);
}

/* SELECTION */
::selection {
    background: rgba(20, 7, 0, 0.1);
    color: #140700;
}

/* DARK THEME (for contact page) */
body.dark-theme {
    background-color: #140700;
    color: #f8f8f7;
}

body.dark-theme::before {
    --glow-color: rgba(238, 207, 109, 0.08);
}

body.dark-theme {
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

body.dark-theme .glass-menu {
    background: rgba(248, 248, 247, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Mobile menu on dark background */
body.dark-theme .mobile-menu-expanded {
    background: rgba(248, 248, 247, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

section.bg-primary .glass-menu {
    background: rgba(248, 248, 247, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

section.bg-primary .mobile-menu-expanded {
    background: rgba(248, 248, 247, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-theme ::selection {
    background: rgba(238, 207, 109, 0.2);
    color: #f8f8f7;
}

/* ============================================
   PAGE-SPECIFIC COMPONENT STYLES
   ============================================ */

/* System Cards (for Systems pages) */
.system-card {
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(20, 7, 0, 0.05);
    transform: translateZ(0);
    backface-visibility: hidden;
}

.system-card:hover {
    background-color: #140700;
    transform: translateY(-6px) scale(1.005);
    box-shadow: 0 25px 50px -12px rgba(20, 7, 0, 0.25);
    border-color: transparent;
}

.system-card:hover h3 { color: #f8f8f7; }
.system-card:hover p { color: rgba(248, 248, 247, 0.7); }
.system-card:hover .card-number { color: rgba(248, 248, 247, 0.3); }

.system-card:hover .btn-adaptive {
    background-color: #f8f8f7;
    color: #140700;
}

.system-card:hover .btn-arrow {
    transform: translateX(2px);
}

/* Content Boxes (for AI Design page) */
.content-box {
    border: 1px solid rgba(20, 7, 0, 0.05);
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.content-box:hover {
    border-color: rgba(20, 7, 0, 0.15);
    transform: translateY(-4px);
    background-color: rgba(255, 255, 255, 0.6);
}

/* Form Styles (for Contact page - Dark Mode) */
.solid-panel {
    background-color: #1c1613;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.input-field {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 0;
    color: #f8f8f7;
}

.input-field:focus {
    border-bottom-color: #eecf6d;
    background: rgba(255, 255, 255, 0.03);
    padding-left: 1rem;
    outline: none;
}