presseportale/resources/css/web/theme-presseecho.css

/**
 * Theme für presseecho (presseecho.test)
 * Editorialer Wirtschaftsteil – analoge Architektur zu businessportal24,
 * aber mit grüner Markenpalette (Primary: #345636).
 *
 * Tailwind v4: alle Farben + Schriften liegen als @theme-Tokens vor,
 * sodass Klassen wie `bg-bg`, `text-ink-3`, `border-bg-rule` arbeiten
 * (gleiche Token-Namen wie bei businessportal24 → Komponenten-Reuse).
 *
 * Die alten HSL-Variablen aus shadcn-Style bleiben am Ende erhalten,
 * damit verbliebene Legacy-Styles nicht brechen.
 */
@import "./shared-styles.css";

@theme {
    /* Surfaces */
    --color-bg: #f2f4ed;
    --color-bg-elev: #fafbf7;
    --color-bg-rule: #dde2d3;
    --color-bg-rule-strong: #1b2417;
    --color-bg-dark: #15201a;
    --color-bg-card-warm: #ecefe3;
    --color-bg-card-warm-border: #c7cfb6;
    --color-topbar: #112d20;         /* Brand-Manual: satter Forest-Verlauf für die Topbar */
    --color-topbar2: #081b13;        /* Brand-Manual: tieferer Forest-Endpunkt */

    /* Ink */
    --color-ink: #1b2417;
    --color-ink-2: #324132;
    --color-ink-3: #6a7766;
    --color-ink-4: #98a294;
    --color-ink-on-dark: #f0f4eb;
    --color-ink-on-dark-2: #b1b9ab;

    /* Brand (Presseecho-grün) */
    --color-brand: #345636;
    --color-brand-deep: #243c25;
    --color-brand-soft: #dbe7d3;
    --color-live: #e03a1a;
    --color-gain: #2e8540;
    --color-loss: #c8341e;
    --color-ok: #2e8540;

    /* Editorial-Akzente (auf dunklem Grund / in Card-Warm) */
    --color-accent-warm: #e8a95f;
    --color-ink-on-dark-muted: #859485;
    --color-ink-on-dark-rule: #28332b;
    --color-bg-card-warm-hover: #dde3cc;
    --color-bg-card-warm-rule: #b7c0a2;
    --color-card-warm-cat: #5f6a52;
    --color-card-warm-title: #2e3826;
    --color-feature-line: #a8c8a8;
    --color-feature-dot: #c4dcc4;

    /* Fonts */
    --font-sans: "Inter Tight", "Söhne", Inter, system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-serif: "Source Serif 4", "Source Serif Pro", Charter,
        "Iowan Old Style", Georgia, serif;
    --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular,
        Menlo, Consolas, monospace;

    /* Layout */
    --container-layout: 1280px;
}

/* HSL-Variablen für Legacy-Komponenten (shared-styles, alte presseecho-Karten) */
:root {
    --font-primary: var(--font-sans);
    --font-secondary: var(--font-sans);

    --background: 87 22% 94%;
    --foreground: 90 28% 12%;
    --card: 87 22% 94%;
    --card-foreground: 90 28% 12%;
    --popover: 0 0% 100%;
    --popover-foreground: 90 28% 12%;

    /* Primary: #345636 -> hsl(124, 24%, 27%) */
    --primary: 124 24% 27%;
    --primary-foreground: 0 0% 100%;
    --primary-50: 124 24% 96%;
    --primary-100: 124 24% 92%;
    --primary-200: 124 24% 85%;
    --primary-300: 124 24% 75%;
    --primary-400: 124 24% 65%;
    --primary-500: 124 24% 55%;
    --primary-600: 124 24% 48%;
    --primary-700: 124 24% 40%;
    --primary-800: 124 24% 32%;
    --primary-900: 124 24% 25%;
    --primary-950: 124 24% 18%;

    --secondary: 130 15% 49%;
    --secondary-foreground: 90 28% 12%;

    --muted: 90 10% 90%;
    --muted-foreground: 90 8% 38%;
    --accent: 124 24% 27%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 90 16% 84%;
    --input: 90 16% 84%;
    --ring: 124 24% 27%;
    --radius: 2px;

    --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.04);
    --shadow-card-hover: 0 4px 12px -2px rgb(0 0 0 / 0.08);
}

@layer base {
    html,
    body {
        margin: 0;
        padding: 0;
    }

    body {
        background-color: #e6e8de;
        color: var(--color-ink);
        font-family: var(--font-sans);
        -webkit-font-smoothing: antialiased;
        font-feature-settings: "ss01", "cv11";
    }

    h1,
    h2,
    h3,
    h4 {
        font-family: var(--font-serif);
        color: inherit;
        letter-spacing: -0.01em;
    }

    .font-mono {
        font-family: var(--font-mono);
        font-feature-settings: "tnum";
    }
}

@layer components {
    .eyebrow {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-brand);
    }
    .eyebrow.muted {
        color: var(--color-ink-3);
    }
    .eyebrow.on-dark {
        color: var(--color-accent-warm);
    }

    .bp-cat {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--color-brand);
    }

    .bp-tag {
        display: inline-flex;
        align-items: center;
        padding: 3px 8px;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        background: var(--color-brand);
        color: #fff;
        border-radius: 2px;
    }

    .rule-strong {
        height: 1px;
        background: var(--color-bg-rule-strong);
        border: 0;
        margin: 0;
    }
    .rule {
        height: 1px;
        background: var(--color-bg-rule);
        border: 0;
        margin: 0;
    }

    .bg-topbar-grad {
        background-image: linear-gradient(
            135deg,
            var(--color-topbar) 0%,
            var(--color-topbar2) 100%
        );
    }
    .bg-feature-grad {
        background-image: linear-gradient(135deg, #2c4733, #15281c);
    }
    .bg-hero-grad {
        background-image: linear-gradient(135deg, #2c4733, #1a2a1f);
    }
}

@layer utilities {
    @keyframes bp-pulse {
        0%,
        100% {
            opacity: 1;
        }
        50% {
            opacity: 0.3;
        }
    }
    .pulse-dot {
        animation: bp-pulse 1.6s ease-in-out infinite;
    }

    @keyframes bp-ticker-marquee {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-50%);
        }
    }
    .ticker-marquee-track {
        display: flex;
        width: max-content;
        gap: 1.5rem;
        animation: bp-ticker-marquee var(--bp-ticker-duration, 42s) linear infinite;
        will-change: transform;
    }
    /* Anklickbare Meldungen: Lauf anhalten, solange die Maus darüber steht */
    .ticker-marquee-track:hover {
        animation-play-state: paused;
    }
    @media (prefers-reduced-motion: reduce) {
        .ticker-marquee-track {
            animation: none;
        }
    }

    .tabular-nums {
        font-variant-numeric: tabular-nums;
    }
}

[x-cloak] {
    display: none !important;
}