/* ======================================================================
   Hofhund Manufaktur — Stylesheet
   Tone: warm, grounded, low-gloss. Inspired by classifieds layouts:
   plenty of whitespace, clear trait pills, wide gallery.
====================================================================== */

/* Cross-Document View Transitions — Browser haelt einen Snapshot der alten
   Seite sichtbar waehrend die neue laedt, smoother Cross-Fade statt blink-out.
   Chromium/Edge unterstuetzen das; Firefox/Safari ignorieren stillschweigend. */
@view-transition { navigation: auto; }

@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/rubik-vf.woff2") format("woff2-variations"),
       url("/fonts/rubik-vf.woff2") format("woff2");
}

:root {
  /* Helles Default-Theme (kein data-theme = diese Werte). */
  --c-page-bg: #fffaf0;
  --c-card-bg: #ffffff;
  --c-subtle-bg: #fffaf0;
  --c-text: #4f350f;
  --c-text-muted: #5e420c;
  --c-border: #ffd000;
  --c-brand: #b79d00;
  --c-brand-hover: #ffcf00;
  --c-brand-accent: #e2ae09;
  --c-success: #3f7a3a;
  --c-warning: #b07c1a;
  --c-danger: #9a3a2a;
  --c-dog-male: #2c5a8a;
  --c-dog-female: #8a3a6a;
  --c-on-brand: #fffaf0;
  --c-on-brand-accent: #542e15;
  /* Akzent-Slot-Vars — Header, Footer, Buttons, Kicker-Pills, Filter-Tabs
     nutzen brand-accent direkt. Yellow ist Default-CD. */
  --c-header-bg: var(--c-brand-accent);
  --c-on-header: var(--c-on-brand-accent);
  --c-on-header-muted: #2a1a10;
  --c-btn-primary-bg: var(--c-brand-accent);
  --c-on-btn-primary: var(--c-on-brand-accent);
  --c-kicker-bg: var(--c-brand-accent);
  --c-kicker-color: var(--c-on-brand-accent);
  --c-filter-active-bg: var(--c-brand-accent);
  --c-on-filter-active: var(--c-on-brand-accent);
  /* Footer = Header (gleiche Farbe, gleiches yellow). */
  --c-footer-bg: var(--c-brand-accent);
  --c-footer-text: var(--c-on-brand-accent);
  --c-footer-link: var(--c-on-brand-accent);
  --c-footer-text-muted: #2a1a10;
  --c-footer-border: #2a1a10;
  /* Hero-Gradient-Tints transparent: kein cremiger Overlay-Streifen unter
     dem gelben Header. Sections rendern nur page-bg. */
  --c-tint-brand-accent: transparent;
  --c-tint-subtle: transparent;
  --c-tint-brand: transparent;
  /* Optionales Body-Hintergrundbild — per Default none. Themes (insb. gelbe) koennen das Logo-Hintergrundbild als atmosphaerische Textur einschalten. */
  --c-bg-image: none;
  --c-bg-image-tint: #dca817;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 14px rgba(40,30,20,.08);
  --f-sans: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --f-serif: var(--f-sans);   /* unified to Rubik for visual consistency */
}

/* Public dark mode — toggle in header umschaltet zwischen :root (light)
   und [data-theme="dark"]. Default = light.
   color-scheme: dark -> Browser rendert native UI (checkboxen, scrollbars,
   selects) im dark-style. */
[data-theme="dark"] {
  color-scheme: dark;
  --c-page-bg: #0f0a07;
  --c-card-bg: #3a2418;
  --c-subtle-bg: #1b1613;
  --c-text: #6e6046;
  --c-text-muted: #896500;
  --c-border: #4e4912;
  --c-brand: #867200;
  --c-brand-hover: #9f9f0f;
  --c-brand-accent: #715704;
  --c-success: #a79917;
  --c-warning: #b07c1a;
  --c-danger: #9a3a2a;
  --c-dog-male: #4287cd;
  --c-dog-female: #c8569a;
  --c-on-brand: #2a1a10;
  --c-on-brand-accent: #2a1a10;
  --c-on-header-muted: #2a1a10;
  --c-footer-text-muted: #ff2bd6;
  --c-footer-border: #2a1a10;
  --c-bg-image-tint: #dca817;
}

/* Dark-Mode: nur das Banner-Bild dunkler, gelbe header-bg-flaeche
   unangetastet. Bild kommt jetzt aus ::before mit filter brightness,
   sodass nur das image area betroffen ist. */
[data-theme="dark"] .site-header {
  background-image: none;
}
[data-theme="dark"] img {
  filter: brightness(.6);
}

/* High-contrast themes (Accessibility): zwei varianten, schwarz-auf-
   weiss und invertiert weiss-auf-schwarz. Gleiche schriftgroesse,
   Verdana, WCAG-Kontrast 21:1. */
