/* Logo-Varianten (design.LOGOS). Aktiv über data-logo am <header class="top"> (nie an <html> – sonst kollidieren die
   Vorschau-Boxen auf /stile/). Zeichen = Bild (KI, assets/logos) als Hintergrund, Wortmarke immer echte Schrift. */
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.logo__mark { display: block; flex: none; width: 44px; height: 44px; background: center / contain no-repeat; }
.logo__word { font: 600 1.6rem/1 var(--logo-font, "Fredoka", var(--head)); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.logo__word b { font-weight: 700; background: var(--yellow); color: var(--logo-b-ink, var(--ink)); padding: 0 .12em; border-radius: 6px; }
.logo__word small { display: none; }

[data-logo="standard"] .logo__mark { background-image: url(/logos/standard-192.png); width: 40px; height: 40px; }
[data-logo="napf-lupe"] .logo__mark { background-image: url(/logos/napf-lupe-96.webp); }
[data-logo="pfote-lupe"] .logo__mark { background-image: url(/logos/pfote-lupe-96.webp); }
[data-logo="koepfe"] .logo__mark { background-image: url(/logos/koepfe-96.webp); width: 52px; height: 52px; margin: -6px 0; }
[data-logo="katze-lupe"] .logo__mark { background-image: url(/logos/katze-lupe-96.webp); width: 50px; height: 50px; margin: -5px 0; }
[data-logo="badge"] .logo__mark { background-image: url(/logos/badge-96.webp); }
[data-logo="napf-haken"] .logo__mark { background-image: url(/logos/napf-haken-96.webp); width: 50px; height: 50px; margin: -5px 0; }
/* KI-Zeichen: Wortmarke ruhiger (Zeichen trägt die Farbe) */
[data-logo="napf-lupe"] .logo__word b, [data-logo="pfote-lupe"] .logo__word b, [data-logo="koepfe"] .logo__word b,
[data-logo="katze-lupe"] .logo__word b, [data-logo="badge"] .logo__word b, [data-logo="napf-haken"] .logo__word b {
  background: none; padding: 0; font-weight: 700; color: var(--logo-accent, #C98A00); }

/* Wortmarke Sticker: schief geklebtes Etikett */
[data-logo="wort-sticker"] .logo__mark { display: none; }
[data-logo="wort-sticker"] .logo__word { display: inline-block; line-height: 1; font-weight: 700; padding: 6px 10px 7px;
  background: var(--card, #fff); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-2deg); }
[data-logo="wort-sticker"] .logo__word b { border-radius: 6px; border: 2px solid var(--ink); margin-left: 2px; }

/* Wortmarke mit Lupen-Glyphe */
[data-logo="wort-lupe"] .logo__mark { display: none; }
[data-logo="wort-lupe"] .logo__word { font-family: var(--logo-font, "Figtree", var(--text)); font-weight: 900; letter-spacing: -.045em; font-size: 1.75rem; position: relative; padding-right: 30px; }
[data-logo="wort-lupe"] .logo__word b { background: none; padding: 0; font-weight: 900; color: inherit; border-radius: 0; }
[data-logo="wort-lupe"] .logo__word::before { content: ""; position: absolute; right: 4px; top: 50%; width: 15px; height: 15px; margin-top: -12px;
  border: 4px solid var(--ink); border-radius: 50%; background: var(--yellow); }
[data-logo="wort-lupe"] .logo__word::after { content: ""; position: absolute; right: 0; top: 50%; width: 9px; height: 4px; margin-top: 7px;
  background: var(--ink); border-radius: 2px; transform: rotate(45deg); }
[data-logo="wort-lupe"] .logo__word small { display: inline; font-size: .5em; font-weight: 700; letter-spacing: 0; color: var(--muted, #6A7080); margin-left: 1px; }

/* Wortmarke gestapelt im Quadrat */
[data-logo="wort-stapel"] .logo__mark { display: none; }
[data-logo="wort-stapel"] .logo__word { display: inline-grid; place-items: start; line-height: .86; font-size: 1.2rem; font-weight: 700;
  background: var(--yellow); border: 3px solid var(--ink); border-radius: 10px; padding: 5px 9px 6px; box-shadow: 3px 3px 0 var(--ink); color: var(--ink); }
[data-logo="wort-stapel"] .logo__word b { background: none; padding: 0; display: block; }

/* Footer-Logo bleibt neutral (Schrift), Vorschau-Boxen auf /stile/ */
.lp { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--top-bg, #FFFBF2); border: 2px solid var(--line, #1F2430); border-radius: 12px; }
.lp--dark { background: #1F2430; }
.lp--dark .logo__word { color: #fff; }
.lp--dark[data-logo="wort-sticker"] .logo__word, .lp--dark[data-logo="wort-stapel"] .logo__word { color: #1F2430; }
.lp--dark[data-logo="wort-lupe"] .logo__word::before { border-color: #fff; } .lp--dark[data-logo="wort-lupe"] .logo__word::after { background: #fff; }
.lp--mobile { width: 200px; transform-origin: left center; }
.lp__nav { font: 600 .9rem/1 var(--head); color: var(--ink-soft, #4A5060); }