/* ============================================================
   bestAnimalCARE — Design 2026, Teil 1: Grundlagen (base.css)
   Schriften, Farb-Tokens, Typografie, Links, Buttons, Formularfelder.
   Quelle der Werte: app/globals.css der Praxis-Landingpages.
   Wird nur geladen, wenn das Design aktiv ist (Vorschau-Schalter).
   Reihenfolge: base.css, shop.css, chrome.css, nach dem Theme-CSS.
   Alle Selektor-Regeln hängen an body.bac-design. Nur die Token-Blöcke
   sind global, weil das Theme seine Farben über [data-theme] setzt.
   ============================================================ */

/* ---------- Schriften (lokal, keine Verbindung zu Google) ---------- */
@font-face { font-family: "Poppins"; src: url(fonts/poppins-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url(fonts/poppins-600.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url(fonts/poppins-700.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Mulish";  src: url(fonts/mulish-400.woff2)  format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mulish";  src: url(fonts/mulish-700.woff2)  format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Tokens ----------
   Das Theme (CodyHouse) setzt alle Farben als hsl-Komponenten je [data-theme].
   Gleiche Spezifität wie dort, wir laden danach und gewinnen. Die zusammengesetzten
   Variablen (--color-primary usw.) rechnet das Theme selbst aus den Komponenten. */
:root {
  --font-primary: "Mulish", Verdana, "Trebuchet MS", sans-serif;
  --font-secondary: "Poppins", "Century Gothic", sans-serif;

  --bac-raspberry: #a81858;
  --bac-raspberry-dark: #7c1241;
  --bac-graphite: #2e3640;
  --bac-slate: #8a94a0;
  --bac-mist: #eef1f3;
  --bac-line: rgba(46, 54, 64, 0.12);
  --bac-line-strong: rgba(46, 54, 64, 0.2);
  --bac-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Browser-Oberflächen im CI: Formular-Akzente und Textcursor */
  accent-color: #a81858;
  caret-color: #a81858;
}

/* Helle Themes (Seite, Karten, Kopfzeile): Raspberry statt Aubergine,
   Graphite statt Grau, Mist als ruhige Fläche. */
:root,
[data-theme="default"],
[data-theme="light"] {
  --color-primary-darker-h: 333; --color-primary-darker-s: 75%; --color-primary-darker-l: 22%;
  --color-primary-dark-h: 333;   --color-primary-dark-s: 75%;   --color-primary-dark-l: 27.8%; /* #7c1241 */
  --color-primary-h: 333;        --color-primary-s: 75%;        --color-primary-l: 37.6%;      /* #a81858 */
  --color-primary-light-h: 333;  --color-primary-light-s: 70%;  --color-primary-light-l: 44%;
  --color-primary-lighter-h: 333; --color-primary-lighter-s: 65%; --color-primary-lighter-l: 50%;

  --color-accent-darker-h: 333;  --color-accent-darker-s: 75%;  --color-accent-darker-l: 22%;
  --color-accent-dark-h: 333;    --color-accent-dark-s: 75%;    --color-accent-dark-l: 27.8%;
  --color-accent-h: 333;         --color-accent-s: 75%;         --color-accent-l: 37.6%;
  --color-accent-light-h: 333;   --color-accent-light-s: 70%;   --color-accent-light-l: 44%;
  --color-accent-lighter-h: 333; --color-accent-lighter-s: 65%; --color-accent-lighter-l: 50%;

  /* Graphite #2e3640 für Überschriften und Fließtext */
  --color-contrast-higher-h: 213; --color-contrast-higher-s: 16%; --color-contrast-higher-l: 22%;
  --color-contrast-high-h: 213;   --color-contrast-high-s: 16%;   --color-contrast-high-l: 22%;
  /* Sekundärtext (Graphite bei 75 %), Slate #8a94a0 für Zartes */
  --color-contrast-medium-h: 214; --color-contrast-medium-s: 9%;  --color-contrast-medium-l: 42%;
  --color-contrast-low-h: 211;    --color-contrast-low-s: 11%;    --color-contrast-low-l: 60%;
  /* Mist #eef1f3 */
  --color-contrast-lower-h: 200;  --color-contrast-lower-s: 12%;  --color-contrast-lower-l: 94%;
  --color-bg-dark-h: 200;         --color-bg-dark-s: 12%;         --color-bg-dark-l: 94%;
}

/* Raspberry-Fläche (Footer, Warenkorb-Zähler): #a81858 statt #a3195c.
   In diesem Theme ist --color-accent = Weiß (Text auf der Fläche), das bleibt. */
[data-theme="accent"] {
  --color-bg-h: 333;        --color-bg-s: 75%;  --color-bg-l: 37.6%;
  --color-bg-light-h: 333;  --color-bg-light-s: 75%; --color-bg-light-l: 44%;
  --color-bg-lighter-h: 333; --color-bg-lighter-s: 75%; --color-bg-lighter-l: 50%;
  --color-bg-dark-h: 333;   --color-bg-dark-s: 75%;  --color-bg-dark-l: 33%;
  --color-bg-darker-h: 333; --color-bg-darker-s: 75%; --color-bg-darker-l: 28%;

  --color-primary-darker-h: 333; --color-primary-darker-s: 75%; --color-primary-darker-l: 16%;
  --color-primary-dark-h: 333;   --color-primary-dark-s: 75%;   --color-primary-dark-l: 22%;
  --color-primary-h: 333;        --color-primary-s: 75%;        --color-primary-l: 28%;
  --color-primary-light-h: 333;  --color-primary-light-s: 75%;  --color-primary-light-l: 33%;
  --color-primary-lighter-h: 333; --color-primary-lighter-s: 75%; --color-primary-lighter-l: 38%;
}

/* Dunkle Raspberry-Fläche (unterer Footer-Balken, Bänder): #7c1241 statt Aubergine.
   Hier ist --color-primary = Weiß und bleibt es. */
[data-theme="primary"] {
  --color-bg-h: 333;        --color-bg-s: 75%;  --color-bg-l: 27.8%;                        /* #7c1241 */
  --color-bg-light-h: 333;  --color-bg-light-s: 70%; --color-bg-light-l: 33%;
  --color-bg-lighter-h: 333; --color-bg-lighter-s: 65%; --color-bg-lighter-l: 37%;
  --color-bg-dark-h: 333;   --color-bg-dark-s: 75%;  --color-bg-dark-l: 24%;
  --color-bg-darker-h: 333; --color-bg-darker-s: 75%; --color-bg-darker-l: 20%;

  --color-accent-darker-h: 333;  --color-accent-darker-s: 75%;  --color-accent-darker-l: 22%;
  --color-accent-dark-h: 333;    --color-accent-dark-s: 75%;    --color-accent-dark-l: 27.8%;
  --color-accent-h: 333;         --color-accent-s: 75%;         --color-accent-l: 37.6%;
  --color-accent-light-h: 333;   --color-accent-light-s: 70%;   --color-accent-light-l: 44%;
  --color-accent-lighter-h: 333; --color-accent-lighter-s: 65%; --color-accent-lighter-l: 50%;
}

/* ---------- Grundschrift ---------- */
body.bac-design {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(1rem, 0.94rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  color: #2e3640;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.bac-design ::selection { background: #a81858; color: #fff; }

/* ---------- Überschriften ----------
   Poppins 600, Graphite, enge Laufweite wie auf /praxis/.
   Versalien bleiben außerhalb des Shops (viele WordPress-Titel sind klein
   gepflegt und leben von text-transform), dort etwas weniger Enge. */
body.bac-design :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-secondary);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-contrast-higher);
  text-wrap: balance;
}
body.bac-design:not(.woocommerce):not(.woocommerce-page) :is(h1, h2, h3, h4, h5, h6) {
  letter-spacing: 0.01em;
}
/* E4: Satzschreibung nur im Shop-Bereich (Shop, Kategorie, Produkt, Warenkorb, Kasse, Konto) */
body.bac-design.woocommerce :is(h1, h2, h3, h4, h5, h6),
body.bac-design.woocommerce-page :is(h1, h2, h3, h4, h5, h6) {
  text-transform: none;
}

/* ---------- Links im Fließtext ---------- */
body.bac-design :is(.text-component, .term-description, .woocommerce-Tabs-panel, .woocommerce-product-details__short-description, .bac-praxis-hinweis):not(.main-footer *) a:not(.btn):not(.button):not(.wp-element-button) {
  color: #a81858;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 200ms ease;
}
body.bac-design :is(.text-component, .term-description, .woocommerce-Tabs-panel, .woocommerce-product-details__short-description, .bac-praxis-hinweis):not(.main-footer *) a:not(.btn):not(.button):not(.wp-element-button):hover {
  color: #7c1241;
}

/* Fokus-Ring wie auf der Landingpage (Felder bekommen unten ihren eigenen Ring) */
body.bac-design :is(a, button, summary, [role="button"], [tabindex]):focus-visible {
  outline: 3px solid #a81858;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Buttons: ruhige Pille ----------
   Standard = Raspberry, Hover = Raspberry dunkel. Der Warenkorb-Block und die
   Kasse (.wc-block-components-button) bleiben absichtlich beim Theme. */
body.bac-design :is(.btn, .button, .wpcf7-submit, .wp-element-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 2.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: 999px;
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transition: transform 160ms var(--bac-ease), background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
body.bac-design :is(.btn--primary, .button, .wpcf7-submit, .wp-element-button) {
  background-color: #a81858;
  border: 1px solid #a81858;
  color: #fff;
}
body.bac-design :is(.btn--primary, .button, .wpcf7-submit, .wp-element-button):hover,
body.bac-design :is(.btn--primary, .button, .wpcf7-submit, .wp-element-button):focus-visible {
  background-color: #7c1241;
  border-color: #7c1241;
  color: #fff;
}
/* Sekundär: weiß mit Haarlinie (Graphite 20 %), Hover Raspberry */
body.bac-design :is(.btn--subtle, .btn--secondary, .bac-btn--secondary) {
  background-color: #fff;
  border: 1px solid rgba(46, 54, 64, 0.2);
  color: #2e3640;
}
body.bac-design :is(.btn--subtle, .btn--secondary, .bac-btn--secondary):hover,
body.bac-design :is(.btn--subtle, .btn--secondary, .bac-btn--secondary):focus-visible {
  background-color: #fff;
  border-color: #a81858;
  color: #a81858;
}
/* Deaktiviert */
body.bac-design :is(.btn, .button, .wpcf7-submit)[disabled],
body.bac-design :is(.btn, .button, .wpcf7-submit).disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Druckgefühl, nur ohne reduzierte Bewegung */
@media (prefers-reduced-motion: no-preference) {
  body.bac-design :is(.btn, .button, .wpcf7-submit, .wp-element-button):active {
    transform: scale(0.97);
  }
}

/* ---------- Formularfelder ----------
   Landing-Stil: weiß, Haarlinie, rounded-xl, Fokus Raspberry mit Ring.
   Ausgenommen: Store Locator (wpsl), Ansprechpartner-Suche (salesperson),
   Symptomfinder (adv-filter) und die Felder der WooCommerce-Blöcke
   (Kasse: nur Tokens, deren Beschriftungen liegen im Feld). */
body.bac-design :is(
  .form-control, .input-text,
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="search"], input[type="number"], input[type="password"], input[type="date"],
  select, textarea
):not([id^="wpsl"], [class*="wpsl-"], [class*="adv-filter"], [class*="salesperson"], [id*="salesperson"]):not(:is([id^="wpsl"], [class*="wpsl-"], [class*="adv-filter"], [class*="salesperson"], [id*="salesperson"], [class*="wc-block-"]) *) {
  background-color: #fff;
  color: #2e3640;
  border: 1px solid rgba(46, 54, 64, 0.2);
  border-radius: 0.75rem;
  box-shadow: none;
  padding: 0.65rem 0.9rem;
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.3;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
body.bac-design :is(
  .form-control, .input-text,
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="search"], input[type="number"], input[type="password"], input[type="date"],
  select, textarea
):not([id^="wpsl"], [class*="wpsl-"], [class*="adv-filter"], [class*="salesperson"], [id*="salesperson"]):not(:is([id^="wpsl"], [class*="wpsl-"], [class*="adv-filter"], [class*="salesperson"], [id*="salesperson"], [class*="wc-block-"]) *):focus {
  background-color: #fff;
  border-color: #a81858;
  box-shadow: 0 0 0 3px rgba(168, 24, 88, 0.18);
  outline: none;
}
body.bac-design :is(.form-control, .input-text, input, select, textarea)[aria-invalid="true"]:not([id^="wpsl"]):not([class*="wc-block-"]) {
  border-color: var(--color-error, #c0392b);
}
body.bac-design ::placeholder { color: #8a94a0; opacity: 1; }

/* ---------- Kontakt-Weiche [bac_kontakt] ----------
   Bewusst ohne body.bac-design: der Shortcode gilt immer.
   Variablen mit Rückfall, falls base.css fehlt. */
.bac-kontakt { max-width: 46rem; margin: 2rem auto; }
.bac-kontakt__wahl { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-bottom: 2rem; }
.bac-kontakt__karte {
  display: block; padding: 1.25rem 1.25rem 1.1rem; border: 1px solid var(--bac-line, rgba(46, 54, 64, 0.12));
  border-radius: 1rem; color: inherit; text-decoration: none; background: #fff;
  transition: border-color 200ms ease, transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.bac-kontakt__karte:hover { border-color: #a81858; }
.bac-kontakt__karte strong { display: block; font-family: var(--font-secondary, "Poppins", sans-serif); font-weight: 600; font-size: 1.1rem; margin-bottom: 0.25rem; }
.bac-kontakt__karte span { font-size: 0.95rem; color: var(--color-contrast-medium, #626972); }
.bac-kontakt__karte[aria-current="true"] { border-color: #a81858; box-shadow: inset 0 0 0 1px #a81858; }
@media (prefers-reduced-motion: no-preference) {
  .bac-kontakt__karte:active { transform: scale(0.98); }
}