/* Guckmo Landing Page Custom Styles */

:root {
    --bg: #f6f6f3;
    --bg-alt: #ffffff;
    --surface: #ffffff;
    --surface-2: #fbfbf9;
    --border: #ececea;
    --border-strong: #d9d9d4;
    --text: #122137;
    --muted: #6b7280;
    --header-bg: rgba(246, 246, 243, 0.85);
    --header-border: rgba(236, 236, 234, 0.8);
}

/* Dark Mode Overrides */
.dark {
    --bg: #0b0f19; /* Tiefes, edles Schiefergrau/Dunkelblau */
    --bg-alt: #111827;
    --surface: #111827;
    --surface-2: #1f2937;
    --border: rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.12);
    --text: #f3f4f6;
    --muted: #9ca3af;
    --header-bg: rgba(11, 15, 25, 0.85);
    --header-border: rgba(255, 255, 255, 0.08);
}

/* Smooth Transition for Theme Switching */
.theme-tween {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}

/* Base style improvements for landing page elements */
html, body {
    background-color: var(--bg);
    color: var(--text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Die globale Formularbasis aus app.css darf die transparente Landing-Suche nicht übermalen. */
.gk #search-input,
.gk #search-input:focus {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--text) !important;
}

.gk #search-input::placeholder {
    color: var(--muted) !important;
    opacity: 1;
}