/* Logo-Varianten (Runde 2). Aktiv über data-logo am <header class="top"> bzw. an Vorschau-Boxen (/stile/).
   Wichtig: data-logo sitzt NUR am nächsten Container des Logos (nicht an <html>), sonst kollidieren Varianten.
   „balken“ = Grundlook aus style.css/Theme (keine Regeln hier). KI-Zeichen: /logos/<key>-64|128.webp */
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-latin-wght-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

[data-logo] { --logo-ink: var(--header-ink, var(--ink)); --logo-accent: #2F6F62; --logo-coral: #E07A5F; --logo-muted: var(--muted); }

/* Gemeinsam: Wortmarke für alle neuen Varianten (nicht „balken“) */
[data-logo]:not([data-logo="balken"]) .logo__word { font: 800 1.5rem/1 "Inter", system-ui, sans-serif; letter-spacing: -.045em; color: var(--logo-ink); text-transform: none; }
[data-logo]:not([data-logo="balken"]) .logo__word b { color: var(--logo-accent); font-weight: 800; font-style: normal; text-decoration: none; }
[data-logo]:not([data-logo="balken"]) .logo__word small { color: var(--logo-muted); opacity: 1; font-size: .62em; letter-spacing: -.01em; font-weight: 600; }

/* KI-Zeichen */
[data-logo="kurve"] .logo__mark, [data-logo="sprechblase"] .logo__mark, [data-logo="monogramm"] .logo__mark,
[data-logo="namensschild"] .logo__mark, [data-logo="siegel"] .logo__mark, [data-logo="rassel"] .logo__mark {
  display: inline-block; flex: none; width: 38px; height: 38px; padding: 0; background: center / contain no-repeat;
}
[data-logo]:not([data-logo="balken"]) .logo__word::before { display: none; }   /* Swiss pur: rotes Quadrat nur beim alten Logo */
[data-logo="kurve"] .logo__mark i, [data-logo="sprechblase"] .logo__mark i, [data-logo="monogramm"] .logo__mark i,
[data-logo="namensschild"] .logo__mark i, [data-logo="siegel"] .logo__mark i, [data-logo="rassel"] .logo__mark i,
[data-logo^="wort-"] .logo__mark { display: none; }
[data-logo="kurve"] .logo__mark { background-image: image-set(url("/logos/kurve-64.webp") 1x, url("/logos/kurve-128.webp") 2x); }
[data-logo="sprechblase"] .logo__mark { background-image: image-set(url("/logos/sprechblase-64.webp") 1x, url("/logos/sprechblase-128.webp") 2x); }
[data-logo="monogramm"] .logo__mark { background-image: image-set(url("/logos/monogramm-64.webp") 1x, url("/logos/monogramm-128.webp") 2x); width: 34px; }
[data-logo="namensschild"] .logo__mark { background-image: image-set(url("/logos/namensschild-64.webp") 1x, url("/logos/namensschild-128.webp") 2x); width: 44px; height: 40px; }
[data-logo="siegel"] .logo__mark { background-image: image-set(url("/logos/siegel-64.webp") 1x, url("/logos/siegel-128.webp") 2x); }
[data-logo="rassel"] .logo__mark { background-image: image-set(url("/logos/rassel-64.webp") 1x, url("/logos/rassel-128.webp") 2x); }
[data-logo="monogramm"] .logo { gap: 6px; }

/* Wortmarke Punkt: diesername● de */
[data-logo="wort-punkt"] .logo__word { font-weight: 900; letter-spacing: -.055em; font-size: 1.6rem; }
[data-logo="wort-punkt"] .logo__word b { color: var(--logo-ink); font-weight: 900; }
[data-logo="wort-punkt"] .logo__word small { font-size: 0 !important; }
[data-logo="wort-punkt"] .logo__word small::before { content: ""; display: inline-block; width: .3rem; height: .3rem; margin: 0 .12rem 0 .1rem; border-radius: 50%; background: var(--logo-coral); vertical-align: 0; transform: scale(1.15); }
[data-logo="wort-punkt"] .logo__word small::after { content: "de"; font-size: .95rem; color: var(--logo-muted); font-weight: 700; letter-spacing: -.02em; }

/* Wortmarke Serif: dieser (Fraunces kursiv) Name (Inter) */
[data-logo="wort-serif"] .lw-a { font: italic 500 1.65rem/1 "Fraunces", Georgia, serif; letter-spacing: -.02em; margin-right: .08em; }

/* Wortmarke Etikett: dieser [name] .de */
[data-logo="wort-label"] .logo__word { font-weight: 700; letter-spacing: -.035em; }
[data-logo="wort-label"] .logo__word b { display: inline-block; line-height: 1; background: #D5E6D9; color: #234F45; padding: .14em .32em .2em; margin-left: .1em; border-radius: .32em; font-weight: 800; }
[data-logo="wort-label"] .logo__word small { margin-left: .15em; }

/* Wortmarke Marker: name mit Pfirsich-Markierung */
[data-logo="wort-unterstrich"] .logo__word b { color: var(--logo-ink); box-shadow: inset 0 -.3em 0 #F8C9B3; padding: 0 .04em; }

/* Dunkler Hintergrund (Vorschau auf /stile/ und dunkle Header wie „Lavendel“) */
.lp--dark[data-logo], [data-theme="lavendel"] .top[data-logo] { --logo-ink: #F4F2FA; --logo-accent: #9FD0B3; --logo-muted: #B8B4CC; }
.lp--dark[data-logo="wort-label"] .logo__word b, [data-theme="lavendel"] .top[data-logo="wort-label"] .logo__word b { background: #9FD0B3; color: #1D2733; }

@media (max-width: 760px) {
  [data-logo]:not([data-logo="balken"]) .logo__word { font-size: 1.3rem; }
  [data-logo="wort-serif"] .lw-a { font-size: 1.42rem; }
  [data-logo="kurve"] .logo__mark, [data-logo="sprechblase"] .logo__mark, [data-logo="siegel"] .logo__mark, [data-logo="rassel"] .logo__mark { width: 32px; height: 32px; }
}

/* Theme-Feinschliff: Swiss pur bleibt schwarz/rot */
[data-theme="swiss-pur"] [data-logo] { --logo-accent: #E5322D; }