@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Open+Sans:wght@400;600&display=swap');
/* SocialPixel — modern German ad agency (Avada). Magenta accent on near-black + clean whites. */
[data-theme="design-werbeagentur"] { --wa-accent: #d61c79; --wa-ink: #212326; --wa-dark: #141617; --wa-mist: #f9f9fb; --wa-line: #e6e7ea; }
[data-theme="design-werbeagentur"] body { background: #ffffff; color: var(--wa-ink); font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif; }
[data-theme="design-werbeagentur"] .site-header { background: #ffffff; border-bottom: 1px solid var(--wa-line); box-shadow: 0 1px 12px rgba(20,22,23,.05); }
[data-theme="design-werbeagentur"] .nav-logo-text { font-family: "Poppins", sans-serif; font-weight: 700; letter-spacing: -.02em; color: var(--wa-ink); }
[data-theme="design-werbeagentur"] .nav-logo-text::after { content: "."; color: var(--wa-accent); }
[data-theme="design-werbeagentur"] .nav-links a { color: var(--wa-ink); font-family: "Poppins", sans-serif; font-weight: 500; text-transform: uppercase; font-size: .82rem; letter-spacing: .08em; }
[data-theme="design-werbeagentur"] .nav-links a:hover { color: var(--wa-accent); }
[data-theme="design-werbeagentur"] .hero { background: linear-gradient(135deg, var(--wa-dark) 0%, var(--wa-ink) 100%); color: #fff; }
[data-theme="design-werbeagentur"] .hero h1 { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 3rem; letter-spacing: -.02em; color: #fff; }
[data-theme="design-werbeagentur"] .hero h1 span, [data-theme="design-werbeagentur"] .hero-tagline strong { color: var(--wa-accent); }
[data-theme="design-werbeagentur"] .hero-tagline { color: #cfd2d6; font-size: 1.15rem; }
[data-theme="design-werbeagentur"] .btn-primary { background: var(--wa-accent); border: 0; border-radius: 4px; font-family: "Poppins", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .85rem; }
[data-theme="design-werbeagentur"] .btn-primary:hover { background: #b3155f; }
[data-theme="design-werbeagentur"] .btn-outline { border: 2px solid #fff; color: #fff; border-radius: 4px; font-family: "Poppins", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
[data-theme="design-werbeagentur"] .section-title, [data-theme="design-werbeagentur"] .page-title { font-family: "Poppins", sans-serif; font-weight: 700; letter-spacing: -.01em; color: var(--wa-ink); }
[data-theme="design-werbeagentur"] .section-title::after { content: ""; display: block; width: 54px; height: 3px; background: var(--wa-accent); margin-top: 12px; }
[data-theme="design-werbeagentur"] .card { background: var(--wa-mist); border: 1px solid var(--wa-line); border-radius: 8px; overflow: hidden; transition: transform .15s, box-shadow .15s; }
[data-theme="design-werbeagentur"] .card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(20,22,23,.12); }
[data-theme="design-werbeagentur"] .card-title a { color: var(--wa-ink); font-family: "Poppins", sans-serif; font-weight: 600; }
[data-theme="design-werbeagentur"] .card-title a:hover { color: var(--wa-accent); }
[data-theme="design-werbeagentur"] .card-excerpt { color: #5c6066; font-size: .95rem; }
[data-theme="design-werbeagentur"] .badge { background: var(--wa-accent); color: #fff; border-radius: 3px; font-family: "Poppins", sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
[data-theme="design-werbeagentur"] .article-layout { max-width: 760px; }
[data-theme="design-werbeagentur"] .article-header h1 { font-family: "Poppins", sans-serif; font-weight: 700; letter-spacing: -.02em; }
[data-theme="design-werbeagentur"] .article-body { font-size: 1.05rem; line-height: 1.8; color: #33363a; }
[data-theme="design-werbeagentur"] .article-body a { color: var(--wa-accent); }
[data-theme="design-werbeagentur"] .site-footer { background: var(--wa-dark); color: #b7bbc0; }
[data-theme="design-werbeagentur"] .footer-container .nav-logo-text, [data-theme="design-werbeagentur"] .footer-links a { color: #e8eaec; }
[data-theme="design-werbeagentur"] .footer-links a:hover { color: var(--wa-accent); }