[data-theme="contrast"],
[data-theme="contrast-inverted"] {
  --c-subtle-bg: #1a1a1a;
  --f-sans: Verdana, "Helvetica Neue", Arial, sans-serif;
  --f-serif: var(--f-sans);
}
[data-theme="contrast"] body,
[data-theme="contrast-inverted"] body { font-size: 1.25rem; line-height: 1.7; }
/* Alle Children erben - einheitliche schriftgroesse. */
[data-theme="contrast"] body *,
[data-theme="contrast-inverted"] body * { font-size: inherit; line-height: inherit; }
[data-theme="contrast"] .logo-block,
[data-theme="contrast-inverted"] .logo-block { display: none; }
[data-theme="contrast"] img,
[data-theme="contrast-inverted"] img { filter: none; }

/* Schwarz-auf-weiss */
[data-theme="contrast"] {
  --c-page-bg: #ffffff;
  --c-card-bg: #ffffff;
  --c-subtle-bg: #f0f0f0;
  --c-text: #000000;
  --c-text-muted: #000000;
  --c-border: #000000;
  --c-brand: #000000;
  --c-brand-hover: #000000;
  --c-brand-accent: #ffffff;
  --c-success: #000000;
  --c-warning: #000000;
  --c-danger: #000000;
  --c-dog-male: #000000;
  --c-dog-female: #000000;
  --c-on-brand: #ffffff;
  --c-on-brand-accent: #000000;
  --c-on-header-muted: #000000;
  --c-footer-text-muted: #000000;
  --c-footer-border: #000000;
  --c-bg-image-tint: #000000;
}

/* Weiss-auf-schwarz (invertiert) */
[data-theme="contrast-inverted"] {
  color-scheme: dark;
  --c-page-bg: #000000;
  --c-card-bg: #000000;
  --c-subtle-bg: #1a1a1a;
  --c-text: #ffffff;
  --c-text-muted: #ffffff;
  --c-border: #ffffff;
  --c-brand: #ffffff;
  --c-brand-hover: #ffffff;
  --c-brand-accent: #000000;
  --c-success: #ffffff;
  --c-warning: #ffffff;
  --c-danger: #ffffff;
  --c-dog-male: #ffffff;
  --c-dog-female: #ffffff;
  --c-on-brand: #000000;
  --c-on-brand-accent: #ffffff;
  --c-on-header-muted: #ffffff;
  --c-footer-text-muted: #ffffff;
  --c-footer-border: #ffffff;
  --c-bg-image-tint: #ffffff;
}
[data-theme="dark"] .logo-img { filter: brightness(.5); }

.site-main { padding-top: 2rem; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; background: #000; }
body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text);
  /* Body-Hintergrund: optionales Bild (Tint-Layer ueber Logo-Foto) + bg-Farbe als Sockel.
     Themes ohne Bild lassen --c-bg-image auf none — dann nur die bg-Farbe. */
  background-color: var(--c-page-bg);
  background-image: var(--c-bg-image);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-brand); text-decoration: none; }
a:hover { color: var(--c-brand-hover); text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--f-serif); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.2rem; }
.muted { color: var(--c-text-muted); }
.small { font-size: .875rem; }
.lead { font-size: 1.1rem; color: var(--c-text-muted); }
.nowrap { white-space: nowrap; }
.kicker { display: inline-block; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-kicker-color); background: var(--c-kicker-bg); padding: .15em .55em; border-radius: .25em; margin-bottom: .6rem; }
.container { width: min(960px, 92vw); margin-inline: auto; }
.section { padding: 3rem 0; }
.section-title { text-align: center; margin-bottom: 2rem; }
.section-cta { text-align: center; margin-top: 2rem; }
.bg-soft { background: var(--c-subtle-bg); }

