/* =========================================================
   brand.css — einheitliches Erscheinungsbild KarriereMentor
   Wird auf JEDER Seite als letztes Stylesheet geladen und
   überschreibt Farben, Schrift, Kopfzeile und Mobil-Darstellung.
   Stand 17.10.2026
   ========================================================= */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/inter-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/inter-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/inter-latin-800-normal.woff2) format('woff2'); }

:root {
    --km-navy: #2c3e50;
    --km-navy-dark: #1a252f;
    --km-orange: #e67e22;
    --km-orange-dark: #d35400;
    --km-text: #2c3e50;
    --km-muted: #5f6f7e;
    --km-bg: #f8f9fa;
    --km-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    /* Variablen der bestehenden Stylesheets auf die Marke umbiegen */
    --primary-color: #2c3e50;
    --secondary-color: #1a252f;
    --accent-color: #e67e22;
    --premium-gradient: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
    --font-heading: var(--km-font);
    --font-body: var(--km-font);
    --color-primary: #e67e22;
    --color-primary-dark: #d35400;
    --color-text: #2c3e50;
}

html { -webkit-text-size-adjust: 100%; }
body, button, input, select, textarea { font-family: var(--km-font) !important; }
h1, h2, h3, h4, .nav-brand, .lp-logo, .logo { font-family: var(--km-font) !important; }
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }

/* ---------- Kopfzeile: überall weiss mit dunklem Logo ---------- */
.blog-nav {
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    padding: 14px 24px;
}
.blog-nav a { color: var(--km-text) !important; }
.blog-nav a[style*="e67e22"] { color: var(--km-orange) !important; }
.blog-nav .nav-brand { font-size: 1.5rem !important; font-weight: 800 !important; letter-spacing: -.3px; color: #333 !important; }
.blog-nav .nav-brand span { color: var(--km-orange) !important; }

/* ---------- Farben: Blau/Lila/Pink der alten Vorlagen ersetzen ---------- */
.tip-box { background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%) !important; }
.cta-box { background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%) !important; color: #fff !important; }
.cta-box h3, .cta-box p { color: #fff !important; }
.cta-box .cta-button { background: var(--km-orange) !important; color: #fff !important; }
.cta-box a[style*="background:#fff"] { color: var(--km-orange-dark) !important; }

/* ---------- Mobil ---------- */
@media (max-width: 700px) {
    .blog-nav { padding: 12px 16px; }
    .blog-nav .nav-brand { font-size: 1.3rem !important; }
    /* nur «Angebot» und «Blog» zeigen, sonst ragt die Leiste über den Rand */
    .blog-nav .nav-links { gap: 1rem !important; font-size: .9rem !important; }
    .blog-nav .nav-links a:not(:first-child):not([href$="/blog/"]) { display: none !important; }
}
@media (max-width: 600px) {
    .lp-hero h1, .hero h1 { font-size: 2rem !important; line-height: 1.15 !important; }
    .services h2, .about-text h2, .process h2, .faq h2, .blog h2, .contact h2, .lp-section h2 {
        font-size: 1.7rem !important; line-height: 1.2 !important;
    }
    .lp-hero { padding: 56px 18px !important; }
    .trust-badge { font-size: .85rem !important; }
}

/* ---------- Kleine Handys (bis 400 px, z.B. iPhone SE) ---------- */
@media (max-width: 400px) {
    .media-grid { grid-template-columns: 1fr !important; }
    .media-card { padding: 20px !important; }
    .lp-grid > * { min-width: 0; }
    .lp-paket, .lp-card { padding: 22px !important; }
    .leadmagnet { padding: 24px 18px !important; }
    .lm-form input[type=email] { min-width: 0 !important; width: 100%; }
    .lp-nav { padding: 12px 14px !important; }
    .lp-nav .lp-logo { font-size: 1.35rem !important; }
    .lp-nav-cta { padding: 6px 12px !important; font-size: .8rem !important; }
    .adv-grid { grid-template-columns: 1fr !important; }
    .cvcheck-grid > *, .services-grid > *, .blog-grid > * { min-width: 0; }
    .services, .process, .faq, .blog, .contact { padding-left: 4px !important; padding-right: 4px !important; }
    .service-card { padding: 1.4rem !important; }
    .services-grid, .blog-grid, .promise-grid, [style*="minmax(3"], [style*="minmax(28"], [style*="minmax(2"] { grid-template-columns: 1fr !important; }
    .cvcheck-grid h2 { font-size: 1.6em !important; }
}

/* Cookie-Banner auf kleinen Handys nicht breiter als der Bildschirm */
@media (max-width: 400px) {
    #km-cookie-banner .km-cb-card { max-width: calc(100vw - 20px) !important; box-sizing: border-box !important; }
}
@media (max-width: 400px) {
    body .trust-stats { grid-template-columns: 1fr !important; gap: 18px !important; }
}

/* Grosse Titel auf dem Handy: Grösse an die Breite koppeln, statt Wörter mitten im Wort zu brechen */
@media (max-width: 600px) {
    .lp-hero h1, .hero h1 { font-size: clamp(1.45rem, 7vw, 2rem) !important; overflow-wrap: normal !important; }
    .lp-nav-cta { white-space: nowrap; padding: 7px 14px !important; font-size: .82rem !important; }
}

/* Einheitliches Orange für Knöpfe und Preise auf den Landingpages */
.btn-cta:not([style*="background"]) { background-color: var(--km-orange) !important; }
.btn-cta:not([style*="background"]):hover { background-color: var(--km-orange-dark) !important; }
.lp-nav-cta { background: var(--km-orange) !important; }
.lp-paket-price, .svc-price { color: var(--km-orange) !important; }