/* Markenanspruch »Reichweite, die verkauft.« neben der Wortmarke — die EINE Quelle
   fuer die ganze Website. Markup: templates/_slogan.html. Ratsche:
   accounts/test_slogan_kopfzeile.py.

   Vorbild mobile.de: Marke, duenner Trennstrich, danach zwei kurze Zeilen — erste
   gedeckt, zweite in Markenfarbe (dieselbe Zweiteilung wie »Post« + »Motor« in der
   Wortmarke selbst).

   🧨 Wer den Anspruch auf einer neuen Seite braucht, bindet Stylesheet + Bauteil ein
   und schreibt KEIN eigenes CSS — vorher standen Fassungen doppelt in landing.html und
   marketplace/base.html und waeren auseinandergelaufen.

   🧨🧨 Der Akzent ist #e0245e = 4,58:1 auf Weiss und liegt damit knapp ueber den 4,5:1,
   die WCAG AA fuer normale Schrift verlangt. Die beiden naheliegenden Marken-Nachbarn
   fallen durch: #ff3d77 = 3,40:1 und #ff8a3d = 2,10:1. Wer umfaerbt, misst nach — der
   Test rechnet gegen die tatsaechlich sichtbare, UEBERLAGERTE Flaeche, nicht gegen den
   rgba-Wert der milchigen Kopfzeile. */

