/* =============================================================
   Studio Kamélie – Warenkorb-Icon im Header
   Zielordner: /srv/www/studio-kamelie/public/assets/css/cart-icon.css

   -------------------------------------------------------------
   GEÄNDERT
   -------------------------------------------------------------

   1. FARBE DES ZÄHLERS. Der Kreis stand auf --clr-accent
      (#ceff1c). Das ist zwar ein echtes Wix-Token, kommt aber
      sonst nirgends auf der Website vor und sticht auf dem
      fliederfarbenen Header heraus wie ein Fehler.

      Schwerer wiegt: die Ziffer stand in Weiß darauf. Weiß auf
      #ceff1c ergibt ein Kontrastverhältnis von 1,17:1 – die Zahl
      war praktisch nicht zu lesen, und genau sie ist der einzige
      Zweck des Kreises.

      Der Zähler trägt jetzt dieselben Farben wie die Menü-Pill
      auf der anderen Seite des Headers: Fläche im Ton der Pill,
      Ziffer in --clr-lila. Kontrast der Ziffer: 7,14:1.

      WARUM NICHT EINFACH background: var(--clr-veil), so wie es
      die Pill macht: --clr-veil ist rgba(216,193,221,.8) und
      damit durchsichtig. Die Pill liegt auf dem freien Header,
      der Zähler dagegen auf dem Icon – der SVG-Pfad endet bei
      (23,6), im Link umgerechnet (31,14), und das liegt innerhalb
      der Zählerfläche (x 20–38, y 2–20). Der schwarze Griffstrich
      schiene bei 80 % Deckkraft durch und stünde als dunkler
      Strich direkt neben der Ziffer (#ae9cb2 gegen #dac3de).

      Die Fläche ist deshalb deckend, wird aber aus denselben
      Werten gemischt, die die Pill ergeben: zwei Lagen --clr-veil
      über --clr-white. Nachgerechnet ergibt das #dac3de – exakt
      der Wert, den main.css für "Pill auf Header" nennt. Kein
      hartkodierter Hexwert, kein neues Token.

   2. HOVER. .cart-link:hover färbte das Icon ebenfalls
      --clr-accent. Derselbe Neonton, nur beim Überfahren. Die
      übrige Website nimmt dafür durchgehend --clr-lila-mid.

   3. --radius GIBT ES NICHT. In main.css ist die Variable nicht
      deklariert; border-radius auf .cart-link fiel damit still
      aus. Die Zeile ist entfallen – der Link braucht keine
      Rundung. Dieselbe Klasse von Fehlern steckte in der alten
      shop.css.

   4. font-weight 700. Der @import in main.css lädt Montserrat in
      300, 400, 500 und 600 – 700 gibt es nicht, der Browser
      rechnet es synthetisch fett. Auf 600 gesetzt, also auf die
      tatsächlich geladene Schnittdicke.

   5. MOBIL-BLOCK ENTFERNT, siehe unten.
   ============================================================= */

.cart-link {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--clr-text);
    text-decoration: none;
    padding: var(--sp-sm);
    margin-left: var(--sp-sm);
    transition: color .2s;
    flex-shrink: 0;
}

.cart-link:hover {
    color: var(--clr-lila-mid);
    text-decoration: none;
}

.cart-icon {
    width: 24px;
    height: 24px;
    display: block;
}

/* Der Zähler liegt auf dem Icon und schneidet den Wagen dort
   sauber aus. Ohne Rand ist Absicht: der Wagen ist eine
   Strichzeichnung in currentColor, ein zusätzlicher Rand machte
   daraus zwei konzentrische Kreise.

   Die Fläche entsteht aus zwei Lagen --clr-veil über --clr-white
   und ergibt damit denselben Ton wie die Menü-Pill, die ihrerseits
   --clr-veil auf dem ebenfalls veil-farbenen Header ist. Deckend,
   damit der Griffstrich des Wagens nicht durchscheint. */
.cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: var(--clr-white);
    background-image: linear-gradient(var(--clr-veil), var(--clr-veil)),
                      linear-gradient(var(--clr-veil), var(--clr-veil));
    color: var(--clr-lila);
    font-family: var(--ff-ui);
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    pointer-events: none;
}

/* Platz reserviert, aber unsichtbar außerhalb Shop-Kontext.

   OFFEN: Die Klasse wird von pages/layout.php nicht gesetzt –
   dort entscheidet $show_cart, ob der Link überhaupt entsteht.
   Damit rückt das Logo beim Wechsel zwischen Shop und übriger
   Website um die Breite des Icons. Ob das stört, ist eine
   Gestaltungsfrage und nicht entschieden; die Klasse bleibt
   deshalb stehen. */
.cart-link--hidden {
    visibility: hidden;
    pointer-events: none;
}

/* -------------------------------------------------------------
   ENTFERNT: Mobil-Umbau des Headers unter 640 px

   Hier stand:

       @media (max-width: 639px) {
           .header-inner {
               display: grid;
               grid-template-columns: auto 1fr auto auto;
               align-items: center;
           }
           .main-nav { grid-column: 1 / -1; }
       }

   Der Block gehört zu einem anderen Markup. Der Kommentar nannte
   die Reihenfolge "Logo | [spacer] | Cart | Hamburger" und
   reservierte vier Spalten; .header-inner hat aber genau ZWEI
   Kinder – .nav-toggle und .header-right.

   Folge: .header-right landete in der zweiten Spalte (1fr) und
   stand darin linksbündig, weil es in main.css nur
   `display: flex` trägt, ohne justify-content und ohne
   margin-left: auto. Logo und Warenkorb rückten damit unter
   640 px direkt neben die Menü-Pill, rechts blieb der Rest der
   Zeile leer. Im Flex-Zustand aus main.css sorgt
   `justify-content: space-between` für die richtige Verteilung.

   .main-nav war zusätzlich wirkungslos: das Element ist im
   Markup Geschwister von <header>, nicht Kind von .header-inner.

   Weil diese Datei auf JEDER Seite geladen wird, betraf das nicht
   nur den Shop, sondern den Header der gesamten Website.

   NICHT IM BROWSER NACHGEMESSEN – die Herleitung stammt aus dem
   Markup von pages/layout.php und den Regeln in main.css.
   ------------------------------------------------------------- */