/* ----- Buttons ----- */
.btn {
  display: inline-block;
  padding: .7rem 1.2rem;
  border-radius: var(--r-md);
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
  font-size: .95rem;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:focus-visible,
.filter-btn:focus-visible,
.nav-toggle:focus-visible,
.thumb:focus-visible,
.mailto-form button:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.btn-primary { background: var(--c-btn-primary-bg); color: var(--c-on-btn-primary); }
.btn-primary:hover { background: var(--c-brand-hover); color: var(--c-on-brand); }
.btn-ghost { background: transparent; color: var(--c-text); border-color: var(--c-border); }
.btn-ghost:hover { background: var(--c-subtle-bg); color: var(--c-text); }
.btn-block { width: 100%; text-align: center; }

/* ----- Header ----- */
.site-header {
  background-color: var(--c-header-bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
  position: sticky; top: 0; z-index: 50;
}
.header-grid { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding: 1.875rem 0; position: relative; }
/* Logo-block: position absolute -> diktiert nicht die header-hoehe.
   Logo ragt unter dem banner-rand raus (overflow). Brand-anchor
   (fly-target) bleibt position:absolute innerhalb logo-block per
   prozent -> beide synchron bei viewport-resize. */
.logo-block {
  position: absolute;
  width: 238px;
  height: 182px;  /* 238 * 690/902 ≈ 182 — aspect erhaltend */
  top: 15px;
  left: 30px;
  transform-origin: top left;
  transition: transform .3s ease;
}
.site-header.is-scrolled .logo-block { transform: scale(.53); }
.logo-img {
  display: block;
  width: 100%;
  height: 100%;
}
.brand {
  /* Bulldog-kopf in logo-frei.jpg: zentriert bei (50%, 30%).
     translate(-50%,-50%) zentriert das brand-element darauf. */
  position: absolute;
  left: calc(50% - 12px);
  top: calc(30% + 2px);
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  display: block;
  color: var(--c-on-header);
}
.brand img { width: 100%; height: 100%; display: block; }
.brand:hover { text-decoration: none; color: var(--c-on-header); }
.brand-text strong { display: block; font-family: var(--f-serif); font-size: 1.25rem; }
.brand-text small { display: block; color: var(--c-on-header-muted); font-size: .8rem; }
.site-nav ul { display: flex; gap: 1.4rem; list-style: none; padding: 0; margin: 0; }
.site-nav ul a { color: var(--c-on-header); font-weight: 500; padding: .4rem .2rem; border-bottom: 2px solid transparent; }
.site-nav ul a:hover { border-bottom-color: var(--c-on-header); text-decoration: none; }
.site-nav ul li:has(a[aria-current="page"]) { display: none; }
.nav-toggle { display: none; background: transparent; border: 0; font-size: 1.5rem; cursor: pointer; }

/* Language switcher in the header — sits next to the main nav, small. */
.site-nav { display: flex; align-items: center; gap: 1.4rem; }
@media (max-width: 600px) {
  .site-nav { gap: .4rem; }
  .site-nav ul { gap: .6rem; }
}
@media (max-width: 500px) {
  /* Buttons nebeneinander (row), wrappen bei sehr schmal. */
  .site-nav { flex-direction: row; align-items: center; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 374px) {
  /* 2 reihen erzwingen ohne button-breite zu aendern: pseudo-element
     mit width 100% zwischen item-orders -> zwingt zeilenumbruch. */
  .site-nav::before { content: ""; width: 100%; order: 2; }
  .nav-toggle { order: 1; }
  .theme-toggle { order: 1; }
  .contrast-toggle { order: 3; }
  .lang-switch { order: 3; }
  /* Padding reduziert -> header insgesamt nicht so hoch trotz 2 button-reihen. */
  .header-grid { padding: .5rem 0; }
}
@media (max-width: 500px) {
  /* Bei <500 kein scroll-shrink: logo bleibt scale(.53). */
  .site-header.is-scrolled .logo-block { transform: scale(.53); }
  /* Kleinerer abstand header -> content (auf echten smartphones merklich). */
  .site-main { padding-top: 1.5rem; }
  .prose, .container:not(.header-grid), .section { padding: 0; }
  .site-main .page-header { margin-top: 0; }
  .site-main .amadeus-hero { padding-top: 1rem; }
  /* Logo kleiner (gleiche groesse wie gescrollte breite version: 53%). */
  .logo-block { transform: scale(.53); }
}
.lang-switch { display: inline-flex; align-items: center; gap: .35rem; background: transparent; border: 1px solid var(--c-border); color: var(--c-on-header); font-weight: 500; padding: .4rem .6rem; border-radius: var(--r-sm); height: 2.25rem; box-sizing: border-box; line-height: 1; text-decoration: none; }
.lang-switch:hover { background: rgba(0, 0, 0, .08); text-decoration: none; }
.lang-switch:focus-visible { outline: 2px solid var(--c-on-header); outline-offset: 2px; }

/* Public Light/Dark Toggle — Sonne sichtbar bei light, Mond bei dark.
   Beide Icons im DOM, CSS toggled via data-theme-Attribut. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-on-header);
  cursor: pointer;
  padding: .4rem;
  border-radius: var(--r-sm);
  height: 2.25rem;
  box-sizing: border-box;
  line-height: 1;
}
.theme-toggle:hover { background: rgba(0, 0, 0, .08); }
.theme-toggle:focus-visible { outline: 2px solid var(--c-on-header); outline-offset: 2px; }
/* Icon zeigt ZIEL-Modus: light-mode -> Mond (klick = auf dark wechseln),
   dark-mode -> Sonne (klick = auf light wechseln). */
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
.lang-switch-icon { font-size: 1em; line-height: 1; }

/* Required-field marker in contact form */
.required { color: var(--c-danger); margin-left: .2em; font-weight: 700; }
.form-required-note { margin: 0 0 1rem; }

/* ----- Hero ----- */
.hero {
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--c-tint-subtle) 100%),
    radial-gradient(ellipse at top right, var(--c-tint-brand-accent), transparent 60%);
  padding: 4rem 0 3rem;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.hero-text h1 { margin-bottom: 1rem; }
.hero-actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-image img {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  background: var(--c-card-bg);
}

/* ----- Value props ----- */
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
@media (max-width: 960px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .value-grid { grid-template-columns: 1fr; } }
.value-card {
  background: var(--c-card-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.value-icon { display: block; width: 1.8rem; height: 1.8rem; margin: 0 auto .6rem; color: var(--c-brand); }
.contact-icon { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.27em; color: var(--c-brand); margin-right: .35em; }
.value-card h3 { margin: .3rem 0 .4rem; }
.value-card p { color: var(--c-text-muted); margin: 0; }

/* ----- Dog grid + cards ----- */
.dog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; }
.dog-card {
  display: block;
  background: var(--c-card-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  color: var(--c-text);
  transition: transform .12s ease, box-shadow .15s ease;
  box-shadow: var(--shadow-sm);
}
.dog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.dog-card-image { position: relative; margin: 0; aspect-ratio: 4/3; background: var(--c-subtle-bg); overflow: hidden; }
.dog-card-image img { width: 100%; height: 100%; object-fit: cover; }
.dog-card-body { padding: 1rem 1.2rem 1.2rem; }
.dog-card-body h3 { margin: 0 0 .3rem; }
.dog-card-foot { display: flex; justify-content: flex-end; align-items: baseline; margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--c-border); }
.more { color: var(--c-brand); font-size: .9rem; font-weight: 600; }

/* ----- Role pills ----- */
.role-pill {
  position: absolute; top: .8rem; left: .8rem;
  background: var(--c-btn-primary-bg);
  color: var(--c-on-btn-primary);
  border: 1px solid var(--c-border);
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.dog-detail .role-pill { position: static; display: inline-block; margin-bottom: .5rem; }
/* role-spezifische sub-classes geloescht — .role-pill base regiert
   theme-konform (button-bg) ueber alle rollen. Wer differenzierung
   pro rolle braucht, sollte theme-vars nehmen, keine hex-codes. */
.dog-card.is-hidden { display: none; }

/* ----- Filter bar ----- */
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 2rem; }
.filter-btn {
  border: 1px solid var(--c-border);
  background: var(--c-card-bg);
  padding: .5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: .9rem;
  color: var(--c-text);
}
.filter-btn:hover { background: var(--c-subtle-bg); }
.filter-btn.is-active { background: var(--c-filter-active-bg); color: var(--c-on-filter-active); border-color: var(--c-filter-active-bg); }

/* ----- Dog detail ----- */
.dog-detail { padding: 2rem 0 4rem; }
.breadcrumb { font-size: .9rem; color: var(--c-text-muted); margin: 2rem 0 1.4rem; }
.breadcrumb .sep { margin: 0 .4rem; }
.dog-header {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
  align-items: start;
  margin-bottom: 2rem;
}
.dog-header .gallery { margin: 0; }
@media (max-width: 800px) {
  .dog-header { grid-template-columns: 1fr; }
  .contact-card { position: static; }
}

/* Cross-document View Transitions — sequenzieller Fade beim Seitenwechsel:
   alte Seite blendet aus, NEUE Seite blendet danach ein.

   Warum die drei Overrides nötig sind:
   - `isolation: auto` auf image-pair: Default `isolate` ist für Crossfade
     mit `plus-lighter`-Blend gedacht. Für sequenziellen Fade brauchen
     wir normale Komposition.
   - `mix-blend-mode: normal` auf old/new: Default `plus-lighter` addiert
     Helligkeiten beider Layer → bei sequenziellem Fade kurzes Aufhellen.
   - `both` als animation-fill-mode: hält den from-Frame VOR Animation-
     Start (während des .35s-Delay auf -new). Ohne `both` ist `-new`
     vor Delay-Start auf opacity 1 → Flicker.

   Aktive Browser: Chrome/Edge stable, Safari 18+. Firefox: noop (graceful). */
@view-transition { navigation: auto; }
@keyframes vt-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes vt-fade-in  { from { opacity: 0; } to { opacity: 1; } }
::view-transition-image-pair(root) { isolation: auto; }
::view-transition-old(root) {
  mix-blend-mode: normal;
  animation: vt-fade-out .35s ease-in both;
}
::view-transition-new(root) {
  mix-blend-mode: normal;
  animation: vt-fade-in .35s ease-out .35s both;
}

/* Growth-Chart (FAQ size_weight) — pure SVG, CD-Farben */
.growth-chart-pair { display: flex; flex-direction: column; gap: 1rem; margin: 1.4rem 0; }
.growth-chart {
  display: block;
  width: 100%;
  background: var(--c-card-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: .6rem;
  box-sizing: border-box;
}
.growth-chart .chart-title { fill: var(--c-text); font-size: 13px; font-weight: 600; font-family: var(--f-sans); }
.growth-chart .axis { stroke: var(--c-text-muted); stroke-width: 1; }
.growth-chart .grid line { stroke: var(--c-border); stroke-width: 1; stroke-dasharray: 2 4; }
.growth-chart .axis-label { fill: var(--c-text-muted); font-size: 11px; font-family: var(--f-sans); }
.growth-chart .curve { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.growth-chart .curve-male { stroke: var(--c-brand-hover); }
.growth-chart .curve-female { stroke: var(--c-brand-hover); stroke-dasharray: 5 3; }
.growth-chart .legend text { fill: var(--c-text); font-size: 11px; font-family: var(--f-sans); }
.growth-chart-caveat { font-size: .85rem; color: var(--c-text-muted); margin: .2rem .2rem 0; line-height: 1.4; }

/* OpenStreetMap-Embed (FAQ location) — sepia/brown CD-Tint */
.osm-map {
  position: relative;
  margin: 1.4rem 0;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-card-bg);
  box-shadow: var(--shadow-sm);
}
.osm-map iframe {
  display: block;
  width: 100%;
  border: 0;
  /* CD-Tint: Sepia rotiert OSM-Standardfarben (grün/blau) Richtung Lederbraun.
     Saturate dämpft, brightness hebt leicht an damit Labels lesbar bleiben. */
  filter: sepia(.55) hue-rotate(-12deg) saturate(.85) brightness(1.02);
}
.osm-map-link {
  position: absolute;
  bottom: .6rem;
  right: .6rem;
  background: var(--c-card-bg);
  color: var(--c-brand-hover);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: .3rem .6rem;
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.osm-map-link:hover {
  background: var(--c-subtle-bg);
  color: var(--c-brand-hover);
  text-decoration: none;
}
.osm-w3w { margin: 0 0 1.4rem; text-align: center; }

/* Visually-hidden heading for a11y/SEO without visual clutter */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.dog-subtitle { color: var(--c-text-muted); margin: .2rem 0 .6rem; font-size: 1rem; }
.contact-card {
  background: var(--c-card-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 1.4rem;
  box-shadow: var(--shadow-sm);
  position: sticky; top: 80px;
}
.contact-card-title { font-family: var(--f-serif); font-size: 1.3rem; color: var(--c-brand); margin: 0 0 .4rem; }
.contact-card .btn { margin: 1rem 0; }
.contact-mini { font-size: .9rem; color: var(--c-text-muted); border-top: 1px solid var(--c-border); padding-top: 1rem; line-height: 1.5; }
.contact-mini strong { color: var(--c-text); }

/* ----- Gallery ----- */
.gallery {
  background: var(--c-card-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: .8rem;
  margin: 0;
  box-shadow: var(--shadow-sm);
}
.dog-title-block { margin-bottom: 1rem; }
.dog-title-block h1 { margin: .2rem 0 0; }
.gallery-main {
  aspect-ratio: 4/3;
  background: var(--c-subtle-bg);
  border-radius: var(--r-sm);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: .5rem; margin-top: .8rem; flex-wrap: wrap; }
.thumb {
  width: 80px; height: 60px;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  background: var(--c-subtle-bg);
  padding: 0; overflow: hidden; cursor: pointer;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-active { border-color: var(--c-brand); }

/* ----- Dog body sections ----- */
.dog-body { display: grid; gap: 2rem; }
.dog-section { background: var(--c-card-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 1.6rem 1.8rem; box-shadow: var(--shadow-sm); max-width: 100%; box-sizing: border-box; overflow-wrap: break-word; min-width: 0; overflow-x: clip; }
.dog-section h2 { margin-top: 0; padding-bottom: .6rem; border-bottom: 1px solid var(--c-border); }

/* ----- Facts ----- */
.facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.fact-table { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; margin: 0; }
.fact-table dt { color: var(--c-text-muted); }
.fact-table dd { margin: 0; font-weight: 500; }
.trait-pills { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-content: start; }
.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  font-size: .85rem;
  background: #eef5ec; color: var(--c-success); border: 1px solid #c5dfb8;
}
.pill-yes::before { content: "✓"; font-weight: 700; }

/* ----- Pedigree ----- */
.pedigree {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  align-items: stretch;
  background: linear-gradient(180deg, #fbf8f1 0%, #f4efe7 100%);
  padding: 1.4rem;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  overflow-x: auto;
}
.ped-col { display: grid; gap: .8rem; }
.ped-col-0 { grid-template-rows: 1fr; align-content: center; }
.ped-col-1 { grid-template-rows: 1fr 1fr; align-content: center; }
.ped-col-2 { grid-template-rows: repeat(4, 1fr); }
.ped-col-3 { grid-template-rows: repeat(8, 1fr); }
.ped-node {
  background: var(--c-card-bg);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: .55rem .7rem;
  font-size: .85rem;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 44px;
  box-shadow: var(--shadow-sm);
}
.ped-self { background: var(--c-brand); color: var(--c-on-brand); border-left-color: var(--c-brand-hover); border-color: var(--c-brand); }
.ped-self .ped-meta { color: var(--c-on-brand); opacity: .85; }
.ped-male { border-left-color: var(--c-dog-male); }
.ped-female { border-left-color: var(--c-dog-female); }
.ped-rel { display: block; font-size: .7rem; color: var(--c-text-muted); letter-spacing: .05em; margin-bottom: .15rem; }
.ped-self .ped-rel { color: var(--c-on-brand); opacity: .8; }
.ped-name { font-weight: 600; color: inherit; line-height: 1.25; }
.ped-meta { color: var(--c-text-muted); font-size: .75rem; margin-top: .15rem; }
@media (max-width: 625px) {
  /* ped-name darf zwischen woertern umbrechen (vor-/nachname),
     aber nicht mitten im namen -> default white-space:normal greift. */
  .ped-name { white-space: normal; }
}
.pedigree-legend { font-size: .8rem; color: var(--c-text-muted); margin-top: .8rem; }

/* ----- Footer ----- */
.site-footer { background: var(--c-footer-bg); color: var(--c-footer-text); padding: 2.5rem 0; margin-top: 3rem; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; }
.site-footer a { color: var(--c-footer-link); }
.site-footer .muted { color: var(--c-footer-text-muted); }

/* ----- Generic content ----- */
/* .prose styles typography only — width comes from the parent .container */
.prose h2 { margin-top: 2rem; }
.prose ul { padding-left: 1.4rem; }
.prose code { background: var(--c-subtle-bg); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
.list-plain { list-style: none; padding: 0; }
.page-header { margin: 2rem 0 1.6rem; }

/* ----- Reserved overlay (auf Hund-Foto wenn currentLitter true) ----- */
.dog-card-image,
.gallery-main { position: relative; }
.reserved-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  background: rgba(192, 57, 43, .92);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .15em;
  padding: .55rem 1.6rem;
  text-transform: uppercase;
  border: 3px solid #fff;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
.gallery-main .reserved-overlay { font-size: 1.6rem; padding: .7rem 2rem; }

/* ----- TODO-Fallback (placeholder marker for unfilled values) ----- */
.fallback-todo {
  color: #c0392b;
  font-weight: 700;
  background: rgba(192, 57, 43, .08);
  padding: 0 .25em;
  border-radius: 3px;
  cursor: help;
  text-decoration: underline dotted rgba(192, 57, 43, .5) 1px;
  text-underline-offset: 3px;
}

/* ----- Legal pages ----- */
.legal { padding-bottom: 4rem; }
/* legal pages use the same page-header offset as everything else */
.legal-disclaimer {
  margin: 0 0 2rem;
  padding: 1.2rem 1.4rem;
  background: #fff5e1;
  border: 1px solid #f0c875;
  border-left: 6px solid #b07c1a;
  border-radius: var(--r-md);
  color: #5e451a;
  font-size: .95rem;
  line-height: 1.55;
}
.legal-disclaimer strong:first-child { color: #6f4f0d; display: block; margin-bottom: .3rem; font-size: 1rem; }
.legal-body { max-width: none; }
.legal-body h2 { margin-top: 2.2rem; padding-bottom: .4rem; border-bottom: 1px solid var(--c-border); font-size: 1.4rem; }
.legal-body h3 { margin-top: 1.6rem; font-size: 1.1rem; }
.legal-body table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
.legal-body td, .legal-body th { padding: .5rem .8rem; border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: top; }
.legal-body th { font-weight: 600; }
.legal-body blockquote { border-left: 3px solid var(--c-border); margin: 1rem 0; padding: .4rem 1rem; color: var(--c-text-muted); background: var(--c-subtle-bg); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.legal-address {
  display: block;
  font-style: normal;
  background: var(--c-subtle-bg);
  border-left: 4px solid var(--c-brand);
  padding: .8rem 1.1rem;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin: .6rem 0 1.4rem;
  line-height: 1.55;
}
.legal-nav {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-border);
}
.legal-nav h2 { font-size: 1rem; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .08em; }
.legal-nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.legal-nav a[aria-current="page"] { color: var(--c-text); font-weight: 600; pointer-events: none; }

.footer-copy { margin-top: auto; }

/* ----- Mailto forms ----- */
.mailto-form {
  display: grid;
  gap: 1.2rem;
  background: var(--c-card-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 1.6rem 1.8rem;
  box-shadow: var(--shadow-sm);
  margin: 1rem 0 2rem;
}
.mailto-form .form-fieldset {
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 1rem 1.2rem 1.2rem;
  display: grid;
  gap: .8rem;
}
.mailto-form .form-fieldset legend {
  padding: 0 .5rem;
  font-weight: 600;
  color: var(--c-brand);
  font-size: .95rem;
}
.mailto-form label {
  display: block;
  font-size: .9rem;
  color: var(--c-text-muted);
}
.mailto-form label.radio-row,
.mailto-form label.checkbox-row {
  font-size: .95rem;
  color: var(--c-text);
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  cursor: pointer;
}
.mailto-form label.checkbox-row a { color: var(--c-brand); }
.mailto-form input[type="text"],
.mailto-form input[type="email"],
.mailto-form input[type="tel"],
.mailto-form input[type="date"],
.mailto-form input:not([type]),
.mailto-form select,
.mailto-form textarea {
  display: block;
  width: 100%;
  padding: .55rem .8rem;
  margin-top: .3rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: .95rem;
  font-family: inherit;
  color: var(--c-text);
  background: var(--c-page-bg);
}
.mailto-form input:focus,
.mailto-form select:focus,
.mailto-form textarea:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(139, 74, 43, .15);
}
.mailto-form textarea { font-family: inherit; resize: vertical; min-height: 60px; }
.mailto-form .form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.mailto-form .form-fineprint { margin: 0; }
.mailto-form .form-consent { margin: 0; }
.js-mail-link, .js-tel-link { color: var(--c-brand); }

/* ----- Maintenance page ----- */
body.maintenance {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at top right, var(--c-tint-brand-accent), transparent 60%),
    radial-gradient(ellipse at bottom left, var(--c-tint-brand), transparent 55%),
    var(--c-page-bg);
  opacity: 0;
  transition: opacity 2.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.maintenance.is-ready { opacity: 1; }

/* ----- Social links ----- */
.social-links {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: flex;
  gap: .8rem;
  justify-content: center;
}
.social-links a {
  width: 42px; height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-subtle-bg);
  color: var(--c-brand);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.social-links a:hover {
  background: var(--c-brand);
  color: var(--c-on-brand);
  transform: translateY(-2px);
  text-decoration: none;
}
.social-links svg { width: 30px; height: 30px; display: block; }
.footer-contact-col .social-links { margin-top: .8rem; justify-content: flex-start; }
.footer-contact-col .social-links a { background: rgba(255,255,255,.08); color: var(--c-footer-text); }
.footer-contact-col .social-links a:hover { background: var(--c-brand-accent); color: var(--c-on-brand-accent); }
.site-footer .contact-icon { color: var(--c-footer-text); }
.footer-copy { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--c-footer-border); font-size: .85rem; opacity: .8; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem; }
.footer-copy a { color: inherit; }
.maintenance-main {
  width: 100%;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.maintenance-card {
  background: var(--c-card-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(40, 30, 20, .12);
  padding: 3rem 2.4rem;
  max-width: 580px;
  width: 100%;
  text-align: center;
}
.maintenance-logo {
  width: 220px;
  height: auto;
  aspect-ratio: 854 / 1280;
  margin: 0 auto 1.4rem;
  display: block;
  border-radius: var(--r-md);
  object-fit: cover;
  background: var(--c-subtle-bg);
  box-shadow: 0 12px 32px rgba(139,74,43,.22);
  border: 4px solid var(--c-card-bg);
  outline: 1px solid var(--c-border);
}
.maintenance-kicker {
  display: block;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: .6rem;
}
.maintenance-card h1 {
  font-family: var(--f-sans);
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  color: var(--c-text);
  line-height: 1.15;
}
.maintenance-lead {
  color: var(--c-text-muted);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 1.8rem;
}
.maintenance-paws {
  display: flex;
  gap: 1.4rem;
  justify-content: center;
  margin: 0;
  color: var(--c-brand);
}
.maintenance-paws span { display: inline-flex; animation: paw-bounce 1.6s ease-in-out infinite; }
.maintenance-paws svg { width: 28px; height: 28px; display: block; }
.maintenance-paws span:nth-child(2) { animation-delay: .2s; }
.maintenance-paws span:nth-child(3) { animation-delay: .4s; }
@keyframes paw-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .7; }
  30%           { transform: translateY(-6px); opacity: 1; }
}

/* ----- Responsive ----- */
@media (max-width: 800px) {
  .hero-grid { grid-template-columns: 1fr; }
  .facts-grid { grid-template-columns: 1fr; }
  .dog-section { padding: 1rem 1.2rem; }
  .contact-card { padding: 1rem 1.2rem; }
}
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .header-grid { position: relative; }
  /* Theme/Contrast/Lang-Buttons bleiben inline sichtbar; nur die ul
     mit den nav-links kommt ins burger-dropdown. */
  .site-nav ul {
    display: none;
    position: absolute; top: 100%; right: 0; left: 0;
    background: var(--c-header-bg);
    flex-direction: column;
    padding: 1rem;
    gap: .4rem;
    border-top: 1px solid var(--c-border);
  }
  .site-nav.is-open ul { display: flex; }
  .site-nav.is-open ul li {
    width: 100%;
    text-align: center;
  }
  .site-nav.is-open ul a {
    display: block;
    padding: .6rem;
    border-bottom: 0;
  }
  .site-nav.is-open ul a:hover { border-bottom-color: transparent; }
  .site-nav.is-open ul li:not(:last-child) {
    border-bottom: 1px solid color-mix(in srgb, var(--c-on-header) 25%, transparent);
  }
}

/* ----- Intro-Animation (Splash auf Start jeder Seite) ----- */
.intro-overlay {
  position: fixed;
  inset: 0;
  background: #f7cf1d;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 1.5s ease;
  pointer-events: none;
}
.intro-overlay.is-active { display: flex; }
.intro-overlay.no-bg {
  background: transparent;
  pointer-events: none;
}
.intro-overlay.fade-out {
  opacity: 0;
  transition: opacity .7s ease;
}
.intro-overlay img {
  opacity: 0;
  transition: opacity 2s ease, transform 1.5s cubic-bezier(.4, 0, .2, 1);
  will-change: transform, opacity;
}
.intro-overlay img.show {
  opacity: 1;
}
.intro-overlay img.show {
  filter: drop-shadow(0 0 80px var(--c-brand-accent))
          drop-shadow(0 0 40px var(--c-brand-accent))
          drop-shadow(0 0 20px var(--c-brand-accent));
}
.intro-overlay img.flying {
  opacity: 1;
  transition: opacity 1.5s ease, transform 1.5s cubic-bezier(.4, 0, .2, 1);
}
.intro-overlay img.show.flying,
.intro-overlay img.flying {
  filter: drop-shadow(0 0 80px var(--c-brand-accent))
          drop-shadow(0 0 40px var(--c-brand-accent))
          drop-shadow(0 0 20px var(--c-brand-accent));
}
.intro-overlay img.faded-out {
  opacity: 0;
  transition: opacity .4s ease;
}

/* Header-Logo immer unsichtbar — dient nur als Positions-Anchor fuer
   die Intro-Animation. Der visuelle Bulldog kommt aus dem Banner-Bg.
   Der Overlay-Bulldog fliegt zur Position des brand-img und verschwindet
   dann (overlay display none). User-sicht: bulldog "blendet schnell aus". */
.brand img { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .intro-overlay { display: none; }
  .brand img { opacity: 0; }
}

/* 404-Seite */
.page-404 { text-align: center; }
.page-404-figure {
  margin: 2rem auto;
  max-width: 320px;
}
.page-404-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
.page-404-prompt {
  margin-top: 2rem;
  font-weight: 600;
}
.page-404-links {
  list-style: none;
  padding: 0;
  margin: 1rem auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.page-404-links a {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  text-decoration: none;
  background: var(--c-card-bg);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.page-404-links a:hover,
.page-404-links a:focus-visible {
  background: var(--c-subtle-bg, var(--c-card-bg));
  border-color: currentColor;
}

/* ----- Image carousel (card-flip transition, auto-advance + arrows) ----- */
.marquee {
  position: relative;
  width: 100%;
  background: var(--c-subtle-bg);
  padding: 2rem 0;
}
.marquee-viewport {
  position: relative;
  width: 100%;
  max-width: calc(80vh * 4 / 3);  /* cap so that derived height never exceeds 80vh */
  aspect-ratio: 4 / 3;
  margin-inline: auto;
  perspective: 1200px;     /* enables real 3D depth on rotateY */
}
.marquee-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(.4, 0, .2, 1);
}
.marquee-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--r-lg);
  border: 3px solid var(--c-brand-hover);
  backface-visibility: hidden;
}
.marquee-back {
  transform: rotateY(180deg);
}
.marquee-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: rgba(255, 255, 255, 0.5);
  color: var(--c-text);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.marquee-nav:hover,
.marquee-nav:focus-visible {
  background: rgba(255, 255, 255, 0.75);
  outline: none;
}
.marquee-prev { left: .75rem; }
.marquee-next { right: .75rem; }
@media (prefers-reduced-motion: reduce) {
  .marquee-card-inner { transition: none; }
}

/* ----- Amadeus hero (home page) — compact variant ----- */
.amadeus-hero { padding: 6rem 0 3rem; }
.amadeus-hero .hero-grid { align-items: stretch; }
.amadeus-hero .kicker { font-size: .72rem; margin-bottom: .35rem; }
.amadeus-hero h1 { margin-bottom: .5rem; }
.amadeus-hero .lead { margin: 0 0 .55rem; }
.amadeus-hero .hero-text p { margin: 0 0 .7rem; }
.amadeus-hero .hero-actions { margin-top: .9rem; gap: .55rem; align-items: center; }
.amadeus-hero .hero-actions .social-links { margin: 0; }
/* Hero buttons use global .btn sizing for consistency with other pages */
.amadeus-hero .hero-image {
  position: relative;              /* anchor for the ::after frame overlay */
  display: flex;
  overflow: hidden;                /* clip the scale(2) zoom */
  border-radius: var(--r-lg);      /* moved from img to wrapper */
  box-shadow: var(--shadow-md);    /* moved from img to wrapper so it survives overflow:hidden */
}
/* Frame as a separate overlay so it (a) is not eaten by the image filling
   the wrapper and (b) does not scale together with the img during the
   zoom-out animation. */
.amadeus-hero .hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 3px solid var(--c-brand-hover);
  border-radius: inherit;
}
.amadeus-hero .hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 56% 70%;       /* Amadeus's head (right dog, lower half) */
}
/* Zoom-out runs only when the intro JS adds .hero-zoom-active (first visit
   in a session). animation-delay aligns the start with intro completion;
   fill-mode `both` keeps the zoomed-in state visible during the intro and
   the final scale(1) state after the animation ends. */
.amadeus-hero .hero-image.hero-zoom-active img {
  animation: hero-zoom-amadeus 2.5s 5.5s ease-out both;
}
@keyframes hero-zoom-amadeus {
  0%   { transform: scale(2.6); }
  100% { transform: scale(1); }
}
@media (max-width: 800px) {
  .amadeus-hero .hero-image img { height: auto; }
}

.amadeus-highlights {
  list-style: none;
  padding: 0;
  margin: .7rem 0;
  font-size: .9rem;
}
.amadeus-highlights li {
  padding-left: 1.5em;
  position: relative;
  margin: 0.18em 0;
}
.amadeus-highlights li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--c-success);
  font-weight: 700;
}