.pm-claim{display:inline-block;vertical-align:middle;margin:0 0 0 3px;padding:0 0 0 13px;
  border:0;border-left:1px solid rgba(13,19,38,.15);
  font-family:'Manrope',system-ui,-apple-system,sans-serif;font-size:12.5px;line-height:1.3;
  font-weight:600;letter-spacing:0;color:#5c6680;white-space:nowrap;text-align:left}
/* 🧨🧨 Beide Zeilen tragen eine eigene Klasse und werden mit ZWEI Klassen adressiert
   (0,2,0). Ein blosses `.pm-claim>span` (0,1,1) verliert gegen Wirt-CSS derselben Bauart:
   `templates/aktion/_base.html` faerbt mit `.brand span{color:var(--blue)}` alles im
   Logo-Link blau — die erste Zeile des Anspruchs waere dort mitgefaerbt worden, ohne
   dass es hier auffaellt. `color:inherit` holt sie zurueck an die Farbe von .pm-claim,
   damit auch die dunkle Variante weiter greift. */
.pm-claim .pm-claim-txt,.pm-claim .pm-claim-akz{display:block}
.pm-claim .pm-claim-txt{color:inherit}
/* 🎨 „die verkauft." steht WEBSITEWEIT in Orange (Betreiber 21.08.2026: „die verkauf
   muss dann wirklich websiteweit ueberall in dem Orange uebernommen werden"). Bewusst
   ein fester Wert und nicht `var(--brand-text)`: der Slogan erscheint auf Seiten mit
   und ohne Marken-Tokens (Login, Registrierung, Vorschau-Schleuse, 2FA, B2B, Marktplatz).
   Mit Vererbung waere er dort mal orange, mal pink gewesen — bei EINEM Satz, der die
   Marke traegt, ist Einheitlichkeit wichtiger als Anpassung an die Umgebung.
   🧨 #c2410c und nicht das helle Logo-Orange: als Schrift auf Weiss traegt jenes nur
   2,27:1, dieses 5,18:1. Derselbe Ton wirkt in einer Buchstabenkontur voellig anders
   als auf einer Knopfflaeche. */
.pm-claim .pm-claim-akz{font-weight:800;color:#c2410c}

/* 🧨 `inline-block`, NICHT `block`: nicht jede Wortmarke sitzt in einem Flex-Kasten.
   Auf der B2B-Seite und in der Marketing-Shell ist der Logo-Link ein gewoehnlicher
   Inline-Anker — dort riss `display:block` den Anspruch UNTER das Logo und liess ihn
   aus der 60px hohen Leiste in die Reiterzeile darunter ragen (gemessen: Anspruch bis
   y=62, Reiter ab y=60).
   Der Wirt wird hier zur Zeile gemacht, statt in jeder Shell eigenes CSS nachzuruesten.
   🧨 `:not(.pm-claim-mitte)` ist Pflicht: die zentrierte Variante steht UNTER der Marke
   und wuerde als Flex-Kind wieder daneben rutschen. */
:is(a, div, span, header):has(> .pm-claim:not(.pm-claim-mitte)){
  display:inline-flex;align-items:center}

/* ── Enge Fenster je Kopfzeile ───────────────────────────────────────────────
   Alle vier Bereiche sind AM OBJEKT gemessen (Playwright-Sweep ueber 20 Breiten von
   320 bis 1920px, je Seite mit und ohne Anspruch verglichen). Der Anspruch steht
   ueberall sonst — auch auf dem Handy.
   🧨🧨 Gemessen wurde auf VIER Wegen, weil jeder einzelne blind ist:
     Kopfzeilenhoehe   sieht den Umbruch INNERHALB einer hoehenfixen Leiste nicht
     Textumbruch       sieht eine Ueberdeckung durch einen daruberliegenden Knopf nicht
     Ueberdeckung      sieht das Aufgehen der Leiste nicht
     Querscroll        sieht gar nichts davon
   Der »Anmelden«-Knopf der Startseite legte sich auf dem Handy ueber den Anspruch,
   ohne dass irgendeine Hoehe sich aenderte — nur die Ueberdeckungsmessung fand es. */

/* Globale Untergrenze: unter 360px reicht in KEINER Leiste die Breite — auf der
   B2B-Seite legte sich dort der Kopf des Kontaktfensters darueber. Die zentrierte
   Variante ist ausgenommen (sie steht unter der Marke, nicht neben ihr) — das
   erledigt ihre Regel weiter unten, weil sie spaeter steht. */
@media(max-width:359px){.pm-claim{display:none}}

/* Marktplatz-Shell (/autos/, /auto/…, /haendler/): unter 440px bricht die Leiste um
   (gemessen 61→104px bei 414 und 430px), ab 440px passt sie.
   🧨 Die Grenze ist mit dem ECHTEN Stylesheet gemessen. Ein erster Wert (430px) stammte
   aus einer Probe mit 2px schmalerem Innenabstand — der Anspruch ist real 5px breiter
   und kippte die Leiste damit genau an der Grenze. Masse nie aus einer Naeherung ableiten. */
@media(max-width:439px){.pm-claim-markt{display:none}}

/* Startseite: unter 480px legt sich der »Anmelden«-Knopf darueber; zwischen 901 und
   1180px bricht das Menue um (bei 1121px lief »So funktioniert's« zweizeilig,
   .nav-links war 48px statt 24px hoch). Ab 1181px greift zusaetzlich das
   Engerruecken des Menues in landing.html. */
@media(max-width:479px){.pm-claim-start{display:none}}
@media(min-width:901px) and (max-width:1180px){.pm-claim-start{display:none}}

/* Marketing-Shell (Lexikon, Ratgeber, Vergleiche, Marktdaten): zwischen 415 und 539px
   erscheint der Preis-Knopf (.hcta) und legt sich ueber den Anspruch — ohne dass die
   Leiste dabei hoeher wird. Darunter ist der Knopf ausgeblendet, ab 540px ist Platz. */
@media(min-width:415px) and (max-width:539px){.pm-claim-marketing{display:none}}

/* Rechtstext-Shell (Impressum, AGB, Datenschutz …): zwischen 361 und 479px zerreisst
   der Anspruch den Knopf »← Zur Startseite« in zwei Zeilen. 🧨 Bei 320 und 360px ist
   dieser Knopf ohnehin schon zweizeilig — dort macht der Anspruch es nicht schlimmer,
   die Leiste ist aber sichtbar am Anschlag; deshalb bis 479px ganz weg. */
@media(max-width:479px){.pm-claim-recht{display:none}}

/* App-Leiste (alle eingeloggten Seiten): bis 900px steckt die Navigation im
   Burger-Menue, ab 1280px ist sie einzeilig. Dazwischen traegt die Leiste bis zu neun
   Werkzeug-Links; der Anspruch schob sie bei 1100 und 1200px in eine zweite Reihe
   (navh 35→71, acht Links ragten aus der 54px-Leiste). */
@media(min-width:901px) and (max-width:1279px){.pm-claim-app{display:none}}

/* ── Varianten ───────────────────────────────────────────────────────────────
   🧨 Diese beiden Bloecke MUESSEN hinter allen Regeln oben stehen: gleiche
   Spezifitaet, die spaetere Regel gewinnt. Eine @media-Abfrage erhoeht die
   Spezifitaet NICHT — genau daran ist das Engerruecken des Startseiten-Menues beim
   ersten Versuch stillschweigend gescheitert. */

/* Zentriert unter der Wortmarke (Anmelden/Registrieren/Bestaetigen/Vorschau): dort
   steht die Marke ueber einer Karte, nicht in einer Leiste — immer sichtbar, auch mobil. */
.pm-claim-mitte{display:block;margin:8px 0 0;padding:0;border:0;text-align:center}

/* 🧨🧨 …und der Wirt wird zur ZENTRIERTEN SPALTE. Ohne diese Regel steht der Anspruch
   zwar unter der Marke, aber nicht unter IHR: die Logo-Kaesten der Anmeldung (.fs-logo)
   sind `inline-flex` und sitzen linksbuendig, waehrend der Anspruch als Block ueber die
   volle Breite zentriert — am Objekt sah das aus wie zwei nicht zusammengehoerige
   Elemente. Die Spalte richtet beide an derselben Mitte aus.
   🧨 `main`/`section` bewusst NICHT in der Liste: auf der Vorschauseite ist der Anspruch
   ein direktes Kind der ganzen Karte — die duerfte nicht zur Spalte werden. Ihre
   Wortmarke ist ohnehin schon mit `margin:0 auto` zentriert. */
:is(a, div, span, header):has(> .pm-claim-mitte){
  display:flex;flex-direction:column;align-items:center}

/* Dunkle Flaechen (Marken-Panel der Anmeldung, Vorschauseite).
   🧨🧨 BEIDE Zeilen sind hier reinweiss, die Zweiteilung traegt allein das
   Schriftgewicht. Grund ist gemessen, nicht gemutmasst: das Marken-Panel ist ein
   Blau-Violett-Verlauf. Darauf misst die Markenfarbe #e0245e nur 2,09:1 — und selbst
   gedecktes Weiss (rgba(255,255,255,.72)), das hier zuerst stand, kommt nur auf
   3,29:1. Reines Weiss holt 4,87:1 heraus; viel mehr gibt der Verlauf nicht her.
   🧨 Die zweite Regel MUSS bleiben, auch wenn sie wie eine Wiederholung aussieht:
   `.pm-claim .pm-claim-akz` (0,2,0) ist spezifischer als `.pm-claim-dunkel` (0,1,0) —
   ohne sie gewinnt die rosa Markenfarbe und faellt auf 2,09:1 zurueck. */
.pm-claim-dunkel{color:#fff;border-left-color:rgba(255,255,255,.32)}
.pm-claim-dunkel .pm-claim-akz{color:#fff}